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 相关文章推荐
JS 判断代码全收集
Apr 28 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 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/03/20 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python判断变量是否已经定义的方法
2014/08/18 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python交易记录链的实现过程详解
2019/07/03 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
空字符串(“”)和null的区别
2012/11/13 面试题
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
历史专业毕业生的自我鉴定
2013/11/15 职场文书
安全生产汇报材料
2014/02/17 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
检讨书大全
2015/01/27 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS