或许咱们在 JavaScript 中不须要 this 和 class

时间  2019-11-06
标签 或许 咱们 javascript 须要 class 栏目 JavaScript 繁體版
原文   原文链接

今年年初 Douglas Crockford 的新书 How JavaScript Works 出版不久后，我买来看了。在 JavaScript: The Good Parts 出版后 10 年，并深远影响了 JavaScript 语言以后，Douglas Crockford 对 JavaScript 这门语言依然有不少不满，并认为 the bad parts 更多了。javascript

固然我并不认同他的全部观点，好比把箭头函数和 async/await 也归为 the new bad parts。不过，他关于 this 和 class 的见解，以及他对这些见解的论证，我是赞成的。我认为在遇到咱们不熟悉的观点时，若是论述者足够认真和严肃，咱们应该至少倾听一下。Crockford 为了证实“你不熟悉的东西不必定就是错的”这个观点，全书用 wun 来替代 one，由于 one 不符合任何英文发音规则。前端

首先须要说明的是，拒绝 this 和 class 和推崇函数式编程并无关系。若是你常常关注 Douglas Crockford 的话，你会知道他并不认为 Monad 是解决问题的方案。他寻找的下一代编程语言依然是面向对象的，只不过不是 Java 和 C++ 那种。java

引言

在我介绍 this 和 class 的问题以前，仍是先来看看启发我写这篇文章的一个小故事。git

前天在掘金看到一篇关于面试题的文章，看到这样一题：程序员

// 写一个 machine 函数达到以下效果

function machine() {}
machine('ygy').execute();
// start ygy
machine('ygy')
  .do('eat')
  .execute();
// start ygy
// ygy eat
machine('ygy')
  .wait(5)
  .do('eat')
  .execute();
// start ygy
// wait 5s（这里等待了5s）
// ygy eat
machine('ygy')
  .waitFirst(5)
  .do('eat')
  .execute();
// wait 5s
// start ygy
// ygy eat
复制代码

看到链式调用，可能不少人会想到原型链继承。我一开始写出的答案并无用原型链继承，可是为了省事仍是用了 this:github

// 基于首次答案有微调

const defer = sec => new Promise(resolve => setTimeout(resolve, sec * 1000));

function machine(name) {
  const tasks = [];
  const initTask = () => {
    console.log(`start ${name}`);
  };
  tasks.push(initTask);

  function _do(str) {
    const task = () => {
      console.log(`${name} ${str}`);
    };
    tasks.push(task);
    return this;
  }

  function wait(sec) {
    const task = async () => {
      console.log(`wait ${sec}s`);
      await defer(sec);
    };
    tasks.push(task);
    return this;
  }

  function waitFirst(sec) {
    const task = async () => {
      console.log(`wait ${sec}s`);
      await defer(sec);
    };

    tasks.unshift(task);
    return this;
  }

  function execute() {
    tasks.reduce(async (promise, task) => {
      await promise;
      await task();
    }, undefined);
  }

  return {
    do: _do,
    wait,
    waitFirst,
    execute,
  };
}
复制代码

来经过这段代码看看 this 有什么问题。看到 this，若是你对 JS 比较熟悉，你想到的就是去找 this 所在函数的执行上下文。但是代码中并无明显而直观的视觉提示 (visual cue) 来指引你去哪找，你只有当人肉解释器去找 this 的动态绑定。这在我看来是不必的脑力浪费。而若是是新人看到这种代码，会很是困惑和抓狂。WTF is this?!面试

来看看去除 this 的版本：编程

const defer = sec => new Promise(resolve => setTimeout(resolve, sec * 1000));

function machine(name) {
  const context = {};
  const tasks = [];
  const initTask = () => {
    console.log(`start ${name}`);
  };
  tasks.push(initTask);

  function _do(str) {
    const task = () => {
      console.log(`${name} ${str}`);
    };
    tasks.push(task);
    return context;
  }

  function wait(sec) {
    const task = async () => {
      console.log(`wait ${sec}s`);
      await defer(sec);
    };
    tasks.push(task);
    return context;
  }

  function waitFirst(sec) {
    const task = async () => {
      console.log(`wait ${sec}s`);
      await defer(sec);
    };

    tasks.unshift(task);
    return context;
  }

  function execute() {
    tasks.reduce(async (promise, task) => {
      await promise;
      await task();
    }, undefined);
  }

  // 用 Object.freeze 来防止调用者修改内部函数，保障安全
  return Object.freeze(
    Object.assign(context, {
      do: _do,
      wait,
      waitFirst,
      execute,
    })
  );
}
复制代码

修改过的版本，全部的变量关系都是显式的。看到 return context;，你能很快跟踪到 context 的引用，不用费力想就能明白 context 里面有什么。后端

我平时写业务代码时固然也会写 this，但我只是为了顺应开发生态。业余练习我会尽可能避免 this。而 Crockford 的观点是，没有 this 的 JavaScript 依然图灵完备，并且会是更好的语言。下面我来介绍总结下他在 How JavaScript Works 这本书中关于 this 和 class 的观点。数组

this 的问题

提到 this 不得不提原型链继承。最先采用原型链继承的语言是 Self，它是 Smalltalk 的一个方言。Crockford 认为，Self 的原型链继承机制相对于笨重而高耦合的类继承来讲，像一阵清风。原型链继承灵活，轻量，更有表达性。而 JavaScript 实现的原型链继承则是一个古怪的变体。

在 JavaScript 中，当一个对象被建立时，咱们能够同时指定这个变量的原型。原型上保存了目标对象的部分或全部内容。当咱们试图访问的某属性或方法在一个对象中不存在时，咱们会获得 undefined，而当这个对象有原型时，原取值的结果会是在原型上取值的结果，若是在原型上取值失败，会顺着原型链继续找，直到找到或者原型不存在。

一般使用原型链的场景是，当咱们须要在不一样对象之间共享某些方法时，使用原型链会节省内存。

而原型链上的这些方法是怎么知道它们做用于哪一个对象上的？这就要靠 this 来解决了。

当一个对象上的方法被执行时，这个方法接受的不只有实参，还有隐式传入的形参 this，this 被绑定在当前对象上。当一个方法内部存在函数时，内部这个函数访问不到 this，由于只有方法才能访问到 this，函数访问不到。如：

old_object.bud = function bud() {
  const that = this;
  function lou() {
    do_to_it(that);
  }
  lou();
};
复制代码

因为 this 绑定只做用于方法上，函数调用的状况下，this 绑定会失败：

// this 绑定有效
new_object.bud();

// 无效，失去了 this 绑定
const funky = new_object.bud;
funky();
复制代码

看到上面的例子，想到了 React 里面在能使用 class property 以前使人头疼的 this 绑定了吗？

this 最有问题的地方在于它的动态绑定。来看一个发布订阅例子：

function pubsub() {
  const subscribers = [];
  return {
    subscribe: function(subscriber) {
      subscribers.push(subscriber);
    },
    publish: function(publication) {
      const length = subscribers.length;
      for (let i = 0; i < length; i += 1) {
        subscribers[i](publication);
      }
    },
  };
}
复制代码

因为 subscribers[i](publication) 这行代码的存在，每一个 subscriber 订阅者函数都得到了 subscribers 数组的 this 绑定，这让订阅者函数能干出很危险的事情，好比把 subscribers 数组清空，像这样：

my_pubsub.subscribe(function(publication) {
  this.length = 0;
});
复制代码

若是把一个函数存在数组里，当经过下标来调用这个函数时，实际上是在执行数组对象上的方法。此时函数得到了指向数组的 this 绑定。这在代码安全性和可靠性规约上是很糟糕的。

上面提到的问题，能够经过把 for 循环改为 forEach 解决：

publish: function (publication) {
  subscribers.forEach(function (subscriber) {
    subscriber(publication);
  })
}
复制代码

全部变量都是静态绑定的。静态绑定能让代码更易理解，行为更符合预期，更可靠安全。只有 this 是动态绑定的。动态绑定意味着函数的调用者，而不是定义者决定绑定的内容，这会引发困惑和混乱。

class 的问题

提到 class，不得不说面向对象编程。咱们如今认知中的主流的面向对象，和“面向对象”这个词被发明出来时所表达的意思已经相差太远了。

I invented the term Object-Oriented, and I can tell you I did not have C++ in mind. -- Alan Kay

(我能够告诉你，在我发明“面向对象”这个词的时候，我想到的不是 C++ -- Alan Kay)

Alan Kay 设计了 Smalltalk。Smalltalk 虽然不是第一个面向对象语言，但现代面向对象编程思想始于 Smalltalk。Smalltalk 中面向对象编程的核心部分，是对象之间的消息传递。对象之间经过调用对方的方法来传递消息，而多态使得这种互相调用很是灵活和强大。这是面向对象最初所要强调的软件设计思想。面向对象一开始和继承没有关系。

在处理的问题足够简单时，继承能够很方便复用代码。可是现实世界是复杂的，多重继承会形成代码的高度耦合，改一个类，依赖这个类的相关的类所有受影响。

类继承的问题已经有足够多的论述，我再也不展开。我在初学 Python 的时候，学的教程是 Learn Python the Hard Way，书中专门留了一章来警告类继承的问题。我想这个问题应该有足够的共识。

既然已经知道了类继承的问题，为何还要在 JavaScript 中加入语法糖，提供假的继承？一个可能的缘由是不少 Java 程序员要写 JS 了，为了方便这些开发者快速地把 Java 知识迁移到 JS 中来，EcmaScript 给全部 JS 开发者提供了 class 语法糖。

即便 JavaScript 中的 class 是基于原型链继承的语法糖，它也有这些问题：

一，没有封装

来看例子。

class Cat {
  constructor(name) {
    this.name = name;
  }

  meow() {
    console.log(`${this.name} meows!`);
  }
}

const Tom = new Cat('Tom');

Tom.meow(); // Tom meows!

Tom.name = 'Jerry';

Tom.meow(); // Jerry meows!

Tom.meow = null;

Tom.meow(); // TypeError: Tom.meow is not a function
复制代码

可能你会想到正在 TC39 草案中的 private fields，而这在我看来是先制造问题，而后提供解决问题的方案。

用工厂函数就没有这个问题：

function cat(name) {
  function meow() {
    console.log(`${name} meows!`);
  }

  return Object.freeze({
    meow,
  });
}

Tom.meow(); // Tom meows!

Tom.name = 'Jerry'; //TypeError: Cannot add property name, object is not extensible

Tom.meow = null; //TypeError: Cannot add property name, object is not extensible

复制代码

二，处理 this

在使用 class 的时候，要很是当心 this 失去上下文。上面已经讲过了，再也不赘述。

三，为何框架用 class

第一个缘由正如刚刚提到的，有不少后端开发者要来写前端，提供 class 可让更多后端开发者快速上手 JS。

第二个缘由是原型链继承能够节省内存。当你要同时生成成千上万个 UI 组件时，使用原型链继承节省的内存是很可观的。但我很怀疑这种策略的适用场景，你何时须要一个页面渲染超过一百个组件了？Douglas Crockford 专门论述了内存占用上的对比。在过去内存紧张的状况下，原型链继承节省的内存很重要；但如今，一台手机的内存都用 G 来计量了，这点内存占用差别能够忽略不计。

Crockford Classless

若是你有兴趣了解 Douglas Crockford 倡导的面向对象是什么样子，能够看 MPJ 的这篇文章：The future is here: Classless object-oriented programming in JavaScript

另外，MPJ 有一期的 Fun Fun Function 讲了对象组合。Composition Over Inheritance 他演示了如何用工厂函数来实现对象组合。

这里还有一篇相似的：Object Composition in Javascript

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程