箭头函数中的this

2020-04-01  本文已影响0人  sc8816

箭头函数是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。

上一篇下一篇

猜你喜欢

热点阅读