箭头函数是ECMAScript 6最受关注的更新内容之一。它引入了一种用「箭头」(=>)来定义函数的新语法,它…它碉堡了~。箭头函数与传统的JavaScript函数主要区别在于以下几点:
1.对 this 的关联。函数内置 this 的值,取决于箭头函数在哪儿定义,而非箭头函数执行的上下文环境。
2.new 不可用。箭头函数不能使用 new 关键字来实例化对象,不然会报错。
3.this 不可变。函数内置 this 不可变,在函数体内整个执行环境中为常量。
4.没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。
这些差异的存在是有理可循的。首先,对this的绑定是JavaScript错误的常见来源之一。容易丢失函数内置数值,或得出意外结果。其次,将箭头函数限制为使用固定this引用,有利于JavaScript引擎优化处理。
一、语法
箭头函数的语法很简单,定义自变量,然后是箭头和函数主体。自变量和主题因使用不同可以采用更简洁的格式。下面这个例子就是采用传一个参数和返回一个值的箭头函数。
var reflect = value => value; // 等同于: var reflect = function(value) { return value; };
可以看出,传一个参数就直接写就好了,不用加小括号。箭头指向函数主体,不过函数主体也只是简单的一条返回语句,所以也不用加大括号。函数构造完毕赋给reflect加以引用。
若需传入多个参数,则应加上小括号。例如:
var sum = (num1, num2) => num1 + num2; // 等同于: var sum = function(num1, num2) { return num1 + num2; };
sum()方法为两参数相加并回传结果。跟前一个例子的唯一区别是传入了两个参数,所以要用小括号括起来。它与传统函数一样,括号内由逗号将传入参数分开。同样,如果该函数不需要传入参数,那也要以空括号来代替。
var sum = () => 1 + 2; // 等同于: var sum = function() { return 1 + 2; };
若你想使用标准的函数体,或者函数体内可能有更多的语句要执行,则要用大括号将函数体括起来,并明确定义返回值。例如:
var sum = (num1, num2) => { return num1 + num2; } //等同于: var sum = function(num1, num2) { return num1 + num2; };
大括号内的部分基本等同于传统函数,除了arguments参数不可用外。
因为大括号是函数主体的标志。而箭头函数若要返回自定义对象的话,就必须用小括号把该对象括起来先。例如:
var getTempItem = id = > ({ id: id, name: "Temp" }); // 等同于: var getTempItem = function(id) { return { id: id, name: "Temp" }; };
上例可以看出,用小括号包含大括号则是对象的定义,而非函数主体。
二、使用
JavaScript最常见错误之一就是函数内部this关联。因为this是根据函数当前的执行环境去取值的,这样就会在调用时产生误解,以导致对其他的不相关对象产生了影响。参见下例:
var PageHandler = { id: "123456", init: function() { document.addEventListener("click", function(event) { this.doSomething(event.type); // error }, false); }, doSomething: function(type) { console.log("Handling " + type + " for " + this.id); } };
在这段代码中,本意是想让PageHandler的init()方法用于构建交互作用,并在点击事件处理函数中调用this.doSomething()。但是代码并未按设计初衷来执行,运行时this指向了全局对象而不是PageHandler,从而造成this.doSomething()调用无效出现报错,因为全局对象中不存在doSomething方法。
当然,可以在函数中使用bind()将this与PageHandler明确关联起来,见下:
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); } };
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即可。
本文向大家介绍ES6箭头函数的特性?相关面试题,主要包含被问及ES6箭头函数的特性?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: ES6 增加了箭头函数,基本语法为 let func = value => value; 相当于 let func = function (value) { return value; }; 箭头函数与普通函数的区别在于: 1、箭头函数没有this,所以需要通
本文向大家介绍简述ECMASCRIPT6的新特性相关面试题,主要包含被问及简述ECMASCRIPT6的新特性时的应答技巧和注意事项,需要的朋友参考一下 增加块作用域 增加let const 解构赋值 函数参数扩展 (函数参数可以使用默认值、不定参数以及拓展参数) 增加class类的支持 增加箭头函数 增加模块和模块加载(ES6中开始支持原生模块化啦) math, number, string, a
通过和,我们将获得两种非常相似的在ES6中编写函数的方法。在其他语言中,lambda函数通常以匿名的方式区别于其他语言,但在ECMAScript中,任何函数都可以是匿名的。这两种类型都有独特的使用域(即当需要显式绑定或显式不绑定时)。在这两个领域之间,有很多情况下,任何一种表示法都可以。 ES6中的箭头函数至少有两个限制: null null
本文向大家介绍深入浅出ES6新特性之函数默认参数和箭头函数,包括了深入浅出ES6新特性之函数默认参数和箭头函数的使用技巧和注意事项,需要的朋友参考一下 1、函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值。 那怎么解决呢?对于上图的代码,可以
不鼓励将箭头函数(“lambdas”)传递给 Mocha。Lambdas词法绑定 this,无法访问 Mocha 上下文。例如,以下代码将失败: describe('my suite', () => { it('my test', () => { // should set the timeout of this test to 1000 ms; instead will fail thi
ES6标准新增了一种新的函数:Arrow Function(箭头函数)。 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 在继续学习箭头函数之前,请测试你的浏览器是否支持ES6的Arrow Function: 'use strict'; ---- var f