箭头函数| 青训营笔记

104 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

前言

最近在做面试题,发现很多知识都是含糊不清的,于是就在此记录我的整理之路~ 那么,话不多说,今天的下酒菜是 箭头函数

一、箭头函数的传入

传入要注意:传入一个参数可以不加(),没有参数或者两个及以上要加();可以与变量解构赋值结合使用

1.jpg

二、箭头函数的传出

传出要注意:返回多个语句要加{},直接返回对象要加() 不然会报错

三、箭头函数没有prototype也咩有this,所以不能用new

四、箭头函数的this

箭头函数的this是继承来的,指向词法作用域(即外层普通函数的this,没有函数,则默认指向全局作用域window),而且箭头函数的this指向是静态的,无法改变,call apply bind也无法改变箭头函数内部的this指向。图二是箭头函数的错误用法。

图一:

2.jpg 图二:

3.jpg

补充:

普通函数的this指向调用函数的对象(谁调指谁

4.jpg

五、箭头函数没有arguments / caller /callee,但可以使用...扩展运算符 + rest剩余参数获取传入的参数

5.jpg

补充:

Arguments对象

1、arguments对象不是真正的数组,即不能直接用数组下标索引;rest剩余参数是数组,可以直接用数组下标

2、将arguments对象转为数组 6.jpg

3、arguments对象用作匿名函数的回调 7.jpg

8.jpg

六、箭头函数不能换行,会报错

9.png

七、箭头函数的优点:

简化回调函数;将this指向固定化,不像普通函数的this谁调指谁。

八、箭头函数不能应用的场景:

1、作为对象属性(上面说了原因哈,不记得了回去找第四点的图二)

2、需要动态的this(箭头函数this是固定的。比如在按钮上添加点击事件,回调函数就不能使用箭头函数,因为this应该指向button,使用箭头函数后会固定继承某个上层普通函数的this或window全局作用域的this)

九、温馨提示

箭头函数虽然能固定this,但复杂的代码中最好不要使用,增加代码的可读性,应该使用普通函数。

其余

1、类似a = 1的赋值操作,尽量不这么做,因为轻则污染全局,重则造成内存泄漏(比如a = 一个很大的数组,a在全局上下文中,所以一直会有引用,程序也不会自动将其销毁)

2、JavaScript中没有块级作用域(即一对花括号,比如if/for/while内部的代码就是在花括号{}里),只有全局作用域和函数作用域,代表了在这些语句里的代码声明和在外部的代码声明是一样的,外部也可以访问/修改这些变量,除了es6中新提出的let和const声明只能在这些语句内生效,var和function声明的变量都可以在这些语句内被外部访问