this学习（五）箭头函数的this绑定

this词法

箭头函数：

箭头函数不是使用function关键字定义的，而是使用箭头：=> 的操作符定义的，如下：

function foo() {
    return () => {
        console.log("箭头函数")
    }
}

let bar = foo();
bar()    // 箭头函数

这里例子中，bar就是一个箭头函数。

箭头函数的this，它是继承外层作用域的this，在这个例子中bar的this是跟foo一样的。

function foo() {
    console.log(this);  // window
    return () => {
        console.log(this);  // window
    }
}

let bar = foo();
bar()

这个例子中，因为foo的调用位置是在全局，所以this指向了全局。那么箭头函数是继承了它外层的函数的this，所以它的this也是指向window。

箭头函数的this绑定无法被修改，new也不可以修改。

 

事实上有一种写法很常见：

function foo() {
    var self = this;
    setTimeout(function() {
        console.log(self.a)
    }, 1000)
}

var obj = {
    a: 2
}

foo.call(obj)   // 2

这个也是代替this的一个机制。

ES6中的箭头函数并不会使用4条绑定规则，而是根据词法作用域来决定this，具体来说，箭头函数是继承外层函数的this绑定。

 

本文内容学习于《你不知道的JavaScript》上卷