应该是最全的箭头函数使用this场景汇总
以下例子如果全部能搞懂,那就算毕业了
大伙可以放到浏览器的控制台里面去试一下,然后一个个去理解就好了,实在难理解先背下来也不是不行
const fn = () => {
console.log(this)
}
fn()
"use strict"
const fn = () => {
console.log(this)
}
fn()
const obj = {
fn: () => {
console.log(this)
}
}
obj.fn()
const fn = obj.fn
fn()
const obj = {
fn1: null,
fn2: function() {
this.fn1 = () => {console.log(this)}
},
}
obj.fn2()
obj.fn1()
const fn = obj.fn1
fn()
const fn = () => {
console.log(this)
}
const obj = {}
fn.call(obj)
const fn1 = fn.bind(obj)
fn1()
const obj = {
fn: function() {
// 执行了某个异步函数,比如发了一个http请求
someAsyncFunction("hello", () => {
console.log(this)
})
}
}
obj.fn()
const arrowFnCb = () => {
console.log(this);
};
obj = {
fn: function () {
someAsyncFunction("hello", arrowFnCb);
},
};
obj.fn()
class Obj {
fn = () => {
console.log(this)
}
}
new Obj().fn()
class Obj {
constructor() {
this.fn()
}
fn = () => {
console.log(this)
}
}
new Obj()
class Obj {
constructor() {
this.fn1(this.fn)
}
fn = () => {
console.log(this)
}
fn1(fn) {
fn()
}
}
new Obj()
class Foo {}
class Obj {
constructor() {
this.fn1(this.fn)
return new Foo()
}
fn = () => {
console.log(this)
}
fn1(fn) {
fn()
}
}
const obj = new Obj()
obj.fn()
小结
一言以蔽之,箭头函数的this指向继承于定义时,父作用域的this。
所以如果不想死记硬背的话,最好能理解一下js里面词法作用域 (lexical scope) 的概念,后面有时间的话我也会出一篇相关文档去解释词法作用域。
以上例子大部分参考于此