js中 箭头函数 与 普通函数 有哪些区别？

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196005.html

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

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

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

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

var id = 'Mybj'
// 箭头函数定义在全局作用域
let fun1 = () => {
  console.log(this.id)
}

fun1() // 'Mybj'
// this 的指向不会改变，永远指向 Window 对象
fun1.call({ id: 'Obj' }) // 'Mybj'

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

var id = 'Mybj'

function fun1() {
  // setTimeout 中使用普通函数
  setTimeout(function fun3() {
    console.log(this.id)
  }, 2000)
}

function fun2() {
  // setTimeout 中使用箭头函数
  setTimeout(() => {
    console.log(this.id)
  }, 2000)
}
fun1() // 'Mybj'
fun2() // 'Mybj'
fun1.call({ id: 'Obj' }) // 'Mybj'
fun2.call({ id: 'Obj' }) // 'Obj'

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] 的方式，将它转换成一个数组。

let showArguments = function () {
  console.log(arguments) // Arguments(2) ['params1', 'params2', callee: ƒ, Symbol(Symbol.iterator): ƒ]
  console.log(Array.prototype.slice.call(arguments)) //  ['params1', 'params2']
}
showArguments('params1', 'params2')

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

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

函数的 length 属性，是指形参的个数(准确说是：第一个具有默认值之前的参数个数，并且不包括剩余参数个数。看不懂括号内的可以先跳过。）

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

const showLength = function(a, b, c, d){
  console.log(`实际参数的个数：${arguments.length}`)
}
console.log(`形参的个数：${showLength.length}`) //形参的个数：4
console.log(`形参的个数：${showLength.bind(this, '3').length}`) //形参的个数：3
showLength('1','2');// 实际参数的个数：2
showLength.call(this, '3') // 实际参数的个数：2

总结

本文主要介绍了普通函数与箭头函数的区别，相对于普通函数来说，ES6 箭头函数的主要区别如下：

箭头函数不绑定 arguments，可以使用 …args 代替;

箭头函数可以进行隐式返回；

箭头函数内的 this 是词法绑定的，与外层函数保持一致；

箭头函数没有 prototype 属性，不能进行 new 实例化，亦不能通过 call、apply 等绑定 this;

在定义类的方法时，箭头函数不需要在 constructor 中绑定 this。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/