JavaScript中改變this的指向的五種方法

更新時間：2025年05月28日 10:45:25 作者：你才是向陽花

本文主要介紹了JavaScript中改變this的指向的五種方法,包括call/apply顯式指定this并傳遞參數,bind創(chuàng)建綁定后的函數,箭頭函數繼承外層作用域this及通過變量保存this值,感興趣的可以了解一下

1. 使用 call 方法

call 方法允許你調用一個函數，并且顯式地指定該函數內部this的值。此外，你可以傳遞參數給被調用的函數。

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = { name: 'Alice' };

greet.call(person); // 輸出: Hello, my name is Alice

2. 使用 apply 方法

與call類似，apply也允許你指定this的值，但它接受一個數組作為函數參數。

function greet(greeting, punctuation) {
  console.log(`${greeting}, my name is ${this.name}${punctuation}`);
}

const person = { name: 'Alice' };

greet.apply(person, ['Hello', '.']); // 輸出: Hello, my name is Alice.

3. 使用 bind 方法

bind 方法創(chuàng)建一個新的函數，當這個新函數被調用時，它的this值會被設置成你所指定的對象。它不會立即執(zhí)行函數，而是返回一個綁定后的函數版本。

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = { name: 'Alice' };
const greetPerson = greet.bind(person);

greetPerson(); // 輸出: Hello, my name is Alice

4. 箭頭函數

箭頭函數沒有自己的this上下文，它會捕獲其所在作用域的this值。因此，在箭頭函數內部使用this實際上引用的是定義箭頭函數時的作用域中的this，而不是調用時的作用域。

const obj = {
  name: 'Alice',
  sayName: () => {
    console.log(this === window); // true（非嚴格模式下）
    console.log(`Hello, my name is ${this.name}`); // 這里的this不是obj
  }
};

obj.sayName();