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

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

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

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

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

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

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

例如：

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

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

類的實(shí)例方法中的 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)建對(duì)象

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

例如：

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

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

printValue.call(obj); // 42

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

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

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

例如：

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

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

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

在這種情況下，this 指向全局對(duì)象。這種情況下不會(huì)創(chuàng)建新的對(duì)象，而是改變了全局對(duì)象的狀態(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)建對(duì)象時(shí)，需要確保使用 new 關(guān)鍵字來(lái)調(diào)用構(gòu)造函數(shù)，否則可能會(huì)導(dǎo)致意外的結(jié)果。

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

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

例如：

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

這種情況下，在 obj 對(duì)象的 printValue 方法中使用了箭頭函數(shù)，而箭頭函數(shù)的 this 指向是定義時(shí)的 this，而不是調(diào)用時(shí)的 this。在這種情況下，因?yàn)榧^函數(shù)的 this 指向是定義時(shí)的 this，所以 this.value 指向的是 undefined，而不是 obj 對(duì)象中的 value。

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

例如：

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

在對(duì)象的方法中使用箭頭函數(shù)會(huì)導(dǎo)致 this 指向問(wèn)題，需要特別注意。可以使用箭頭函數(shù)的父級(jí)作用域中的 this 或者普通函數(shù)來(lái)解決。

總之，JavaScript 中的 this 關(guān)鍵字指向的上下文取決于函數(shù)的調(diào)用方式，需要根據(jù)不同的場(chǎng)景來(lái)選擇合適的方式來(lái)改變 this 的指向。

二、如何改變 this 上下文

可以通過(guò) call, apply, bind 方法來(lái)改變 this 的上下文。

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

call 方法的語(yǔ)法格式如下：

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

apply 方法的語(yǔ)法格式如下：

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

bind 方法允許您將函數(shù)的 this 指向指定的對(duì)象，但不立即執(zhí)行函數(shù)，而是返回一個(gè)新函數(shù)，可以在將來(lái)執(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

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

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

最新評(píng)論