JavaScript中箭头函数和用法是什么,怎样应用?
Admin 2022-01-26 群英技术资讯 652 次浏览
这篇文章我们来了解JavaScript中箭头函数的内容,下文介绍了什么是箭头函数,箭头函数的使用及不适用的场景等等,文中介绍很详细,有需要的朋友可以参考,感兴趣的朋友接下来就跟随小编来了解看看吧!
箭头函数表达式语法比函数表达式更简洁,即函数的一种简化形式。
它的写法:
() => {}; // 可以用来写一个匿名函数
它的结构:
const / let 函数名 参数 => 函数体
比如现在有一个一般形式的函数表达式
let add = function(x, y) { return x + y;};
可以用箭头函数来写:
let add = (x, y) => { return x + y;};
// 对于单个参数,我们可以省略外面的圆括号let addOne = x => { return x + 1;}
// 对于单行返回函数体,可以同时省略 {} 和 returnlet add (x, y) => x + y;
// 对于返回单行对象,在外面加个 ()let add (x, y) => ({ value: x + y;});
箭头函数没有 this,它会根据作用域链在外层中寻找 this。
举个例子:
var A = 1;let fun = { A: 2, printA: () => { console.log(this.A); }, printAA: function() { let print = () => { console.log(this.A); } print(); }};fun.printA(); // 1fun.printAA(); // 2
调用 printA
,里面是输出 this.A
,由于箭头函数没有 this
,所以在外层寻找,外层是 fun
。在这里,fun.printA()
是在全局作用域中调用的,所以外层的 this
指向的是 window
,由于之前用 var
定义了一个 A = 1,所以输出的是 1。
调用 printAA
,在里面调用了 print()
,输出 this.A
,看 print
这个函数,是个箭头函数,他没有 this
,所以找外层,它的外层是 printAA
,它是由 fun
调用的,所以它的 this
指向 fun
,所以输出 fun
中定义的 A,也就是 2。
实例化构造函数之后,它的 this 指向实例化的对像,而箭头函数没有 this,所以它不能用来做构造函数。
需要 this 指向调用对象的时候
需要使用 arguments 的时候
箭头函数中没有 arguments,可以使用剩余参数来存参数。
以上就是JavaScript中箭头函数及其用法的介绍啦,有需要的朋友可以了解看看,希望对大家学习JavaScript箭头函数有帮助,想要了解更多可以继续浏览群英网络其他相关的文章。
文本转载自PHP中文网
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
目录表单校验背景常规写法:策略模式介绍真实世界类比更广义的“算法”策略模式的组成利用策略模式改写策略模式优缺点优点:缺点:策略模式适合应用场景总结表单校验背景假设我们正在编写一个注册页面,在点击注册按钮之时,有如下几条校验逻辑:用户名不能为空密码长度不能少于6位手机号码必须符合格式常规写法:const form = d
现在很多网站都会做弹窗,但是我们知道频繁的弹窗和关闭不了的弹窗都是不利于用户体验的。为了提高用户的弹窗体验,我们能够使用vue实现点击空白区域来关闭弹窗。那么这要如何实现呢?下面给大家分享两个方法。
这篇文章主要为大家介绍了如何编写Vue插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
不通过路由的情况下, 怎么懒加载一个angular模块,并动态创建其中声明的组件?下面本篇文章给大家介绍一下方法,希望对大家有所帮助!
这篇文章主要为大家介绍了js作用域及作用域链工作引擎,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008