ES6中的箭头功能中"this"指的是什么？

Question

我在几个地方读过,关键的区别是" this在箭头函数中是词法绑定的".这一切都很好,但我实际上并不知道这意味着什么.

我知道这意味着它在定义函数体的大括号范围内是独一无二的,但我实际上无法告诉你以下代码的输出,因为我不知道所指的this是什么,除非它指的是胖箭头函数本身....这似乎没用.

var testFunction = () => { console.log(this) };
testFunction();

Answer 1

箭头函数捕获this封闭上下文的值

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

因此,要直接回答您的问题,this您的箭头函数内部将具有与分配箭头函数之前相同的值.

Answer 2

为了提供大局,我将解释动态和词汇绑定.

动态名称绑定

this指的是调用该方法的对象.这是SO上经常被读的句子.但它仍然只是一个短语,非常抽象.这句话有相应的代码模式吗？

就在这里:

const o = {
  m() { console.log(this) }
}

// the important patterns: applying methods

o.m(); // logs o
o["m"](); // logs o

m是一种方法,因为它依赖于this.o.m()或o["m"]() 手段m适用于o.这些模式是我们着名短语的Javascript翻译.

还有另一个重要的代码模式,你应该注意:

"use strict";

const o = {
  m() { console.log(this) }
}

// m is passed to f as a callback
function f(m) { m() }

// another important pattern: passing methods

f(o.m); // logs undefined
f(o["m"]); // logs undefined

它与之前的模式非常相似,只缺少括号.但结果是相当可观的:当您传递m给函数时f,您将退出m其对象/上下文o.它现在被连根拔起并且this没有任何东西(假设严格模式).

词法(或静态)名称绑定

箭头函数没有自己的this/ super/ arguments绑定.他们从父级词法范围继承它们:

const toString = Object.prototype.toString;

const o = {
  foo: () => console.log("window", toString.call(this)),
      
  bar() {
    const baz = () => console.log("o", toString.call(this));
    baz();
  }
}

o.foo() // logs window [object Window]
o.bar() // logs o [object Object]

除了全局范围(Window在浏览器中),只有函数能够在Javascript(以及{}ES2015中的块)中形成范围.当o.foo调用箭头函数时,没有baz可以继承它的周围函数this.因此,它捕获this绑定到Window对象的全局范围的绑定.

当baz被调用时o.bar,箭头函数被o.bar(o.bar包括其父词法范围)包围并且可以继承o.bar的this绑定.o.bar被召唤o,因此它this必然会受到影响o.

Answer 3

希望这个代码展示能给你更清晰的想法。基本上，箭头函数中的“this”是“this”的当前上下文版本。看代码：

// 'this' in normal function & arrow function
var this1 = {
    number: 123,
    logFunction: function () { console.log(this); },
    logArrow: () => console.log(this)
};
this1.logFunction(); // Object { number: 123}
this1.logArrow(); // Window