JavaScript 箭头函数与普通函数

偏执的太偏执、 2023-10-06 22:16 35阅读 0赞

#### 阅读目录 ####

*  箭头函数没有自己的 this，与外层函数保持一致
 *   *  思考题：下面的代码会输出什么？
 *  箭头函数不能作为构造函数
 *  箭头函数没有 arguments 对象
 *  箭头函数和普通函数共有的 length 属性

## 箭头函数没有自己的 this，与外层函数保持一致 ##

所有函数在执行时，会创建一个函数执行上下文，普通函数的执行上下文中会有一个变量 this，而箭头函数没有。

箭头函数中如果出现了 this ，它会永远去拿定义时、作用域链上、最近的那个 this，比如下面 demo 中，取的就是全局执行环境中的 this，指向全局对象。

### 思考题：下面的代码会输出什么？ ###

1、fun3 本身有 this，因为 setTimout 使得 fun3 是在全局上下文中执行，这个 this 指向全局执行环境；

2、同理，setTimout 使得箭头函数是在全局上下文中执行，但是箭头函数本身没有 this，它会沿着作用域链查找，找到 fun2 中创建的 this，也指向全局执行环境；

3、fun1.call 调用过程中，修改了 fun1 的 this 指向，但 fun3 本身也创建有 this，setTimeout 使得这个 this 指向全局执行环境；

4、fun1.call 调用过程中，修改了 fun1 的 this 指向，箭头函数没有 this，按照作用域链找到 fun1 的 this，于是最后指向 \{id: ‘Obj’\}。

## 箭头函数不能作为构造函数 ##

因为箭头函数没有自己的 this 变量，我们就没有办法修改 this 的指向，所以也不可以将其作为构造函数、它也没有 prototype 对象。

let Fun = (name, age) => {
        
      this.name = name
      this.age = age
    }
    
    // 报错
    let p = new Fun('mybj', 4)

## 箭头函数没有 arguments 对象 ##

大概很多人都没用 arguments 对象，它是在所有普通函数中都可用的一个局部变量。

代表函数调用时传递的参数，arguments 对象不是一个数组，是一个类数组。

它除了 length 属性和索引之外，没有任何数组属性，比如 slice 等方法。

所以通常会使用使用 `Array.prototype.slice.call(arguments)/[...arguments]` 的方式，将它转换成一个数组。

![在这里插入图片描述][40bea07a26ac4057a29827f34dfc178d.png]

## 箭头函数和普通函数共有的 length 属性 ##

这部分不属于区别，但写到这里想补充一下。这也是一个不太常见的属性，做过一些手撕题的应该都使用过。

函数的 `length` 属性，是指形参的个数  
准确说是：  
第一个具有默认值之前的参数个数，并且不包括剩余参数个数。

与之相对应的是，`arguments.length` 指的是实际参数的个数。

![在这里插入图片描述][0976d7b2e0064e5c8edb32d5f81b7024.png]

[40bea07a26ac4057a29827f34dfc178d.png]: https://img-blog.csdnimg.cn/40bea07a26ac4057a29827f34dfc178d.png
[0976d7b2e0064e5c8edb32d5f81b7024.png]: https://img-blog.csdnimg.cn/0976d7b2e0064e5c8edb32d5f81b7024.png

JavaScript 箭头函数与普通函数

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 箭头函数与普通函数

相关箭头函数与普通函数区别

相关箭头函数与普通函数区别

相关箭头函数与普通函数的区别

相关箭头函数与普通函数的区别

相关前端面试系列-JavaScript-箭头函数(与普通函数的区别)

相关箭头函数和普通函数的区别

相关普通函数与箭头函数

相关普通函数和箭头函数的区别：

相关箭头函数和普通函数区别