js 匿名函数_JS箭头函数三连问:为何用、怎么用、何时用
![](/assets/blank.gif)
什么才是箭头函数
JS的箭头函数大概就像python中的lambda(python定义匿名函数的关键字)和ruby中的blocks(类似于闭包)一样。这些匿名函数都有他们特殊的语法:首先接收一定数目的参数,然后在定义它们的函数的作用域或就近作用域中执行。接下来我们将详细探讨这些。
箭头函数的语法
箭头函数有一个大体的结构,同时也有很多的特殊情况可以简化。核心的结构如下:
(argument1, argument2, ... argumentN) => {// function body}
在括号里面有一系列的参数,接着跟着一个箭头符号=>,最后是函数体。这跟传统的函数很相像,只是我们省略了function关键字,并且添加了一个=>在参数后面。并且,这里也有很多种情况,让箭头函数结构变得更加的简洁。首先,如果函数体里面是一个单独的表达式,你可以省略大括号直接将表达式写在一行,并且表达式的结果也将会被函数直接返回。比如:
const add = (a, b) => a + b;
其次,如果这传入的是一个单独的参数,你也可省略参数部分的括号。比如:
const getFirst = array => array[0];
如你所见,这样就看起来更加的简洁了,我们也将在后面说明更多的特性。
高级语法
如果你了解这些高级语法之后将十分受用。首先,如果你尝试在一行书写函数,但是返回的值却是一个对象内容,你原想这样写:
(name, description) => {name: name, description: description};
而问题就是这样的语法会引起歧义,会误以为你在写一个函数的函数体。如果想返回的是单个的对象,请用括号包装该对象:
(name, description) => ({name: name, description: description});
封闭的上下文作用域
不像其他形式的函数,箭头函数并没有他们自己的执行上下文。实际上,这就意味着代码中的this和arguments都是继承自他们的父函数。比如,比较下面箭头函数和传统函数的区别:
const test = { name: 'test object', createAnonFunction: function() {return function() { console.log(this.name); console.log(arguments);};}, createArrowFunction: function() {return () => { console.log(this.name); console.log(arguments);};}};
我们有一个有两个方法的对象,每个方法都返回了一个匿名函数。区别在于第一个方法里面用了传统的函数表达式,后面的用了箭头函数表达式。如果我们在传入同样的参数运行,我们得到了两个不同的结果。
const anon = test.createAnonFunction('hello', 'world');//返回匿名函数const arrow = test.createArrowFunction('hello', 'world');anon();//undefined//{}// this->windowarrow();//test object//object { '0': 'hello', '1': 'world' }//this->test
第一个匿名函数有自己的上下文(指向并非test对象),当你调用的时候没有参考的this.name的属性,(注意:现在this指向window),也没有创建它时调用的参数。另一个,箭头函数与创建它的函数有相同的上下文,让其可以访问参数arguments和对象。
箭头函数改进您的代码
传统lambda函数的主要用例之一,就是将函数用于数组的遍历,现在用JavaScript箭头函数实现。比如你有一个有值的数组,你想去map遍历每一项,这时箭头函数是非常推荐的:
const words = ['hello', 'WORLD', 'Whatever'];const downcasedWords = words.map(word => word.toLowerCase());
一个及其常见的例子就是返回一个对象的某个值:
const names = objects.map(object => object.name);
类似的,当用forEach来替换传统for循环的时候,实际上箭头函数会直观的保持this来自于父一级
this.examples.forEach(example => {this.runExample(example);});
Promise和Promise链
当在编写异步程序的时候,箭头函数也会让代码更加直观和简洁。Promise可以更简单的编写异步程序。虽然你乐意去使用async/await,你也需要好好理解promise,因为这是他们的基础。使用promise,仍然需要定义你的代码执行完成之后的回调函数。这是箭头函数的理想位置,特别是如果您生成的函数是有状态的,同时想引用对象中的某些内容。
this.doSomethingAsync().then((result) => {this.storeResult(result);});
对象转换
箭头函数的另一个常见而且十分有用的地方就是用于封装的对象转换。例如在Vue.js中,有一种通用模式,就是使用mapState将Vuex存储的各个部分,直接包含到Vue组件中。这涉及到定义一套mappers,用于从原对象到完整的转换输出,这在组件问题中实十分有必要的。这一系列简单的转换,使用箭头函数是最合适不过的。比如:
export default { computed: {...mapState({ results: state => state.results, users: state => state.users,});}}
你不应该使用箭头函数的情景
这里有许多箭头函数不推荐的场景,这种情况之下不仅没有帮助,而且还会造成不必要的麻烦。首先就是对象中的方法。这里有一个函数上下文的例子,对于我们理解很有帮助。曾经流行一种趋势,用class类的语法和箭头函数,为其自动绑定方法。比如:事件方法可以使用,但是仍然绑定在class类中。看起来就像下面的例子:
class Counter { counter = 0; handleClick = () => {this.counter++;}}
在这种方法中,如果被一个点击事件函数调用了,它虽然不是Counter的上下文中,它仍旧可以访问实例的数据,这种方式的缺点不言而喻。用这种方式的确提供了一种绑定函数的快捷方式,但是函数的表达形式多种多样,相当不直观。如果你尝试在原型使用这种对象,这将不利于测试,同时也会产生很多问题。相反,推荐用一种常规的绑定方式,如有必要可以绑定在实例的构造函数中:
class Counter { counter = 0; handleClick() {this.counter++;} constructor() {this.handleClick = this.handleClick.bind(this);}}
深层调用
另一种使用箭头函数会让你头疼的地方,就是你去用很多函数的组合调用,尤其是函数的深层调用。简单的理由跟匿名函数一样,堆栈的追踪很复杂。如果你的函数仅仅在一层之下,而不是深层的迭代,这倒不是什么问题。但是如果你将函数定义为箭头函数,并且在他们之间来回调用,当你调试bug的时候你将被代码困惑,甚至得到如下的错误信息:
{anonymous}(){anonymous}(){anonymous}(){anonymous}(){anonymous}()//anonymous 匿名
有动态上下文的函数
还有最有一种箭头函数会让你困惑的情形,就是this是动态绑定的时候。如果你在以下情形使用箭头函数,那么this的动态绑定不会如期工作,并且你也会困惑这些代码为什么不像预期那样工作,也会给你之后工作的人造成麻烦。一些典型的例子:
- 事件的调用函数,this指向当前的目标属性
- 在jquery中,大多数时候this指向的是当前被选择的元素
在vue中,methods和computed中的this指向的是vue的组件。当然你也可以在上面的情形之下谨慎的使用箭头函数。但特别是在jquery和vue的情况下, 这通常会干扰正常功能, 并使您感到困惑:为什么看起来跟别人代码一样的代码就是不工作。
总结
箭头函数是JS语言中十分特别的属性,并且使很多情形中代码更加的变化莫测。尽管如此,就像其他的语言特性,他们有各自的优缺点。因此我们使用它应该仅仅是作为一种工具,而不是无脑的简单的全部替换为箭头函数。关于本文译者:@kitety译文:https://juejin.im/post/5be599d4e51d451d23633ec8作者:@Kevin Ball原文:https://codeburst.io/javascript-arrow-functions-how-why-when-and-when-not-to-use-them-fb8c2de9dbdc
end -
用心分享 一起成长 做有温度的攻城狮
每天记得对自己说:你是最棒的!
往期推荐:
webpack4配置详解之常用插件分享
JavaScript到底是解释型语言还是编译型语言?
非常牛X的纯CSS实现动态天气预报!
大型项目前端架构浅谈
都看到这里了,给个“在看”再走呗~
js 匿名函数_JS箭头函数三连问:为何用、怎么用、何时用相关推荐
- js map 箭头_JS异常函数之箭头函数
来源:logrocket作者:Maciej Cieślar 译者:前端小智 为了保证的可读性,本文采用意译而非直译. 在JS中,箭头函数可以像普通函数一样以多种方式使用.但是,它们一般用于需要匿名函数 ...
- js map 箭头_JS异常函数之-箭头函数
来源:logrocket 作者:Maciej Cieślar 译者:前端小智 为了保证的可读性,本文采用意译而非直译. 在JS中,箭头函数可以像普通函数一样以多种方式使用.但是,它们一般用于需要匿名函 ...
- js匿名函数、箭头函数,区别
js匿名函数.箭头函数,以及他们的区别 匿名函数 箭头函数 区别 1.匿名函数 简单点说就是没有名字的函数,在声明函数时不写函数名称,(将函数赋值给变量)叫匿名函数. 匿名函数可以有效的保证在页面上写 ...
- 箭头 运算符_论普通函数和箭头函数的区别以及箭头函数的注意事项和不适用场景...
论普通函数和箭头函数的区别以及箭头函数的注意事项和不适用场景 箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱.就是这种我们日常开发中一直在使用的API,大 ...
- 普通函数和箭头函数区别
如何回答面试官普通函数和箭头函数的区别(this指向) 普通函数和箭头函数区别有以下几点区别: 声明方式不同:普通函数可以是声明式的,也可以是赋值式:而箭头函数只能是赋值式的: this指向不同:普通 ...
- # 普通函数和箭头函数的区别
普通函数和箭头函数 写在前面 函数(Function)是 JavaScript 里的'一等公民'.是由称为函数体的一系列语句组成.可以当做入参,出参(返回值)使用.和对象一样,有自己的属性和方法.区别 ...
- es6箭头函数_【知识点】ES6箭头函数、箭头函数与普通函数的区别
作者:長安曹公子 文章出处:ES6 - 箭头函数.箭头函数与普通函数的区别 一.基本语法 ES6中允许使用箭头=>来定义箭头函数,具体语法,我们来看一个简单的例子: // 箭头函数 let fu ...
- java 箭头函数_箭头函数丶Java教程网-IT开发者们的技术天堂
基本用法 在ES6中允许使用 => 来定义函数,如下: var f = a => a; console.log(f(1)); //1 就等同于 var f = function(a){ r ...
- JavaScript函数之箭头函数
箭头函数表达式 箭头函数包括一个参数列表(零个或多个参数,如果参数个数不是一个的话要用 ( - )包围起来),然后是标识 =>,函数体放在最后. 示例讲解 例一: // 传统的定义方式var s ...
- 匿名函数、普通函数、箭头函数作用域
匿名函数 /*************************************** * 匿名函数的this指向具有全局性 * 当this在函数内找不到时,会去全局查找 /*********** ...
最新文章
- ConstraintLayout 全解析
- PG 9.4 行冻结信息的测试
- bzoj[1835][ZJOI2010]base 基地选址
- 关于epoll 水平触发在udp套接字上不生效问题的原因
- 第二百二十三节,jQuery EasyUI,ComboBox(下拉列表框)组件
- HTML+CSS+JS实现 ❤️电商商品图片幻灯片特效❤️
- 佩戴十字架项链有什么特殊含义?
- SpringBoot+websocket 实现web聊天功能(单聊、保存消息)
- JAVA指定区域内截图_Java+Selenium根据元素创建指定区域截图——Element快照
- python的分号用英文还是中文_Python中的分号
- 星空特效HTML代码,HTML5特效库 HTML5+JS全屏星空特效源码
- 什么是flex布局,它的常用属性有哪些
- 北大软微2021计算机考研难度,北大软微金服方向2016年考研经验贴---初试410分
- 【GPT4】GPT4 官方报告解读
- 【MATLAB教程案例15】基于WOA鲸鱼优化算法的函数极值计算matlab仿真及其他应用
- 【C语言】学籍管理系统
- Git安装【Windows环境安装配置】详细教程
- Linux计划任务与日志管理
- 聊天机器人:问答系统类型介绍
- js(jquery方式) 直接访问 elasticsearch
热门文章
- 181223每日一句
- 181021词霸有道扇贝每日一句
- 投稿期刊:机械人机交互图形图象交叉学科
- Atitit 调试工具模块 保存序列化map参数 mybatis调试sql selectid 查看mybatis真实sql 1.1. 对象序列化功能 序列化为bytearr 文件等	1 1.2.
- paip.提升效率---request自动绑定domain object
- paip.python连接mysql最佳实践o4
- paip.spring 获取bean getBean 没有beanid的情况下
- paip.c++ 进程间通信方法大总结
- 走进爆发中的AIOps
- 关于数据中台,扎克伯格和马化腾做法不同