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

function Person(){
  this.age = 0;

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

var p = new Person();

因此，为了直接回答您的问题，this您的箭头函数内部的值将与分配箭头函数之前的值相同。

为了提供大图，我将解释动态绑定和词法绑定。

动态名称绑定

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。

希望这个代码展示能给你更清晰的想法。基本上，箭头函数中的“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 

箭头函数this在 Es6 中指向周围的父级，这意味着它不像 ES5 中的匿名函数那样作用域......

这是避免将 var self 分配给 ES5 中广泛使用的 this 的非常有用的方法......

看下面的例子，在一个对象中分配一个函数：

var checkThis = {
  normalFunction: function () { console.log(this); },
  arrowFunction: () => console.log(this)
};

checkThis.normalFunction(); //Object {}
checkThis.arrowFunction(); //Window {external: Object, chrome: Object, document: document, tmpDebug: "", j: 0…}

您可以尝试按照以下方式理解它

// whatever here it is, function or fat arrow or literally object declare
// in short, a pair of curly braces should be appeared here, eg:
function f() {
  // the 'this' here is the 'this' in fat arrow function below, they are
  // bind together right here
  // if 'this' is meaningful here, eg. this === awesomeObject is true
  console.log(this) // [object awesomeObject]
  let a = (...param) => {
    // 'this is meaningful here too.
    console.log(this) // [object awesomeObject]
}

所以胖箭头函数中的'this'没有绑定，意味着你不能在这里绑定'this'，.apply不会，.call不会，.bind不会。当您在文本编辑器中写下代码文本时，胖箭头函数中的“this”会被绑定。胖箭头函数中的“this”在这里具有字面意义。您在文本编辑器中编写的代码就是您的应用程序在 repl 中运行的内容。除非您在 text editor 中更改它，否则在 fat arror 中绑定的“this”永远不会改变。对不起我的游泳池英语...