箭头函数中的 this 是如何绑定的？它与普通函数中的 this 有什么区别？

推荐答案

箭头函数中的 this 是词法作用域绑定，它继承自定义时（而不是调用时）所在的外部作用域的 this 值。也就是说，箭头函数本身没有 this 绑定，它会捕获其所在上下文的 this 值。

普通函数中的 this 绑定是动态的，它的值取决于函数如何被调用。具体来说，this 的值会根据以下几种情况变化：

• 作为对象方法调用时，this 指向调用该方法的对象。
• 作为普通函数调用时（非严格模式下），this 指向全局对象（浏览器中是 window，Node.js 中是 global）；严格模式下，this 指向 undefined。
• 通过 call、apply 或 bind 调用时，this 被显式指定。
• 作为构造函数调用时，this 指向新创建的对象实例。

箭头函数与普通函数 this 的主要区别在于：

• 箭头函数没有自己的 this，它继承自外部作用域的 this；
• 普通函数的 this 是在运行时动态确定的。
• 箭头函数不能使用 call、apply 或 bind 来修改 this 的指向。

本题详细解读

箭头函数的 this 绑定

箭头函数在语法上是一种更简洁的函数表达式，它最显著的特点之一就是 this 的行为。与普通函数不同，箭头函数并没有自己的 this 值。当在箭头函数中使用 this 时，它会向上查找作用域链，直到找到包含它的最近的非箭头函数的 this 值。这个过程发生在函数定义时，因此被称为“词法作用域”或“静态作用域”。

举个例子：

// www.javascriptcn.com code example
const obj = {
  name: 'Object',
  method: function() {
    setTimeout(function() {
      console.log("普通函数this:",this); // this 指向 window (非严格模式) 或 undefined(严格模式)
    }, 100);
    setTimeout(() => {
        console.log("箭头函数this:",this); // this 指向 obj
    }, 200);
  }
};

obj.method();

在上面的例子中，普通函数内的 this 默认指向全局对象 window（非严格模式）或 undefined（严格模式）。而箭头函数内的 this，则会继承其外部 method 函数的 this，也就是 obj 对象。

普通函数的 this 绑定

普通函数的 this 值是在函数调用时确定的，这被称为“动态作用域”。this 的值会受到函数如何被调用的影响：

1. 作为对象方法调用: 当函数作为对象的属性调用时，this 会指向调用该方法的对象。

   const obj = {
     name: 'Object',
     method: function() {
       console.log(this.name); // 输出 "Object"
     }
   };
   obj.method();

2. 作为普通函数调用: 当函数独立调用时（没有通过对象或构造函数调用），在非严格模式下，this 指向全局对象 window（浏览器中）或 global（Node.js 中），严格模式下 this 为 undefined。

   function fn() {
       console.log(this);  // 非严格模式下 输出 Window 对象; 严格模式下 输出 undefined
   }
   fn();

3. 使用 call、apply 或 bind 调用: 这三种方法可以显式地设置函数执行时的 this 值。

   // www.javascriptcn.com code example
   function fn() {
     console.log(this.name);
   }
   const obj = {name: 'Object'};
   fn.call(obj); // 输出 "Object"
   fn.apply(obj); // 输出 "Object"
   
   const boundFn = fn.bind(obj);
   boundFn(); // 输出 "Object"

4. 作为构造函数调用: 当函数通过 new 关键字调用时，它会被当作构造函数，this 指向新创建的对象实例。

   function Person(name) {
       this.name = name;
       console.log(this);
   }
   const person = new Person("Alice"); //this 指向新创建的 Person 实例，并输出 Person {name: 'Alice'}

总结：箭头函数与普通函数 this 的主要区别

• this 指向:
  • 箭头函数：词法作用域绑定，继承定义时所在外部作用域的 this。
  • 普通函数：动态作用域绑定，this 的值取决于函数如何被调用。
• 修改 this:
  • 箭头函数：不能使用 call、apply 或 bind 修改 this 指向。
  • 普通函数：可以使用 call、apply 或 bind 显式指定 this 指向。
• 作为构造函数:
  • 箭头函数：不能作为构造函数使用，不能通过 new 关键字调用。
  • 普通函数：可以作为构造函数使用。