var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click", (function(event) {
this.doSomething(event.type);
}).bind(this), false);
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};
虽然看着有些怪，但现在代码执行是符合预期的。通过调用函数的bind(this)，又创建了一个已关联现有this的新函数返回，就是说为了达到目的额外又包了一层。
因为箭头函数已经支持this关联，所以这里用箭头函数会更爽快些，看下例：
复制代码 代码如下:
var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click",
event = > this.doSomething(event.type), false);
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};
这个实例中的事件处理函数调用了this.doSomething()的箭头函数。this的取值即为init()内的this值。故而它等效于bind()。
箭头函数简明扼要的特性，也使它成为其他函数自变量的理想选择。例如，若要在ES5上，使用定制比较器来排列数组，典型的代码见下：
复制代码 代码如下:
var result = values.sort(function(a, b) {
return a - b;
});
上例用了许多语法来实现一个简单的操作。若使用箭头函数，则可写成很精炼的代码：
复制代码 代码如下:
var result = values.sort((a, b) => a - b);
数组的sort/map/reduce等方法都支持回调函数。用箭头函数可以简化书写流程，解放你的双手去做你想做的事情。
三、补充
箭头函数的确与传统函数有不同之处，但仍存在共同的特点。例如：
1.对箭头函数进行typeof操作会返回“function”。
2.箭头函数仍是Function的实例，故而instanceof的执行方式与传统函数一致。
3.call/apply/bind方法仍适用于箭头函数，但就算调用这些方法扩充当前作用域，this也依旧不会变化。
箭头函数与传统函数最大的不同之处在，禁用new操作。
四、结论
箭头函数是ECMAScript 6一个备受关注的新特性，并且还在不断的优化着。用简短语法以定义函数或语句书写流程是大势所趋，他们必将屌炸天，无人可阻。它对关键字this的关联让开发者不再神烦，并通过JavaScript引擎优化，帮助其提高表现。说到这里，小伙伴们的大刀已经饥渴难耐了吧，若想试用箭头函数，打开最新版本的Firefox即可。
您可能感兴趣的文章: