箭头函数的意义和函数的二义性

前言

谈起箭头函数，可能很多人都非常熟悉，在日常开发中可以说跟喝水一样重要。谈起与普通函数的区别，更是信手拈来：

• 箭头函数没有独立的 this、arguments 和 super 绑定，并且不可被用作方法。
• 箭头函数不能用作构造函数。使用new调用它们会引发TypeError
  。它们也无法访问new.target关键字。
• 箭头函数不能在其主体中使用yield，也不能作为生成器函数创建。

虽然区别上多少都能罗列一些，但是为什么JS已经有了普通函数了，为什么仍然要有箭头函数？难道只是为了一个语法简单？

答案是：为了消除函数的二义性。

什么是函数的二义性

我们知道，在JS中，调用一个函数可以有以下两种方式：

function f() {}

// 构造函数调用

let a = new F(); // f{}

// 普通函数调用

let b = f(); // undefined

不同的调用方式体现出对函数f的不同理解，并且有着不同的调用结果，这就是函数的二义性。

因为二义性的存在，导致JS函数的复杂度直线上升，因为在函数创建的时候，创建者无法预知其未来如何被调用，导致存在很大的安全隐患。

虽然多数情况下这种歧义可以被避免，例如JS命名规范中建议使用大写字母开头的函数名来表示构造函数，小写字母开头的函数名表示普通函数，使代码更易于理解和维护。但因为这并非强制要求，所以歧义仍然存在。

如果你不想函数被通过new来调用，可以这样：

function f() {

  if (new.target) {

    throw('Uncaught TypeError: f is not a constructor')

  }

}

这个二义性给开发者造成严重的心智负担，官方一直知道这个问题，只是一直没有解决，后来在ES6中引入了两个概念：

• 箭头函数
• class

它们的作用都是为了消除函数的二义性。

箭头函数只能这样使用：

const f = () => {};

// 报错 Uncaught TypeError: f is not a constructor

const a = new f();

// 正确

f();

class只能这样使用：

class F{};

// 报错 Uncaught TypeError: Class constructor F cannot be invoked without 'new'

const f = F();

// 正确

const f = new F();

为什么箭头函数里没有this和原型？

const f = () => {};

console.log(f.prototype); // undefined

因为箭头函数跟实例无关，跟面向对象没关系，它已经脱离了面向对象的范畴，而this哪来的？this来自于面向对象里面的概念，箭头函数里面没有原型的概念是一样的。