ES6学习笔记之箭头函数

本文同步自我得博客：http://www.joeray61.com

JS中的箭头

箭头在JS里并不算是个新鲜的玩意儿，一直以来，JS都支持-->这样的箭头。

很早的时候有些浏览器还不支持JS，当时的人们为了兼容这些浏览器，须要这样写JS:

<script language="javascript">
<!--
    alert('Joe');
// -->
</script>

这段代码在不支持JS的浏览器里会被解读成2个未知标签和一段html注释。在支持JS的浏览器里，JS引擎会把<!--和-->当作是单行注释的开始。须要说明的是，-->仅仅是在一行的开头才能表示这一行是注释，其他状况-->是一个操做符，表示goes to的含义。

function countdown(n) {
    while (n --> 0) {
        alert(n);
    }
}

这段代码确实可以正常运行哦。当你给countdown函数传入一个大于0的参数时，这个循环可以一直运行，直到n变为0为止。

此箭头非彼箭头，以上讲述的-->并非咱们今天要讲的主角，你们权当拓展下JS知识，下面让咱们进入正题。

特性介绍

箭头函数是ES6新增的特性之一，它为JS这门语言提供了一种全新的书写函数的语法。

// ES5
var double = nums.map(function (v) {
    return 2 * n;
});

// ES6
var double = nums.map(v => 2 * n);

箭头函数简化了原先的函数语法，不须要再写function，若是函数体只有一行代码的话连return都不用写，这个特性对于热衷于简化流程和工做的程序员来讲至关对胃口。

使用箭头函数有几个注意点：

函数体

箭头函数支持两种模式的函数体写法，咱们姑且叫他简洁函数体和块级函数体。

// 简洁函数体
var fn = x => x * x;

// 块级函数体
var fn = (x, y) => {return x + y;};

简介函数体默认会把表达式的结果返回，块级函数体须要手动return。若是想要返回一个对象又想使用简洁函数体的话，须要这么写：

var fn = () => ({});
fn();   // {}

若是写成var fn = () => {};，那么执行fn()只能返回undefined。

this

用function生成的函数会定义一个本身的this，而箭头函数没有本身的this，而是会和上一层的做用域共享this。

function Person() {
    this.age = 0;
    var self = this;
    setTimeout(function () {
        self.age++;
        console.log(self.age);
    }, 1000);
}
var p = new Person();

这段代码里，setTimeout的参数function中须要操做外层的age属性，必需要把this赋值给self，而后经过self来获取到age

若是使用箭头函数则省事不少，代码以下：

function Person() {
    this.age = 0;
    setTimeout(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}
var p = new Person();

apply & call

因为箭头函数已经绑定了this的值，即便使用apply或者call也不能只能起到传参数的做用，并不能强行改变箭头函数里的this。

var adder = {
    x: 1,
    add1: function (y) {
        var fn = v => v + this.x;
        return fn(y);
    },
    add2: function (y) {
        var fn = v => v + this.x;
        var whatever = {
            x: 2
        };
        return fn.call(whatever, y);
    }
};

adder.add1(1);    // 2
adder.add2(1);    // 仍然是2

arguments

普通函数里arguments表明了调用时传入的参数，可是箭头函数否则，在箭头函数中没法使用arguments

固然，ES6中也有办法可让箭头函数像普通函数同样使用相似于arguments这样的类数组对象

var fn = (...rest) => rest[0];
fn(2);    // 2

...rest也是ES6的一个新特性，以后会介绍。

不能被new

箭头函数不能与new关键字一块儿使用，会报错

var Fn = () => {
    this.a = 1;
};
var f = new Fn();    // Error

使用场景

在我看来，箭头函数几乎能够彻底取代function，除非是函数须要进行递归或者须要可变的this对象，其余场景我认为均可以使用箭头函数。

参考资料

• ES6 In Depth: Arrow functions

• Arrow functions