面试题：JavaScript 箭头函数对原型链和继承的影响及原理

Question

分析 JavaScript 箭头函数对原型链和继承机制产生了哪些影响，其背后的原理是什么？请从语言底层实现角度进行深入阐述。

Answer 1

箭头函数对原型链和继承机制的影响及原理

1. 箭头函数没有自身的 this 绑定
   • 影响：箭头函数不绑定自身的 this，它的 this 继承自外层作用域（词法作用域）。这与传统函数不同，传统函数在调用时会根据调用方式确定 this 的值（如作为对象方法调用时 this 指向该对象等）。在继承方面，这意味着箭头函数不会像传统函数那样在作为构造函数调用时创建新的 this 上下文用于实例化对象，因此不能使用 new 关键字调用箭头函数来创建实例。
   • 原理：在 JavaScript 引擎底层实现中，函数在创建时会有一个内部属性 [[ThisMode]]，传统函数的 [[ThisMode]] 为 lexical（默认），这意味着在函数执行时，this 的值是基于调用上下文动态确定的。而箭头函数的 [[ThisMode]] 为 lexical，它的 this 值在定义时就已经确定，取决于外层作用域的 this。例如：

function outer() {
    this.value = 42;
    const arrowFunc = () => console.log(this.value);
    arrowFunc();
}
const outerObj = new outer(); 
// 输出 42，箭头函数中的 this 继承自外层函数 outer 的 this

2. 箭头函数没有 prototype 属性
   • 影响：由于箭头函数没有 prototype 属性，它不能作为构造函数来创建具有原型链继承关系的对象实例。传统构造函数通过 prototype 属性来定义实例对象的原型，实例对象可以通过原型链访问到 prototype 上的属性和方法。而箭头函数无法以这种方式构建原型链继承结构。
   • 原理：从语言设计角度，因为箭头函数不打算用作构造函数，所以在底层实现上没有为其设置 prototype 属性。在 JavaScript 的对象模型中，prototype 属性对于构造函数来说是用于构建原型链的关键，但箭头函数的设计初衷并非如此，所以省略了这个属性。例如：

const arrowFunc = () => {};
console.log(arrowFunc.prototype); 
// 输出 undefined

3. 箭头函数不能使用 arguments 对象
   • 影响：在继承场景中，如果需要在函数内部访问所有传入的参数（如在某些继承方法重写中可能会用到），箭头函数由于没有 arguments 对象，会给实现带来不便。传统函数内部有一个自动生成的 arguments 对象，包含了所有传入函数的参数。
   • 原理：箭头函数基于词法作用域，它没有自己的 arguments 对象，而是从外层作用域继承。这是因为箭头函数设计为简洁的函数表达式，通常不期望像传统函数那样处理复杂的参数列表和可变参数情况。例如：

function outer() {
    const arrowFunc = () => console.log(arguments[0]);
    arrowFunc(1); 
    // 这里会报错，因为箭头函数没有自己的 arguments 对象，且此处外层函数未传入参数
    outer(1); 
    // 这里如果去掉前面的 arrowFunc(1)，会输出 1，因为箭头函数从外层函数 outer 继承 arguments
}

综上所述，箭头函数由于其独特的 this 绑定、没有 prototype 属性以及不能使用 arguments 对象等特性，对 JavaScript 的原型链和继承机制产生了显著影响，改变了传统函数基于原型链继承和实例化对象的方式。