js箭头函数与this

一句话概括就是: 箭头函数的this与创建时的封闭词法上下文的this保持一致。
箭头函数的这种表现形式的本质是函数创建机制造成的，由于箭头函数没有this变量，在函数解析的时候，发现内部引用了this，则会在作用域链中记录this所在的活动对象。如果最近一个封闭词法上下文是函数，则会形成一个闭包。当函数执行时，就会取出scope中的这个this值。这也解释了为什么this与创建时的封闭词法上下文保持一致，而不是调用时。

function bar() {
    const foo = () => this
    // true
    console.log(foo() === this)
    // [[scope]][0] = Closure (bar) {type: "closure", name: "bar", object: {…}}
    console.log({foo})
}
bar()

准确一点说应该是，箭头函数没有自己的this以及arguments,所能取到的this是它被创建时的封闭词法上下文。箭头函数使用call,apply,bind传递作用域会被忽略, 但是可以用来传递参数，此时第一个参数应该设置为null。以下为实例：

const foo = ((...rest) => { console.log(this) })
let foo1 = foo.bind({demo: 1}, 'demo')
// window
foo1()
function Foo() {
// Foo 实例
  console.log(this)
  this.obj = {
      // window
      foo: foo,
      // obj
      bar() { console.log(this)    },
      // Foo实例
      zoo: () => { console.log(this) },
        callF() { this.foo(), this.bar(), this.zoo() }
    }
}
let demo = new Foo()
demo.obj.callF()