JavaScript 中 this 關鍵字的作用和如何改變其上下文

一、this 關鍵字的作用

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

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

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

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

在類的構造函數中，使用 new 關鍵字調用類時，this 指向新創建的對象。

例如：

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 方法創建對象

使用 Object.create 方法創建是一種特殊的調用方式。在這種情況下，如果在對象的原型鏈上調用函數，則 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 對象。

在類中使用箭頭函數

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

例如：

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

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

在調用構造函數時，未使用 new 關鍵字

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

例如：

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

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

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

在使用構造函數時特別需要註意使用 new 關鍵字來調用。

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

例如：

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

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

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

例如：

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

在對象的方法中使用箭頭函數會導致 this 指向問題，需要特別註意。可以使用箭頭函數的父級作用域中的 this 或者普通函數來解決。

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

二、如何改變 this 上下文

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

call 和 apply 方法允許您將函數的 this 指向指定的對象，並立即執行該函數。

call 方法的語法格式如下：

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

apply 方法的語法格式如下：

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

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

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 方法，可以改變函數中的 this 指向，從而在不同的上下文中使用同一個函數。