浅谈ES6箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）

箭头函数相当于匿名函数，且简化了函数定义。

 

1、箭头函数有两种格式：

①　只包含一个表达式，{ ... }和return都省略掉。

i => i * i

②　可以包含多条语句，不能省略{ ... }和return。 

x => {
    if (x > 0) 
        return x * x;
    else 
        return - x * x;
}

2、箭头函数的参数个数：

①　无参数：用括号()

() => 3.14

②　1个参数：

i => i * i

相当于：

function (i) {
    return i * i;
}

③　至少2个参数：用括号()括起来

(a, b) => a + b

相当于：

function (a, b) {
    return a + b;
}

④　可变参数：

(x, y, ..., arr) => {
    var i, sum = x + y;
    for (i = 0; i < arr.length; i++)
        sum += arr[i];
    return sum;
}

注意：

如果要返回一个对象，如果是单表达式，这么写会报错：x => { name: “Alice” }

因为和函数体的{ ... }有语法冲突，改为：x => ({ name: “Alice” })

 

3、this

虽然箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。也就是说，this对象是定义时所在的对象，而不是运行时所在的对象。箭头函数没有自己的this值，箭头函数内的this值继承自外围作用域。

①　一个内部函数不能直接从外部函数访问到this：

var object = {  
    name: "My object",  
    getName: function() {  
       	var func = function() {  
            return this.name;  // this指向window或undefined
        };  
		return func();
    }  
};  
alert(object.getName()); // 输出：undefined

除了可以通过将this对象存储在另一个变量（如that）中来解决这个问题，还可以使用箭头函数：

var object = {  
    name: "My object",  
    getName: function() {  
        var func = () => {  
            return this.name;  // this指向object
        };  
		return func();
    }  
};  
alert(object.getName()); // 输出：My object

②　由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略。

var object = {  
    name: "My object",  
    getName: function() {  
        var func = () => {  
            return this.name;  // this指向object
        };  
		return func.call({name: "Bruce"});
    }  
};  
alert(object.getName()); // 输出：My object