深入理解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 日期对象Date扩展方法
May 30 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
详解Vue项目中实现锚点定位
Apr 24 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常用函数 推荐收藏保存
2010/02/21 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
常用PHP框架功能对照表
2014/10/23 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python PyTorch预训练示例
2018/02/11 Python
Python callable()函数用法实例分析
2018/03/17 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python实现最长公共子序列
2018/05/22 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
Python Pillow Image Invert
2019/01/22 Python
python解析xml简单示例
2019/06/21 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
办公用房租赁协议书
2014/11/29 职场文书
测量员岗位职责
2015/02/14 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js