JavaScript 中的 this 關(guān)鍵字引用了所在函數(shù)正在被調(diào)用時的對象。在不同的上下文中，this 的指向會發(fā)生變化?？梢酝ㄟ^ call, apply, bind 方法來改變 this 的上下文。

一、this 關(guān)鍵字的作用

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

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

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

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

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

例如：

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

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

類的實例方法中的 this 默認(rèn)指向?qū)嵗旧?，類方法中?this 默認(rèn)指向類本身。

例如：

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)建是一種特殊的調(diào)用方式。在這種情況下，如果在對象的原型鏈上調(diào)用函數(shù)，則 this 指向該對象。

例如：

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

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

printValue.call(obj); // 42

這種情況下， obj 的原型鏈上有 value 屬性，所以調(diào)用 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，而不是調(diào)用時的 this。因此，在類中使用箭頭函數(shù)可以避免在方法中使用 bind 來綁定 this。

在調(diào)用構(gòu)造函數(shù)時，未使用 new 關(guān)鍵字

在這種情況下，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

因此，在使用構(gòu)造函數(shù)創(chuàng)建對象時，需要確保使用 new 關(guān)鍵字來調(diào)用構(gòu)造函數(shù)，否則可能會導(dǎo)致意外的結(jié)果。

在使用構(gòu)造函數(shù)時特別需要注意使用 new 關(guān)鍵字來調(diào)用。

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

例如：

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

這種情況下，在 obj 對象的 printValue 方法中使用了箭頭函數(shù)，而箭頭函數(shù)的 this 指向是定義時的 this，而不是調(diào)用時的 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ù)會導(dǎo)致 this 指向問題，需要特別注意?？梢允褂眉^函數(shù)的父級作用域中的 this 或者普通函數(shù)來解決。

總之，JavaScript 中的 this 關(guān)鍵字指向的上下文取決于函數(shù)的調(diào)用方式，需要根據(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ù)。

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

最新評論