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 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
JavaScript Array扩展实现代码
Oct 14 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
浅析Ajax语法
Dec 05 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
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下几种删除目录的方法总结
2007/08/19 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
python -v 报错问题的解决方法
2020/09/15 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
阿拉伯书店:Jamalon
2019/07/24 全球购物
什么是网络协议
2016/04/07 面试题
yy婚礼司仪主持词
2014/03/14 职场文书
教师节活动主持词
2014/04/02 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
银行授权委托书样本
2014/10/13 职场文书
2015年安全生产责任书
2015/01/30 职场文书
2015年领班工作总结
2015/04/29 职场文书
圣诞晚会主持词
2015/07/01 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
5个实用的JavaScript新特性
2022/06/16 Javascript