ES6 常用特性(二)

箭头函数

箭头函数无疑是 ES6 中一个相当重要的新特性。

特性

1、共享父级 this 对象
2、共享父级 arguments
3、不能当做构造函数

语法

最简表达式
var arr = [1, 2, 3, 4, 5, 6];
// Before
arr.filter(function(v) {
    return v > 3;
});
// After
arr.filter(v => v > 3); // => [4, 5, 6]
//前后对比很容易理解，可以明显看出箭头函数极大地减少了代码量。

完整语法

var arr = [1, 2, 3, 4, 5, 6];

arr.map((v, k, thisArr) => {
    return thisArr.reverse()[k] * v;
})  // => [6, 10, 12, 12, 10, 6]
　　一个简单的首尾相乘的算法，对比最简表达式我们可以发现，函数的前边都省略了 function 关键字，但是多个入参时需用括号包裹入参，单个入参是时可省略括号，入参写法保持一致。后面使用胖箭头 => 连接函数名与函数体，函数体的写法保持不变。

函数上下文 this

// Before
var obj = {
    arr: [1, 2, 3, 4, 5, 6],
    getMaxPow2: function() {
        var that = this,
            getMax = function() {
                return Math.max.apply({}, that.arr);
            };
        
        return Math.pow(getMax(), 2);
    }
}
// After
var obj = {
    arr: [1, 2, 3, 4, 5, 6],
    getMaxPow2: function() {
        var getMax = () => {
            return Math.max.apply({}, this.arr);
        }

        return Math.pow(getMax(), 2);
    }
}

注意看中第 5 行 var that = this 这里声明的一个临时变量 that。在对象或者原型链中，我们以前经常会写这样一个临时变量，或 that 或 _this，诸如此类，以达到在一个函数内部访问到父级或者祖先级 this 对象的目的。

如今在箭头函数中，函数体内部没有自己的 this，默认在其内部调用 this 的时候，会自动查找其父级上下文的 this 对象（如果父级同样是箭头函数，则会按照作用域链继续向上查找），这无疑方便了许多，我们无需在多余地声明一个临时变量来做这件事了。

注意：某些情况下我们可能需要函数有自己的 this，例如 DOM 事件绑定时事件回调函数中，我们往往需要使用 this 来操作当前的 DOM，这时候就需要使用传统匿名函数而非箭头函数。
在严格模式下，如果箭头函数的上层函数均为箭头函数，那么 this 对象将不可用。
另，由于箭头函数没有自己的 this 对象，所以箭头函数不能当做构造函数。
父级函数 arguments

我们知道在函数体中有 arguments 这样一个伪数组对象，该对象中包含该函数所有的入参（显示入参 + 隐式入参），当函数体中有另外一个函数，并且该函数为箭头函数时，该箭头函数的函数体中可以直接访问父级函数的 arguments 对象。

function getSum() {
    var example = () => {
        return Array
            .prototype
            .reduce
            .call(arguments, (pre, cur) => pre + cur);
    }

    return example();
}
getSum(1, 2, 3); // => 6

由于箭头函数本身没有 arguments 对象，所以如果他的上层函数都是箭头函数的话，那么 arguments 对象将不可用。

当箭头函数入参只有一个时可以省略入参括号；
当入参多余一个或没有入参时必须写括号；
当函数体只有一个 return 语句时可以省略函数体的花括号与 return 关键字。