箭头函数是ES6的新特性,作为解决传统函数this指向难以追溯的方案(或者说不想写function关键字),按照部分技术文章的说法箭头函数中this的指向是固定的,但这样说容易让人认为箭头函数中的this永远指向同一个对象,所以到底是不是如此呢?
MDN上对箭头函数的描述
箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this、arguments。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。
window.word = 'window'
const obj = {
fn: function() {
setTimeout(() => {
console.log(this.word)
})
},
word: 'obj'
}
obj.fn() //obj
const globalFn = obj.fn;
globalFn(); // window
const obj2 = {
word: 'obj2',
fn: obj.fn
}
obj2.fn(); //obj2
对于globalFn来说,此时调用方为window,globalFn的this指向window,而内部箭头函数继承了globalFn的this,所以也指向了window。
而obj2中,调用时fn的this指向obj2,内部箭头函数继承了fn的this对象,所以也指向了obj2,此时输出obj2。