位置: 编程技术 - 正文
ECMAScript6的新特性箭头函数（Arrow Function）详细介绍(ecmascript6入门)
编辑：rootadmin箭头函数是ECMAScript 6最受关注的更新内容之一。它引入了一种用「箭头」（=>）来定义函数的新语法，它…它碉堡了~。箭头函数与传统的JavaScript函数主要区别在于以下几点：1.对 this 的关联。函数内置 this 的值，取决于箭头函数在哪儿定义，而非箭头函数执行的上下文环境。2.new 不可用。箭头函数不能使用 new 关键字来实例化对象，不然会报错。3.this 不可变。函数内置 this 不可变，在函数体内整个执行环境中为常量。4.没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。这些差异的存在是有理可循的。首先，对this的绑定是JavaScript错误的常见来源之一。容易丢失函数内置数值，或得出意外结果。其次，将箭头函数限制为使用固定this引用，有利于JavaScript引擎优化处理。
一、语法
箭头函数的语法很简单，定义自变量，然后是箭头和函数主体。自变量和主题因使用不同可以采用更简洁的格式。下面这个例子就是采用传一个参数和返回一个值的箭头函数。
可以看出，传一个参数就直接写就好了，不用加小括号。箭头指向函数主体，不过函数主体也只是简单的一条返回语句，所以也不用加大括号。函数构造完毕赋给reflect加以引用。若需传入多个参数，则应加上小括号。例如：
sum()方法为两参数相加并回传结果。跟前一个例子的唯一区别是传入了两个参数，所以要用小括号括起来。它与传统函数一样，括号内由逗号将传入参数分开。同样，如果该函数不需要传入参数，那也要以空括号来代替。
若你想使用标准的函数体，或者函数体内可能有更多的语句要执行，则要用大括号将函数体括起来，并明确定义返回值。例如：
大括号内的部分基本等同于传统函数，除了arguments参数不可用外。因为大括号是函数主体的标志。而箭头函数若要返回自定义对象的话，就必须用小括号把该对象括起来先。例如：
上例可以看出，用小括号包含大括号则是对象的定义，而非函数主体。
二、使用
JavaScript最常见错误之一就是函数内部this关联。因为this是根据函数当前的执行环境去取值的，这样就会在调用时产生误解，以导致对其他的不相关对象产生了影响。参见下例：
在这段代码中，本意是想让PageHandler的init()方法用于构建交互作用，并在点击事件处理函数中调用this.doSomething()。但是代码并未按设计初衷来执行，运行时this指向了全局对象而不是PageHandler，从而造成this.doSomething()调用无效出现报错，因为全局对象中不存在doSomething方法。当然，可以在函数中使用bind()将this与PageHandler明确关联起来，见下：虽然看着有些怪，但现在代码执行是符合预期的。通过调用函数的bind(this)，又创建了一个已关联现有this的新函数返回，就是说为了达到目的额外又包了一层。因为箭头函数已经支持this关联，所以这里用箭头函数会更爽快些，看下例：
这个实例中的事件处理函数调用了this.doSomething()的箭头函数。this的取值即为init()内的this值。故而它等效于bind()。箭头函数简明扼要的特性，也使它成为其他函数自变量的理想选择。例如，若要在ES5上，使用定制比较器来排列数组，典型的代码见下：
上例用了许多语法来实现一个简单的操作。若使用箭头函数，则可写成很精炼的代码：
数组的sort/map/reduce等方法都支持回调函数。用箭头函数可以简化书写流程，解放你的双手去做你想做的事情。
三、补充
箭头函数的确与传统函数有不同之处，但仍存在共同的特点。例如：1.对箭头函数进行typeof操作会返回“function”。2.箭头函数仍是Function的实例，故而instanceof的执行方式与传统函数一致。3.call/apply/bind方法仍适用于箭头函数，但就算调用这些方法扩充当前作用域，this也依旧不会变化。箭头函数与传统函数最大的不同之处在，禁用new操作。
四、结论
箭头函数是ECMAScript 6一个备受关注的新特性，并且还在不断的优化着。用简短语法以定义函数或语句书写流程是大势所趋，他们必将?耪ㄌ欤?奕丝勺琛Ｋ?怨丶??his的关联让开发者不再神烦，并通过JavaScript引擎优化，帮助其提高表现。说到这里，小伙伴们的大刀已经饥渴难耐了吧，若想试用箭头函数，打开最新版本的Firefox即可。
推荐整理分享ECMAScript6的新特性箭头函数（Arrow Function）详细介绍(ecmascript6入门)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:ecmascript6教程,ecmascript6教程,ecmascript 6中文文档,ecmascript 6,ecmascript6教程,ecmascript6新特性,ecmascript6简介,ecmascript新特性,内容如对您有帮助，希望把文章链接给更多的朋友！
javascript浏览器兼容教程之事件处理 1.window.event【分析说明】先看一段代码functionet(){alert(event);//IE:[object]}以上代码在IE运行的结果是[object]，而在Firefox无法运行。因为在IE中event作为window对
深入理解javascript中的立即执行函数(function(){…})() javascript和其他编程语言相比比较随意，所以javascript代码中充满各种奇葩的写法，有时雾里看花，当然，能理解各型各色的写法也是对javascript语言特性
javascript setinterval 的正确语法如何书写 前几天我用setinterval写了一个小程序，这个setinterval是用来干什么的我就不解释了。写的方法在其它的浏览器里都能用，后来测试组的同事拿去一测就出
标签: ecmascript6入门
本文链接地址:https://www.jiuchutong.com/biancheng/370158.html 转载请保留说明！上一篇：js中的caller和callee属性介绍和例子(js call.call)
下一篇：javascript浏览器兼容教程之事件处理(JavaScript浏览器扩展)
