快捷導(dǎo)航

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

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

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

1. 使用 call 方法

call 方法允許你調(diào)用一個函數(shù)，并且顯式地指定該函數(shù)內(nèi)部this的值。此外，你可以傳遞參數(shù)給被調(diào)用的函數(shù)。

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的值，但它接受一個數(shù)組作為函數(shù)參數(shù)。

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)建一個新的函數(shù)，當(dāng)這個新函數(shù)被調(diào)用時，它的this值會被設(shè)置成你所指定的對象。它不會立即執(zhí)行函數(shù)，而是返回一個綁定后的函數(shù)版本。

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. 箭頭函數(shù)

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

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

obj.sayName();