4.9 传统函数的 this 取决于调用方式,而箭头函数的 this 是词法作用域举例说明一下这个概念

比较好一点的就是，像是在 WebStorm 中的 Github Copilot 对话数据，都可以支持到 Markdown 格式，可以很准确清楚地粘贴到 Obisidian 里面来，且格式很正确，这个得点赞。

看来未来的文本格式，支持 Markdown 格式应该算是标配了。

当然, 我很乐意为您举例说明这个概念。这是理解箭头函数和传统函数之间差异的一个关键点。让我们通过一个具体的例子来解释:

假设我们有一个简单的对象, 代表一个计数器:

const counter = {
  count: 0,
  incrementTraditional: function() {
    console.log(this.count);
    this.count++;
  },
  incrementArrow: () => {
    console.log(this.count);
    this.count++;
  }
};

1. 传统函数的 this:

counter.incrementTraditional(); // 输出: 0
counter.incrementTraditional(); // 输出: 1

在这个例子中, incrementTraditional 是一个传统函数。当它被作为 counter 对象的方法调用时, this 指向 counter 对象。因此, 它可以正确访问和修改 count 属性。

2. 箭头函数的 this:

counter.incrementArrow(); // 输出: undefined
counter.incrementArrow(); // 输出: undefined

incrementArrow 是一个箭头函数。它的 this 是在定义时就确定的, 而不是在调用时确定。在这个例子中, 箭头函数定义在全局作用域, 所以 this 指向全局对象 (在浏览器中是 window,在 Node. Js 中是 global)。因此, this.count 是 undefined。

3. 在不同上下文中调用传统函数:

const incrementStandalone = counter.incrementTraditional;
incrementStandalone(); // 输出: undefined

当我们将传统函数赋值给一个变量并独立调用时, this 会指向全局对象 (非严格模式下)或 undefined (严格模式下)。

4. 在事件处理中使用:

class Button {
  count = 0;
 
  constructor() {
    document.getElementById('myButton').addEventListener('click', this.handleClickTraditional);
    document.getElementById('myButton').addEventListener('click', this.handleClickArrow);
  }
 
  handleClickTraditional() {
    console.log(this.count); // this 指向按钮元素,输出: undefined
  }
 
  handleClickArrow = () => {
    console.log(this.count); // this 指向 Button 实例,输出: 0
  }
}

在这个例子中, 传统函数作为事件处理器时, this 指向触发事件的元素。而箭头函数保持了它被定义时的 this 上下文, 即 Button 实例。

总结:

• 传统函数的 this 是动态的, 取决于函数如何被调用。
• 箭头函数的 this 是静态的, 在函数定义时就确定了, 通常指向定义时所在的上下文。

这种区别使得箭头函数在某些场景下 (如回调函数、事件处理器)特别有用, 因为它们可以保持外部的 this 上下文。而传统函数则在需要动态 this 绑定的场景中更为适用。