JavaScript学习之ES6 ES2015学记笔记（六）-箭头函数（Arrow Function）-CFANZ编程社区

本节学习使用ES6中的新功能，箭头函数，在Java，C#中已经运用广泛。

虽然在JavaScript诞生之初就存在箭头函数，

在 HTML 中-->之前的字符是注释的一部分，而在 JS 中-->之后的部分才是注释

函数表达式无处不在

lambda表达式

// 六种语言中的简单函数示例
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java

新的函数语法

//ES5 
var es5function = es5.method(function(key){ return key.isSelected();});

//ES6
var es6function = es6.method(key=>key.isSelected();)

语法格式：标志符=>表达式，接受一个或者多个参数时，需要用小括号包裹数据：

// ES5
var total = values.reduce(function (a, b) {
    return a + b;
}, 0);
// ES6
var total = values.reduce((a, b) => a + b, 0);

同样箭头函数支持块级作用域，但是它不会自动返回值，需要使用return返回所需要值。

当需要用箭头函数生成普通对象，需要将其包裹在（）里面。

// 为与你玩耍的每一个小狗创建一个新的空对象
var chewToys = puppies.map(puppy => {}); // 这样写会报 Bug！
var chewToys = puppies.map(puppy => ({})); //

紧随箭头的{被解析为块的开始，而不是对象的开始。因此， puppy => {}这段代码就被解析为没有任何行为并返回 undefined 的箭头函数，因此需要小括号包括起来。

函数的This指的是什么

普通function和箭头函数有个重大区别：箭头函数没有他自己的this值，箭头函数内的this继承自外作用域，

ES6中通过 object.method()语法调用的方法使用非箭头函数定义，这些函数需要从调用者的作用域中获取一个有意义的 this 值。

//ES5
{
...
addAll: function addAll(pieces) {
        var self = this;  //临时变量 self用来将外部的 this 值导入内部函数
        _.each(pieces, function (piece) {
        self.add(piece);
    });
},
...
}

//ES6
{
   ...
    addAll: function addAll(pieces) {
    _.each(pieces, piece => this.add(piece));
},
    ...
}

//ES6简化
{
...
    addAll(pieces) {
    _.each(pieces, piece => this.add(piece));
},
...}