知识分解

箭头函数概念

**箭头函数表达式**的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

• 没有单独的this

• 不绑定arguments

• 箭头函数不能用作构造器，和 new一起用会抛出错误

• 箭头函数没有prototype属性

箭头函数与普通函数区别

function Person(name) {
  this.name = name
}
const person = name => {
  this.name = name
}
console.dir(Person)
console.dir(person)

• 缺少arguments

• 缺少caller - 无法确定上下文

• 缺少prototype

从上面的运行结果也可以看到箭头函数与构造函数相比，缺少了很多东西，比如：caller，arguments，prototype。

通过模拟函数

function myNew(fn, ...args) {
  // 创建一个空对象
  const obj = {};
  // 将该对象的 __proto__ 属性链接到构造函数原型对象
  // ❌ 缺少fn.prototype
  obj.__proto__ = fn.prototype;
  // 将该对象作为 this 上下文调用构造函数并接收返回值
  // ❌ 没有自己的this
  // ❌ call()函数无法改变箭头函数的指向
  const res = fn.apply(obj, args);
  // 如果返回值存在并且是引用数据类型，返回构造函数返回值，否则返回创建的对象
  return typeof res === "object" ? res : obj;
}

没有了这三个大将那这个实例化的过程就会处处受到影响。所以不能使用箭头函数当做构造函数的结论也就不言自明。

面试攻略

• 首先分析箭头函数和构造函数区别

• 缺少arguments
• 缺少caller - 无法确定上下文
• 缺少prototype

• 通过实例化过程逐层剖析

点评

• 直接问new一个函数发生了什么未免太过直接，所以稍稍换一种问法就可以轻松辨别出谁在背答案不思考了。

作者：全栈然叔

链接：https://juejin.cn/post/7050476297318825992

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。