2.5 this 词法

之前介绍的四条规则已经可以包含所有正常的函数。但是 ES6 中介绍了一种无法使用这些规则的特殊函数类型：箭头函数。

箭头函数并不是使用 function 关键字定义的，而是使用被称为“胖箭头”的 操作符 => 定义的。箭头函数不使用 this 的四种标准规则，而是根据外层（函数或者全局）作用域来决定 this。

箭头函数的词法作用域：

function foo(){
    // 返回一个箭头函数
    return (a) => {
        //this 继承自 foo()
        console.log(this.a)
    }
}

var obj1 = {
    a:2
}

var obj2 = {
    a:3
}

var bar = foo.call(obj1)
bar.call(obj2)
--------------------------------------------------
> 2

解析：foo() 内部创建的箭头函数会捕获调用时 foo() 的 this。由于 foo() 的 this 绑定到 obj1，bar(引用箭头函数)的 this 也会绑定到 obj1,箭头函数的绑定无法被修改(new 也不行)。

箭头函数最常用于回调函数中，例如事件处理器或者定时器：

function foo() {
    setTimeout(() => {
        //这里的 this 在此法上继承自 foo()
        console.log(this.a)
    }, 100)
}
var obj = {
    a: 2
}
foo.call(obj)
----------------------------------------------
> 2

解析：箭头函数可以像 bind(..) 一样确保函数的 this 被绑定到指定对象，此外，其重要性还提现在它用更常见的词法作用域取代了传统的 this 机制。实际上在 ES6 之前我们就已经在使用一种几乎和箭头函数完全一样的模式。

function foo() {
    var self = this //lexical capture of this
    setTimeout(() => {
        //这里的 this 在此法上继承自 foo()
        console.log(self.a)
    }, 100)
}

var obj = {
    a: 2
}

foo.call(obj)
---------------------------------------
> 2

虽然 self = this 和箭头函数看起来都可以取代 bind(..),但是从本质上来说，它们想替带的是 this 机制。

如果经常编写 this 风格的代码，但是绝大部分时候都会使用 self = this 或者箭头函数来否定 this 机制，或许应当：

1. 只使用词法作用域并完全抛弃错误 this 风格的代码；
2. 完全采用 this 风格，在必要时使用 bind(..),尽量避免使用 self = this 和 箭头函数。

当然，包含这两种代码风格的程序可以正常运行，但是在同一个函数或者同一个程序中混合使用这两种风格通常会使代码更难维护，并且可能会更难编写。