简单谈谈JS箭头函数

作者 : 开心源码 本文共776个字,预计阅读时间需要2分钟 发布时间: 2022-05-12 共83人阅读

上一篇文章《最近遇到的IPhone手机手机端H5页面Input输入框兼容问题总结》里面第一个问题使用到的代码里面使用到了箭头函数,有小伙伴表示看不懂。

简单谈谈JS箭头函数

这篇文章详情一下JavaScript箭头函数不绑定this的特性,希望对大家有帮助,能够快速上手用箭头函数。

箭头函数表达式的语法比普通函数表达式更短,并且不绑定自己的this,arguments,super或者 new.target。这些函数表达式最适合使用于非方法函数,并且它们不能使用作构造函数。

基本使用法有下面几种:

1、当有多个参数时

(参数1, 参数2, …, 参数N) => { 函数公告 }

(参数1, 参数2, …, 参数N) => 表达式(单一)

这相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }

2、当只有一个参数时,圆括号是可选的

(单一参数) => {函数公告}

单一参数 => {函数公告}

3、没有参数的函数应该写成一对圆括号

() => {函数公告}

箭头函数一个主要特性就是不绑定this,平常工作中使用的最多的也是这个特性。在箭头函数出现之前,每个新定义的函数都有它自己的 this值。这在实际中写起来很麻烦。例如写一个没秒钟自增1的函数,需要先把this分配给封闭的that变量:

function add(){

var that=this;

that.num=0;

setInterval(function addOne(){

that.num++;

},1000);

}

而假如用箭头函数,就会简便很多:

function add(){

this.num=0;

setInterval(()=>{

this.num++;//这里的this正确的指向了add函数

},1000);

}

这么一比较是不是发现用箭头函数很爽啊,可以少写很多代码。当然箭头函数还有很多其余的特性,就不在本文的详情范围内了。^_^

简单谈谈JS箭头函数

一起学习,互相督促进步,欢迎关注我~

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 简单谈谈JS箭头函数

发表回复