ECMAScript6的新特性箭头函数(Arrow Function)详细介绍


Posted in Javascript onJune 07, 2014

箭头函数是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);
    }
};

虽然看着有些怪,但现在代码执行是符合预期的。通过调用函数的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一个备受关注的新特性,并且还在不断的优化着。用简短语法以定义函数或语句书写流程是大势所趋,他们必将?耪ㄌ欤?奕丝勺琛K?怨丶??his的关联让开发者不再神烦,并通过JavaScript引擎优化,帮助其提高表现。说到这里,小伙伴们的大刀已经饥渴难耐了吧,若想试用箭头函数,打开最新版本的Firefox即可。

Javascript 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
js实现简单选项卡功能
Mar 23 Javascript
js实现全选和全不选功能
Jul 28 Javascript
js中的caller和callee属性介绍和例子
Jun 07 #Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 #Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 #Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 #Javascript
jQuery的缓存机制浅析
Jun 07 #Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 #Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 #Javascript
You might like
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
node实现的爬虫功能示例
2018/05/04 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
详解python做UI界面的方法
2019/02/27 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python 支持向量机分类器的实现
2020/01/15 Python
python列表返回重复数据的下标
2020/02/10 Python
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
导游词之西安骊山
2019/12/03 职场文书
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript