JavaScript箭头函数_动力节点Java学院整理


Posted in Javascript onJune 28, 2017

ES6标准新增了一种新的函数:Arrow Function(箭头函数)。

为什么叫Arrow Function?因为它的定义用的就是一个箭头:

x => x * x

上面的箭头函数相当于:

function (x) {
 return x * x;
}

在继续学习箭头函数之前,请测试你的浏览器是否支持ES6的Arrow Function

箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }return

x => {
 if (x > 0) {
  return x * x;
 }
 else {
  return - x * x;
 }
}

如果参数不是一个,就需要用括号()括起来:

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
 var i, sum = x + y;
 for (i=0; i<rest.length; i++) {
  sum += rest[i];
 }
 return sum;
}

如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:

// SyntaxError:
x => { foo: x }

因为和函数体的{ ... }有语法冲突,所以要改为:

// ok:
x => ({ foo: x })

this

箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。

回顾前面的例子,由于JavaScript函数对this绑定的错误处理,下面的例子无法得到预期结果:

var obj = {
 birth: 1990,
 getAge: function () {
  var b = this.birth; // 1990
  var fn = function () {
   return new Date().getFullYear() - this.birth; // this指向window或undefined
  };
  return fn();
 }
};

现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj

var obj = {
 birth: 1990,
 getAge: function () {
  var b = this.birth; // 1990
  var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
  return fn();
 }
};
obj.getAge(); // 25

如果使用箭头函数,以前的那种hack写法:

var that = this;

就不再需要了。

由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:

var obj = {
 birth: 1990,
 getAge: function (year) {
  var b = this.birth; // 1990
  var fn = (y) => y - this.birth; // this.birth仍是1990
  return fn.call({birth:2000}, year);
 }
};
obj.getAge(2015); // 25

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
JavaScript之filter_动力节点Java学院整理
Jun 28 #Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 #Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 #Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 #Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 #jQuery
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 #Javascript
JavaScript中常见的八个陷阱总结
Jun 28 #Javascript
You might like
php实现水仙花数示例分享
2014/04/03 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
常用的jQuery前端技巧收集
2014/12/24 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
JavaScript WeakMap使用详解
2021/02/05 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
解决Python使用列表副本的问题
2019/12/19 Python
Pytorch 实现权重初始化
2019/12/31 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
市场营销专业个人求职信范文
2013/12/14 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
公务员培的训心得体会
2014/09/01 职场文书
大学生作弊检讨书
2014/09/11 职场文书
Python合并多张图片成PDF
2021/06/09 Python