深入理解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显示用户停留时间的简单实例
Aug 05 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
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 字符转义 注意事项
2009/05/27 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
ExtJS 入门
2010/10/29 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
python脚本替换指定行实现步骤
2017/07/11 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
Python中安装easy_install的方法
2018/11/18 Python
python实现一组典型数据格式转换
2018/12/15 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python同时遍历两个list用法说明
2020/05/02 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
经理管理专业自荐信范文
2013/12/31 职场文书
运动会稿件50字
2014/02/17 职场文书
单位在职证明书
2014/09/11 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
旷工检讨书大全
2015/08/15 职场文书