JavaScript中箭头函数与普通函数的区别详解

下面是“JavaScript中箭头函数与普通函数的区别详解”的完整攻略。

一、前言

在ES6的时代，随着箭头函数的引入，它逐渐被越来越多的开发者所使用，那么箭头函数和普通函数又有何区别呢？接下来，我们将从诸如函数内部的this、arguments、new、原型等角度来详细讲解两种函数的异同。

二、this

普通函数中的this是由函数的调用方式动态绑定的，而且this的值是在函数执行时才能确定的。

function Person() { 
  this.name = '小明';
  this.hello = function() {
    console.log('我的名字是' + this.name);
  }
}

var p = new Person(); 
p.hello(); // 输出：“我的名字是小明”

当我们将上述代码修改为箭头函数时，this的绑定方式发生了改变，this指向箭头函数所在的上下文。（这里指window）

function Person() { 
  this.name = '小明';
  this.hello = () => {
    console.log('我的名字是' + this.name);
  }
}

var p = new Person(); 
p.hello(); // 输出：“我的名字是undefined”

三、arguments

在普通函数中，arguments是一个类数组对象，它包含函数调用时传入的所有实参。而在箭头函数中，arguments是不存在的，但是可以通过展开操作符（...）获取函数调用时的实参。

function sum(a, b) { 
  console.log(arguments); // 输出：Arguments { '0': 1, '1': 2 }
}

sum(1, 2);

const sum2 = (a, b) => {
  console.log(...arguments); // 输出：1 2
}

sum2(1, 2);

四、new

在普通函数中，用new关键字调用时，函数将被作为构造函数执行，this指向新创建的实例对象。

function Person(name) { 
  this.name = name;
}

var p = new Person('小明'); 
console.log(p.name); // 输出：“小明”

而在箭头函数中，不能用new关键字调用，因为箭头函数没有prototype属性。

五、原型

在普通函数中，构造函数创建的实例对象通过__proto__属性继承构造函数的prototype，从而继承了构造函数原型上的方法。

function Person(name) { 
  this.name = name;
}

Person.prototype.hello = function(){
  console.log('我的名字是' + this.name);
}

var p = new Person('小明'); 
p.hello(); // 输出：“我的名字是小明”

而在箭头函数中，没有prototype属性，也就不存在原型的概念。

六、总结

通过本文的讲解，我们可以看出了普通函数和箭头函数存在许多的区别，它们之间的最大区别就是this的绑定方式不同。因此，在使用箭头函数的时候，我们需要注意上下文的继承和调用方式的限制。最后，我们来看一下什么情况下可以使用箭头函数：

• 箭头函数体非常简单，可以写成一行返回语句。
• 需要使用非常简单的逻辑来绑定this。

至此，“JavaScript中箭头函数与普通函数的区别详解”结束。