本文详细解析ES6中箭头函数的语法结构，包括参数传递、单行与多行表达式的区别，以及剩余参数和默认参数的使用。重点探讨箭头函数与普通函数在this绑定上的核心差异，通过代码示例说明箭头函数如何保持定义时的this上下文，并指出其不支持new操作及call/apply无法改变指向的特性。
ES6箭头函数概述
本文通过具体实例深入讲解ES6标准中的箭头函数，旨在为读者提供清晰的参考与学习素材。
箭头函数语法
语法
首先，我们梳理箭头函数的基本语法格式。
([param] [, param]) => {
statements
}
param => expression
其中param代表函数参数，根据参数数量的不同，书写形式有所区分。
() => { … } // 零个参数用 () 表示；
x => { … } // 一个参数可以省略 ()；
(x, y) => { … } // 多参数不能省略 ()；
箭头函数代码示例
示例
接下来通过具体代码示例，展示如何将ES5的传统函数写法转换为ES6的箭头函数形式。
// ES5
var selected = allJobs.filter(function (job) {
return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());
同时，箭头函数也支持定义多个参数。
// ES5
var total = values.reduce(function (a, b) {
return a + b;
}, 0);
// ES6
var total = values.reduce((a, b) => a + b, 0);
此外，箭头符号=>后并非必须跟随return语句，具体写法如下所示。
// ES5
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
playTrumpet();
fireConfettiCannon();
});
需特别注意，若包含多条语句，必须使用大括号{}包裹；若是单行表达式，则无需大括号，且该表达式的值将自动作为函数的返回值。
x => { return x * x }; // 函数返回 x * x
x => x * x; // 同上一行
x => return x * x; // SyntaxError 报错，不能省略 {}
x => { x * x }; // 合法，没有定义返回值，返回 undefined
与普通函数类似，箭头函数同样支持使用剩余参数（rest parameters）和默认参数。
var func1 = (x = 1, y = 2) => x + y;
func1(); // 得到 3
var func2 = (x, ...args) => { console.log(args) };
func2(1,2,3); // 输出 [2, 3]
箭头函数核心特性
特性
在介绍完语法和示例后，我们需要深入思考：如果箭头函数仅仅为了简化命名，为何要改变原有的编程习惯？因此，了解其核心特性至关重要。
箭头函数内部不存在constructor方法，也没有prototype属性，因此不支持使用new关键字进行实例化。然而，它对this关键字的处理方式与普通函数截然不同：箭头函数的this始终指向函数定义时所处的上下文，而非执行时的上下文。通过以下示例加以理解：
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(function() {
this.func();
}, 100);
}
};
o.test(); // TypeError : this.func is not a function
上述代码会引发错误，因为普通函数中的this指向在调用时会变为全局对象（而非预期的对象o）。若对JavaScript中this的机制尚不熟悉，可参考《javascript中this的用法实例详解》一文。回到正题，我们需要对代码进行如下调整：
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
var _this = this;
setTimeout(function() {
_this.func();
}, 100);
}
};
o.test();
通过预先在外部保存this的引用即可解决该问题。这里正是利用箭头函数的优势所在，前文已提及，箭头函数的this始终绑定于定义时的上下文，而非执行时。因此，修改后的代码如下：
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(() => { this.func() }, 100);
}
};
o.test();
此时，this便正确指向了对象o。
还需注意一点：箭头函数中的this指向是固定的，无法通过call或apply方法改变其指向对象。
var x = 1,
o = {
x : 10,
test : () => this.x
};
o.test(); // 1
o.test.call(o); // 依然是1
希望本文的内容能对ECMAScript程序设计有所帮助。