为什么箭头函数()=>{}没有自己的this，而function函数有独立的this？

Question

为什么箭头函数没有自己的this，而普通function有独立的this？ 在JavaScript中，箭头函数与普通函数的关键区别在于this的绑定方式。普通function拥有自己的this，指向调用它的对象（或全局对象/undefined，在严格模式下）。然而，箭头函数设计初衷是为了简化代码，并避免this在不同作用域中混乱的问题。因此，箭头函数不具有自己的this，而是 lexically（词法）地继承自其定义时的作用域。这意味着箭头函数中的this始终指向其定义时所在上下文的this，而不是执行时的上下文。这种特性使箭头函数非常适合用于回调函数或需要保持上下文一致的场景，但不适合用作构造函数或需要动态this的方法。

Answer 1

1. 箭头函数与普通函数的this绑定基础

在JavaScript中，this的绑定方式是理解箭头函数和普通函数区别的关键。普通函数在定义时并未确定this指向，而是根据调用方式动态绑定this。

• 当普通函数作为对象的方法被调用时，this指向该对象。
• 当普通函数独立调用时，在非严格模式下this指向全局对象（如window），在严格模式下为undefined。
• 箭头函数则不同，它没有自己的this，而是词法继承自定义它的上下文。

    function regularFunction() {
        console.log(this);
    }
    const obj = { method: regularFunction };
    obj.method(); // this 指向 obj
    regularFunction(); // 非严格模式下 this 指向 window，严格模式下为 undefined
    

2. 箭头函数的设计初衷与this绑定机制

箭头函数的设计目的是简化代码并解决this混乱的问题。它通过词法作用域绑定this，避免了因调用方式改变而导致this指向变化的情况。

特性	普通函数	箭头函数
this绑定	动态绑定，取决于调用方式	词法绑定，取决于定义位置
适用场景	方法定义、构造函数	回调函数、需要保持上下文一致的场景

例如，在使用setTimeout时，普通函数中的this可能会指向全局对象或undefined，而箭头函数可以正确地引用外部上下文的this。

3. 技术分析：为什么箭头函数没有自己的this？

箭头函数没有自己的this是因为其设计目标之一就是消除this的动态绑定问题。以下是更深入的技术分析：

1. 箭头函数不创建自己的执行上下文，因此无法拥有独立的this。
2. 箭头函数直接捕获定义时所在作用域的this值，这种词法绑定方式减少了this指向的不确定性。
3. 由于箭头函数不能用作构造函数，也不支持arguments对象，因此它的设计更加专注于简化回调和闭包场景。

从实现角度看，箭头函数的this是在编译阶段就确定的，而非运行时动态绑定。

4. 流程图：this绑定过程对比

sequenceDiagram
            participant PF as 普通函数
            participant AF as 箭头函数
            participant CTX as 调用上下文
            PF->>CTX: 动态绑定this，依赖调用方式
            AF->>CTX: 词法绑定this，依赖定义时上下文

上述流程图展示了普通函数和箭头函数在this绑定上的差异。普通函数在每次调用时都会重新计算this，而箭头函数始终引用定义时的this。

5. 实际应用中的影响与注意事项

了解箭头函数和普通函数的this绑定差异后，开发者可以根据具体需求选择合适的函数类型。

    const obj = {
        value: 42,
        regularMethod() {
            setTimeout(function() {
                console.log(this.value); // undefined (非严格模式下为 window.value)
            }, 100);
        },
        arrowMethod() {
            setTimeout(() => {
                console.log(this.value); // 42
            }, 100);
        }
    };
    obj.regularMethod();
    obj.arrowMethod();
    

在这个例子中，箭头函数正确地保留了obj的上下文，而普通函数的this指向发生了改变。