回顾一下 this

在JavaScript类中,我们将使用this关键字来引用类的实例。例如:

class Toppings {
  ...
  formatToppings() { /* 实现细节 */ }
  list() {
    return this.formatToppings(this.toppings);
  }
}

这里的this指的是Toppings类的一个实例。 只要使用点号调用list方法,如myToppings.list(),则this.formatToppings(this.toppings)调用在类的实例上定义的formatToppings()方法。 这也将确保formatToppings内部,this指的是同一个实例。

但是,this也可以指其他东西。有两种基本情况你应该记住。

  1. 方法调用: someObject.someMethod(); 这里,在someMethod内的this将引用someObject,这通常是你想要的。
  2. 函数调用: someFunction(); 这里,在someFunction内的this可以指不同的东西,这取决于我们是否处于“strict”模式。 不使用“strict”模式,这是指调用someFunction()的上下文,这很少是你想要的。 在“strict”模式下,this将是未定义的。

View Example

其中一个含义是,你不能轻易地从它的对象中分离一个方法。考虑这个例子:

  var log = console.log;
  log('Hello');

在许多浏览器中这会报错。 这是因为log期望this指的是console ,但是当函数从console分离时,引用丢失了。

这可以通过明确设置来固定。 一种方法是使用bind()方法,它允许您指定要用于绑定函数内的this的值。

  var log = console.log.bind(console);
  log('Hello');

你也可以使用Function.callFunction.apply实现相同的功能,但我们不在这里讨论。

另一个可能令人困惑的实例是匿名函数或在其他函数中声明的函数。 例如:

class ServerRequest {
   notify() {
     ...
   }
   fetch() {
     getFromServer(function callback(err, data) {
        this.notify(); // 这不会生效
     });
   }
}

在上面的代码中,this不会指向期望的对象:在“strict”模式下,它将是未定义的。这引出另一个ES6特性 - 箭头函数,将在下面介绍。

下一节:ES6 提供了一些处理 this 的新语法: “箭头函数”。箭头函数能使高阶函数更容易的工作。