一句话概括就是: 箭头函数的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()