JavaScript 中的 this 關鍵字引用了所在函數(shù)正在被調用時的對象。在不同的上下文中，this 的指向會發(fā)生變化。可以通過 call, apply, bind 方法來改變 this 的上下文。

一、this 關鍵字的作用

JavaScript 中的 this 關鍵字引用了所在函數(shù)正在被調用時的對象。在不同的上下文中，this 的指向會發(fā)生變化。

在全局上下文中，this 指向全局對象（在瀏覽器中是 window 對象，在 Node.js 中是 global 對象）。

在函數(shù)中，this 指向調用該函數(shù)的對象。如果該函數(shù)是通過對象的方法調用的，那么 this 指向該對象；如果是通過函數(shù)調用的，那么 this 指向全局對象。

在箭頭函數(shù)中，this 繼承自父級作用域中的 this。

在類的構造函數(shù)中，使用 new 關鍵字調用類時，this 指向新創(chuàng)建的對象。

例如：

class MyClass {
  constructor() {
    this.value = 42;
  }
}

let obj = new MyClass();
console.log(obj.value); // 42

類的實例方法中的 this 默認指向實例本身，類方法中的 this 默認指向類本身。

例如：

class MyClass {
  value = 42;
  printValue() {
    console.log(this.value);
  }
  static printValue() {
    console.log(this.value);
  }
}

let obj = new MyClass();
obj.printValue(); // 42
MyClass.printValue(); // undefined

使用 Object.create 方法創(chuàng)建對象

使用 Object.create 方法創(chuàng)建是一種特殊的調用方式。在這種情況下，如果在對象的原型鏈上調用函數(shù)，則 this 指向該對象。

例如：

let baseObject = { value: 42 };
let obj = Object.create(baseObject);

function printValue() {
  console.log(this.value);
}

printValue.call(obj); // 42

這種情況下， obj 的原型鏈上有 value 屬性，所以調用 printValue() 方法時， this 指向 obj 對象。

在類中使用箭頭函數(shù)

類中使用箭頭函數(shù)定義的方法中的 this 指向是綁定的，它指向的是類的實例，而不是類本身。

例如：

class MyClass {
  value = 42;
  printValue = () => {
    console.log(this.value);
  }
}
let obj = new MyClass();
obj.printValue(); // 42

箭頭函數(shù)的 this 是定義時的 this，而不是調用時的 this。因此，在類中使用箭頭函數(shù)可以避免在方法中使用 bind 來綁定 this。

在調用構造函數(shù)時，未使用 new 關鍵字

在這種情況下，this 指向全局對象。這種情況下不會創(chuàng)建新的對象，而是改變了全局對象的狀態(tài)。

例如：

class MyClass {
  constructor() {
    this.value = 42;
  }
}

let obj = MyClass(); // without new keyword
console.log(obj); // undefined
console.log(value); // 42

因此，在使用構造函數(shù)創(chuàng)建對象時，需要確保使用 new 關鍵字來調用構造函數(shù)，否則可能會導致意外的結果。

在使用構造函數(shù)時特別需要注意使用 new 關鍵字來調用。

在對象的方法中使用箭頭函數(shù)會導致 this 指向問題

例如：

let obj = {
  value: 42,
  printValue: () => {
    console.log(this.value);
  }
};
obj.printValue(); // undefined

這種情況下，在 obj 對象的 printValue 方法中使用了箭頭函數(shù)，而箭頭函數(shù)的 this 指向是定義時的 this，而不是調用時的 this。在這種情況下，因為箭頭函數(shù)的 this 指向是定義時的 this，所以 this.value 指向的是 undefined，而不是 obj 對象中的 value。

解決這種問題可以使用箭頭函數(shù)的父級作用域中的 this，或者使用普通函數(shù)來解決。

例如：

let obj = {
  value: 42,
  printValue: function(){
    console.log(this.value);
  }
};
obj.printValue(); // 42

或者

let obj = {
  value: 42,
  printValue: () => {
    console.log(obj.value);
  }
};
obj.printValue(); // 42

在對象的方法中使用箭頭函數(shù)會導致 this 指向問題，需要特別注意?？梢允褂眉^函數(shù)的父級作用域中的 this 或者普通函數(shù)來解決。

總之，JavaScript 中的 this 關鍵字指向的上下文取決于函數(shù)的調用方式，需要根據(jù)不同的場景來選擇合適的方式來改變 this 的指向。

二、如何改變 this 上下文

可以通過 call, apply, bind 方法來改變 this 的上下文。

call 和 apply 方法允許您將函數(shù)的 this 指向指定的對象，并立即執(zhí)行該函數(shù)。

call 方法的語法格式如下：

functionName.call(thisArg, arg1, arg2, ...);

apply 方法的語法格式如下：

functionName.apply(thisArg, [arg1, arg2, ...]);

bind 方法允許您將函數(shù)的 this 指向指定的對象，但不立即執(zhí)行函數(shù)，而是返回一個新函數(shù)，可以在將來執(zhí)行。

let newFunc = functionName.bind(thisArg, arg1, arg2, ...);

例如:

let obj = {value: 42};

function printValue() {
  console.log(this.value);
}

printValue.call(obj); // 42
printValue.apply(obj); // 42
let boundFunc = printValue.bind(obj);
boundFunc(); // 42

總之，通過使用 call, apply, bind 方法，可以改變函數(shù)中的 this 指向，從而在不同的上下文中使用同一個函數(shù)。

到此這篇關于JavaScript 中 this 關鍵字的作用和如何改變其上下文的文章就介紹到這了,更多相關js this關鍵字作用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論