箭头函数

特性：

1.

单个参数时可省略()，箭头函数函数体只有单条语句返回时，可省略{}和return

var f = v => v;
// 等同于
var f = function(v) {
    return v;
}

var f = () => 5;
// 等同于
var f = function() {
    return 5;
}

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
    return num1 + num2;
}

/* 返回值类型为object，需要使用{}包裹 */
var getTempItem = id => ({id: id, name: 'Temp'});

 

2.

参数为对象时，可省略对象名

const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
    return person.first + ' ' + person.last;
}

 

3.

在传统的js中，方法可以作为一个函数存储为对象的一个属性。当调用方法时，this 指向该方法的从属对象。

 

但是当用箭头函数时，

var calculate = {
    array: [1, 2, 3],
    sum: () => {
        console.log(this === window); // true
        return this.array.reduce((result, item) => result + item);
    }
}; 
calculate.sum(); // Throws "TypeError: Cannot read property 'reduce' of undefined"

calculate.sum() 方法是通过箭头函数定义的。调用它时 calculate.sum() 的时候抛出了TypeError 异常，原因是this指向的全局windows， this.array的值是 undefined。

 

解决方案是使用函数表达式或者方法定义的短语法（ECMAScript6可用）。在这种情况下 this 决定于调用的对象，而不是紧邻上下文。

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

因为 sum 是一个普通函数，调用 calculate.sum() 时 this 指向 calculate 对象。 this.array 是数组的引用，因此元素之和计算正确

 

4.

相同的规则也适用于在 prototype 对象上定义方法。

 用箭头函数来定义 sayCatName 方法，会带来一个不正确的上下文 window：

function MyCat(name) {
    this.catName = name;
}

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

var cat = new MyCat('Mew');
cat.sayCatName(); // undefined

使用函数表达式就OK，

function MyCat(name) {
    this.catName = name;
}

MyCat.prototype.sayCatName = function() {
    console.log(this === cat); // true
    return this.catName;
};

var cat = new MyCat('Mew');
cat.sayCatName(); // 'Mew'

sayCatName 普通函数被当做方法调用的时候 cat.sayCatName() 会把上下文改变为 cat 对象。

 

所以在DOM元素装配监听器时，你应该使用函数表达式，而不是箭头函数去回调。

 

 5.

this 在一个构造调用过程中是一个新创建的对象。 当执行 new MyFunction()，该构造器的上下文 MyFunction 是一个新的对象： this instanceof MyFunction === true.

注意一个箭头函数不能作为构造器。 JavaScript 会通过抛出异常的方式进行隐式地预防。

 

6.

毫无疑问，箭头函数是一个非常好的特性增强。使用正确的话，它会在很多地方带来方便，比如早期的时候，你不得不使用 .bind() 或者 试图去捕获上下文。当然，它也让代码变得更加轻便。

在某些情况下，优势也会带来劣势。当要求动态上下文的时候，你就不能使用箭头函数，比如：定义方法，用构造器创建对象，处理时间时用 this 获取目标。