JavaScript的箭头函数(arrow function)

@wanqiuz 2018-04-25 04:52:16发表于 wanqiuz/blog-articles JavaScript箭头函数

箭头函数表达式的语法比函数表达式更短,并且不绑定自己的this,arguments,caller,super, new.target,也就不能用 call()、apply()、bind() 去改变 this 的指向。不能用于对象字面量方法、对象原型方法、回调函数、构造函数。箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下。例如:用在 map、reduce、filter 的回调函数定义中。

1 不能用于定义对象方法

JS 中对象方法的定义方式是在对象上定义一个指向函数的属性,当方法被调用的时候,方法内的 this 就会指向方法所属的对象。

1.1 定义字面量方法

因为箭头函数的语法很简洁,可能不少同学会忍不住用它来定义字面量方法,比如下面的例子 JS Bin:

const calculator = {
    array: [1, 2, 3],
    sum: () => {
        console.log(this === window); // => true
        return this.array.reduce((result, item) => result + item);
    }
};

console.log(this === window); // => true
calculator.sum(); // Throws "TypeError: Cannot read property 'reduce' of undefined"

calculator.sum 使用箭头函数来定义,但是调用的时候会抛出 TypeError,因为运行时 this.array 是未定义的,调用 calculator.sum 的时候,执行上下文里面的 this 仍然指向的是 window,原因是箭头函数把函数上下文绑定到了 window 上,this.array 等价于 window.array,显然后者是未定义的。

解决的办法是,使用函数表达式(function expression)或者方法简写(shorthand method)(ES6 中已经支持)来定义方法,这样能确保 this 是在运行时是由包含它的上下文决定的,修正后的代码如下 JS Bin:

const calculator = {
    array: [1, 2, 3],
    sum() {
        console.log(this === calculator); // => true
        return this.array.reduce((result, item) => result + item);
    }
};
calculator.sum(); // => 6

这样 calculator.sum 就变成了普通函数,执行时 this 就指向 calculator 对象,自然能得到正确的计算结果。

1.2 定义原型方法

同样的规则适用于原型方法(prototype method)的定义,使用箭头函数会导致运行时的执行上下文错误,比如下面的例子 JS Bin:

function Cat(name) {
    this.name = name;
}

Cat.prototype.sayCatName = () => {
    console.log(this === window); // => true
    return this.name;
};

const cat = new Cat('Mew');
cat.sayCatName(); // => undefined

使用传统的函数表达式就能解决问题 JS Bin:

function Cat(name) {
    this.name = name;
}

Cat.prototype.sayCatName = function () {
    console.log(this === cat); // => true
    return this.name;
};

const cat = new Cat('Mew');
cat.sayCatName(); // => 'Mew'

sayCatName 变成普通函数之后,被调用时的执行上下文就会指向新创建的 cat 实例。

2 不能用于定义事件回调函数

this 是 JS 中很强大的特性,可以通过多种方式改变函数执行上下文,JS 内部也有几种不同的默认上下文指向,但普适的规则是在谁上面调用函数 this 就指向谁,这样代码理解起来也很自然,读起来就像在说,某个对象上正在发生某件事情。
但是,箭头函数在声明的时候就绑定了执行上下文,要动态改变上下文是不可能的,在需要动态上下文的时候它的弊端就凸显出来。比如在客户端编程中常见的 DOM 事件回调函数(event listenner)绑定,触发回调函数时 this 指向当前发生事件的 DOM 节点,而动态上下文这个时候就非常有用,比如下面这段代码试图使用箭头函数来作事件回调函数 JS Bin:

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    console.log(this === window); // => true
    this.innerHTML = 'Clicked button';
});

在全局上下文下定义的箭头函数执行时 this 会指向 window,当单击事件发生时,浏览器会尝试用 button 作为上下文来执行事件回调函数,但是箭头函数预定义的上下文是不能被修改的,这样 this.innerHTML 就等价于 window.innerHTML,而后者是没有任何意义的。

使用函数表达式就可以在运行时动态的改变 this,修正后的代码 JS Bin:

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log(this === button); // => true
    this.innerHTML = 'Clicked button';
});

当用户单击按钮时,事件回调函数中的 this 实际指向 button,这样的 this.innerHTML = 'Clicked button' 就能按照预期修改按钮中的文字。

3 不能用于定义构造函数

构造函数中的 this 指向新创建的对象,当执行 new Car() 的时候,构造函数 Car 的上下文就是新创建的对象,也就是说 this instanceof Car === true。显然,箭头函数是不能用来做构造函数, 实际上 JS 会禁止你这么做,如果你这么做了,它就会抛出异常。
换句话说,箭头构造函数的执行并没有任何意义,并且是有歧义的。比如,当我们运行下面的代码 JS Bin:

const Message = (text) => {
    this.text = text;
};
const helloMessage = new Message('Hello World!'); // Throws "TypeError: Message is not a constructor"

构造新的 Message 实例时,JS 引擎抛了错误,因为 Message 不是构造函数。在笔者看来,相比旧的 JS 引擎在出错时悄悄失败的设计,ES6 在出错时给出具体错误消息是非常不错的实践。可以通过使用函数表达式或者函数声明 来声明构造函数修复上面的例子 JS Bin:

const Message = function(text) {
    this.text = text;
};
const helloMessage = new Message('Hello World!');
console.log(helloMessage.text); // => 'Hello World!'

参考并感谢: