深入理解JavaScript 箭头函数


Posted in Javascript onMay 30, 2019

JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法。通常,在JavaScript中,可以通过两种方式创建函数:

  • 函数语句。
  • 函数表达式。

可以如下所示创建函数语句:

function add(num1, num2) {
var res = num1 + num2;
return res;
}
var sum = add(7, 2);
console.log(sum);

也可以创建相同功能的函数表达式,如下所示:

var add = function (num1, num2) {
var res = num1 + num2;
return res;
}
var sum = add(7, 2);
console.log(sum);

ECMA 2015(或ECMA Script 6)引入了更短的语法来编写函数表达式,称为箭头函数。使用箭头函数,你可以将上面的函数表达式编写为:

var add = (num1, num2) => { return num1 + num2; };

正如你所看到的,使用箭头函数编写的函数表达式更短。

箭头函数的基本语法规则

首先,参数应该在小括号中传递。你可以创建有两个参数的箭头函数,如下所示:

ar add = (num1, num2) => { return num1 + num2; };

如果只要传递一个参数,那么括号是可选的,可以选择忽略。你可以创建一个参数的箭头函数,如下所示:

var add = num => { return num * 10; };

如果没有参数,那么你必须要有一个空括号——不能没有。所以对于没有参数的函数,箭头函数是这样写的:

var add = () => { console.log("hey foo") };

如果函数中有单个表达式或语句:

  • 在主体中使用括号是可选的。
  • 使用return语句是可选的。

你可以重写add函数,而不使用函数体中的括号和return语句,如下所示:

var add = (num1, num2) => num1 + num2;

你也可以使用控制台语句编写不带参数的函数,如下所示:

var add = () => console.log("hey");

返回对象字面量

JavaScript箭头函数也可以返回对象字面量。唯一的要求是你需要把返回对象装入小括号中,如下所示:

var foo = (name, age) => ({
name: name,
age: age
})
var r = foo("my cat", 22);
console.log(r);

正如你所看到的那样,要返回的对象被放在了小括号内。如果你不这样做,那么JavaScript将无法区分对象字面量和函数体。

箭头函数支持rest参数

JavaScript箭头函数支持另一个ES6功能:rest参数。你可以在箭头函数中使用rest参数,如下面的代码所示:

var add = (num1, num2, ...restparam) => {
console.log(restparam.length);
var result = num1 + num2;
return result;
}
var r = add(67, 8, 90, 23);
console.log(r);

在这个例子中,当你使用带有rest参数的箭头函数时,输出会是2和75,因为传递的额外参数的数量是2,num1和num2的总和是75。

箭头功能支持默认参数

另外,JavaScript箭头函数还支持另一个ES6功能:默认参数。此处详细介绍了默认参数。你可以在箭头函数中使用默认参数,如下所示:

var add = (num1 = 9, num2 = 8) => {
var result = num1 + num2;
return result;
}
var r = add();
console.log(r);

在上面的代码中,箭头函数中有默认参数。调用该函数时,我们没有传递任何值,并且由于默认参数的存在,输出将是17。

“this”在箭头函数中如何工作?

箭头函数没有它自己的this值。箭头函数中的this值总是从封闭范围继承。在JavaScript中,每个函数都有它自己的this值,这取决于代码是如何调用函数的。请仔细看下面列出的代码:

var Cat = {
name: 'mew',
canRun: function () {
console.log(this)
var foo = () => { console.log(this) }
foo();
}
};

在这里,cat是一个对象字面量,它包括:

  • 属性名称。
  • 方法canRun。

在canRun方法中,我们创建了一个箭头函数foo,给出了this值。由于箭头函数没有它自己的this值,所以它将从周围的函数获取,因此,你将得到:

深入理解JavaScript 箭头函数

正如你所看到的,this值在canRun方法和箭头函数foo中是相同的。箭头函数从继承范围得到this值。如果你对此不甚清楚,那么请牢记以下两条规则:

  • 使用object.method在方法中获取一个有意义的对象作为this值。
  • 对于任何其他要求,使用箭头函数,由于函数没有自己的this值,所以它将继承封闭范围的this值。

使用箭头函数的限制条件

应用箭头函数时要注意的一些限制条件:

  • 箭头函数没有参数对象。
  • 箭头函数不能与新运算符一起使用,因此它不能用作构造函数。
  • 箭头函数没有原型属性。

如果你尝试使用箭头函数作为构造函数,那么你会得到异常。请看下面的代码:

var foo = (name, age) => { name = name, age = age };
var f1 = new foo("cat", 6);

代码试图通过使用箭头函数foo作为构造函数来创建对象f1,JavaScript将抛出以下异常:

深入理解JavaScript 箭头函数

而且,当你试图输出箭头函数的原型值时,你会得到undefined的输出:

var foo = (name, age) => { name = name, age = age };
console.log(foo.prototype);

发生这种情况的原因是因为箭头函数没有原型属性。请记住:虽然箭头函数为你提供了编写函数表达式的简短方法,但它没有自己的this值,也不能用作构造函数。

英文原文:Easy JavaScript Part 6 : Arrow functions in JavaScript

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

Javascript 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
socket在egg中的使用实例代码详解
May 30 #Javascript
深入了解JavaScript 私有化
May 30 #Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
Vue CL3 配置路径别名详解
May 30 #Javascript
Vue CLI3中使用compass normalize的方法
May 30 #Javascript
通过实践编写优雅的JavaScript代码
May 30 #Javascript
AngularJs中$cookies简单用法分析
May 30 #Javascript
You might like
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
Python数据处理numpy.median的实例讲解
2018/04/02 Python
python区块及区块链的开发详解
2019/07/03 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
实习自我鉴定
2013/12/15 职场文书
毕业生自荐书
2013/12/18 职场文书
公司会议开幕词
2015/01/29 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
变长双向rnn的正确使用姿势教学
2021/05/31 Python
优化Mysql查询的示例
2022/04/26 MySQL