深入理解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 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
(仅IE下有效)关于checkbox 三态
May 12 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 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函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python I/O与进程的详细讲解
2019/03/08 Python
python常用运维脚本实例小结
2020/02/14 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
Linux的文件类型
2016/07/05 面试题
客户经理岗位职责
2013/12/08 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
费用申请报告范文
2015/05/15 职场文书
音乐之声观后感
2015/06/04 职场文书
暑期家教宣传单
2015/07/14 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
openstack云计算keystone组件工作介绍
2022/04/20 Servers