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高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
javascript实现动态时钟的启动和停止
Jul 29 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
VSCode搭建React Native环境
May 07 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之第七天
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
php页面缓存方法小结
2015/01/10 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
vue跨域解决方法
2017/10/15 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Python中int()函数的用法浅析
2017/10/17 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python如何对XML 解析
2020/06/28 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
2014年大学生自我评价
2014/01/19 职场文书
总会计师岗位职责
2014/02/19 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
网络管理员岗位职责
2014/03/17 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers
win7配置本地ftp服务器的图文教程
2022/08/05 Servers