ES6 箭头函数你正确使用了吗
SegmentFault
共 3141字,需浏览 7分钟
· 2021-07-19
作者:归子莫
来源:SegmentFault 思否社区
ES6 箭头函数你正确使用了吗
博客说明
文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!
说明
在ES6中允许使用“箭头”(=>
)定义函数,所以在我们后续写代码的过程中出现的很多的箭头函数,因为真香!但是也带来的一些问题,灵魂拷问,你真的了解箭头函数吗?因为不敢肯定作答,故此书。
箭头函数
一个简单箭头函数
// es6
const hello = item => item;
// es5 上面的代码等同于
const hello = function (item) {
return item;
};
用法(三大如果)
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
const hello = () => 'hello';
const sum = (num1, num2) => num1 + num2;
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return
语句返回。
const sum = (num1, num2) => {
let num = 0;
if(num1 && num2){
num = num1 + num2;
}
return num;
}
如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
const getInfo = id => ({ id: id, name: "hello" });
四大注意点
以下四点可能被无数次的提及,并且出现在各大面试题当中,不错,今天又来了一次。
箭头函数没有自己的 this
对象不可以当作构造函数,不可以使用 new
命令不可以使用 arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替不可以使用 yield
命令,因此箭头函数不能用作 Generator 函数
箭头函数的this指向
this
指向函数运行时所在的对象。箭头函数没有自己的this
对象,内部的this
就是定义时上层作用域中的this
。this
指向是固定的,相比之下,普通函数的this
指向是可变的。将ES6转成ES5
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
function test() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() => this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;
}, 1000);
}
s1 // 1
s2 // 0
// 普通函数
setInterval(function () {
let _this = this;
_this.s2++;
}, 1000);
不能作为构造函数
this
,拿甚构造?所以箭头函数也就不能用作构造函数。也不能使用new关键词。不可以使用arguments对象
arguments
指向外层函数的对应变量,像类似的兄弟还有super
、new.target
function hello() {
setTimeout(() => {
console.log('args:', arguments);
}, 1000);
}
hello(1,2,3,4)
// args: [1, 2, 3, 4]
call()
、apply()
、bind()
这些方法去改变this
的指向,因此箭头函数的this是”静态“的。箭头函数的好与坏
this
对象一直是一个令人头痛的问题,使用时小心翼翼,回调一多,代码就糊了。正是因为这个”静态“的this的出现,改善了这一些问题。评论
金融研究 | 使用Python测量关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次,且只能改20字符。如果内容出问题,或者想更新内容, 只能重复推送。为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
词向量(更新) | 使用MD&A2001-2022语料训练Word2Vec模型
buTips: 公众号推送后内容只能更改一次,且只能改20字符。 如果内容出问题,或者想更新内容, 只能重复推送。 为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2023-03-24-load-w2v-and-expand-your-concpe
大邓和他的Python
0
金融研究(更新) | 使用Python构建关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次,且只能改20字符。如果内容出问题,或者想更新内容, 只能重复推送。为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
偷偷告诉你如何一台电脑开多个微信!
大家好,我是轩辕。前几天在粉丝群里,有人问我是怎么在一台电脑上同时登录两个微信的?正好之前写过一篇文章,分析过原理,分享给没看过的小伙伴学习一下。手机端多开微信估计很多人都知道,像华为、小米等手机系统都对此做了支持,不过在运行Windows系统的电脑上怎么启动两个微信呢?其实很简单,你只需要写一个批
编程技术宇宙
0
盘点Lombok的几个骚操作,你绝对没用过!
👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:http://116.62.199.48/ ,新项目正在酝酿中
小哈学Java
0
堪称最优秀的Docker可视化管理工具——Portainer你真的会用吗?
来源:blog.csdn.net/shark_chili3007/article/details/123366179👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目
小哈学Java
0
JS的这些新特性,你都用过么?
大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号回复1,加入高级Node交流群作为一门不断演进的语言,JavaScript每年都会引入新特性。这些特性的加入,能够帮助我们编写更加简洁、高效、易于维护的代码。然而,并非所有新特性
程序员成长指北
1
管理世界2024 | 使用管理层讨论与分析测量「企业人工智能指标」
Tips: 公众号推送后内容只能更改一次,且只能改20字符。如果内容出问题,或者想更新内容, 只能重复推送。为了更好的阅读体验,建议阅读本文博客版, 链接地址 https://textdata.cn/blog/2024-04-19-ai-improve-firm-productivity/
大邓和他的Python
0