This

在 JavaScript 中，this 是一个关键字，它在不同的上下文中指向不同的值。this 的值取决于函数被调用的方式以及函数在哪里被调用。

this 指向的改变

• 隐式绑定

  • 当函数作为对象的方法被调用时，this 自动绑定到该对象上。

    // 隐式绑定示例
    const person = {
      name: "Alice",
      greet() {
        console.log(`Hello, ${this.name}!`);
      },
    };
    
    person.greet(); // 输出: Hello, Alice!

• 显式绑定

  • call、apply 和 bind 可以改变函数内部 this 的指向。

  • 函数执行

    • call 和 apply 会立即执行函数。
    • bind 不会立即执行函数，而是返回一个新函数，这个新函数会在稍后调用时执行。

  • 参数传递

    • call 接受参数列表作为参数，每个参数对应函数的参数。
    • apply 接受一个数组作为参数，数组中的元素会被作为参数传递给函数。

    // 显式绑定示例
    function greet(message) {
      console.log(`${message}, ${this.name}!`);
    }
    
    const person1 = { name: "Bob" };
    const person2 = { name: "Charlie" };
    
    // 使用 call 改变 this 指向，并立即执行函数
    greet.call(person1, "Hi"); // 输出: Hi, Bob!
    
    // 使用 apply 改变 this 指向，并立即执行函数，参数作为数组传递
    greet.apply(person2, ["Hey"]); // 输出: Hey, Charlie!
    
    // 使用 bind 改变 this 指向，但不会立即执行函数
    const greetPerson1 = greet.bind(person1);
    greetPerson1("Bonjour"); // 输出: Bonjour, Alice!

• new 绑定

  • new 关键字用于创建一个新对象实例，并将构造函数内部的 this 绑定到该新对象上。

    // new 绑定示例
    function Person(name) {
      this.name = name;
    }
    
    const alice = new Person("Alice");
    console.log(alice.name); // 输出: Alice

• 箭头函数

  • 箭头函数的 this 始终指向其定义时的外层作用域的 this 值，而不是调用时的对象。

    // 箭头函数示例
    const obj = {
      name: "Alice",
      greet: () => {
        console.log(`Hello, ${this.name}!`);
      },
    };
    
    obj.greet(); // 输出: Hello, undefined!

规则优先级

• new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定
• new 绑定和 call、apply 是不允许同时使用的，所以不存在谁的优先级更高