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 多行文本框(textarea)高度变化
Jul 03 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
vue之数据交互实例代码
Jun 20 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
vue 解决provide和inject响应的问题
Nov 12 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Python下载网络小说实例代码
2018/02/03 Python
python实现树形打印目录结构
2018/03/29 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
军训自我鉴定范文
2014/02/13 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
关于环保的标语
2014/06/13 职场文书