JavaScript中的this

this是JavaScript中一個特殊關鍵字，用于指代當前執行上下文中的對象。它的難以理解之處就是值不是固定的，是再函數被調用時根據調用場景動態確定的，主要根據函數的調用方式來決定this指向的對象。this 的值在函數被調用時動態確定，以下是幾種常見的情況：

1. 全局上下文中：
   當在全局作用域中調用函數時，this 指向全局對象。在瀏覽器環境中，這個全局對象是 window 對象。

   console.log(this); // 在瀏覽器中，輸出為 Window 對象
   

2. 函數作為對象的方法：
   當函數作為對象的方法被調用時，this 指向調用該方法的對象。

   const obj = {property: 'value',printProperty: function() {console.log(this.property);}
   };obj.printProperty(); // 輸出 'value'
   

3. 構造函數中：
   在使用 new 關鍵字創建實例時，構造函數內部的 this 指向即將創建的新實例。

   function Person(name) {this.name = name;
   }const person = new Person('Alice');
   console.log(person.name); // 輸出 'Alice'
   

4. 顯式綁定：
   使用call、apply、bind方法可以顯式指定this的綁定對象。

function greet(message) {console.log(`${message}, ${this.name}!`);
}const person = { name: 'Bob' };greet.call(person, 'Hello'); // 輸出 'Hello, Bob!'

5. 箭頭函數：
   箭頭函數不綁定this,它會捕獲外層作用域的this值作為自己的this。

const obj = {method: function() {const arrowFunc = () => {console.log(this === obj);};arrowFunc();}
};obj.method(); // 輸出 true

6. class中的this：
   類中的this默認指向類的實例對象。

class Rectangle {constructor(width, height) {this.width = width;this.height = height;}
}const rect = new Rectangle(10, 20);
console.log(rect.width); // 輸出 10

7. 事件綁定
   事件綁定中的this是指向觸發事件的dom元素。

const button = document.getElementById('myButton');button.addEventListener('click', function() {console.log(this === button);
});
// 在按鈕點擊時輸出 true

如何改變this指向

改變 this 指向是在 JavaScript 中常見的需求，特別是當你想要在不同的上下文中調用函數時。以下是幾種常見的方法來改變 this 指向：

1. 使用 call 方法：
   call 方法允許你顯式地指定函數內部的 this 值，并且傳遞參數列表。第一個參數是要綁定的 this 值，后面的參數是函數的參數。

   function greet(message) {console.log(`${message}, ${this.name}!`);
   }const person = { name: 'Alice' };greet.call(person, 'Hello'); // 輸出 'Hello, Alice!' 這里把this綁定給person對象
   

2. 使用 apply 方法：
   apply 方法與 call 類似，但它接受一個數組或類數組對象作為參數，其中的元素將作為函數參數傳遞。

   function greet(message) {console.log(`${message}, ${this.name}!`);
   }const person = { name: 'Bob' };greet.apply(person, ['Hi']); // 輸出 'Hi, Bob!'
   

3. 使用 bind 方法：
   bind 方法創建一個新函數，將 this 值永久地綁定，并可以預先設置部分參數。原函數不會受到影響。

   function greet(message) {console.log(`${message}, ${this.name}!`);
   }const person = { name: 'Charlie' };
   const greetPerson = greet.bind(person);greetPerson('Hey'); // 輸出 'Hey, Charlie!'
   

4. 使用箭頭函數：
   箭頭函數不會綁定獨立的 this 值，而是捕獲其外部函數的 this 值。

   const obj = {method: function() {const arrowFunc = () => {console.log(this === obj);};arrowFunc();}
   };obj.method(); // 輸出 true
   

call和apply區別

1. bind 方法：

   • bind 方法創建一個新函數，將原函數的 this 值永久綁定到指定的對象，并可以在調用時傳遞參數。
   • 它不會立即執行原函數，而是返回一個新的函數，需要手動調用新函數以執行原函數。
   • bind 方法不會改變原函數的上下文，而是返回一個新函數。

2. call 方法：

   • call 方法立即調用函數，并指定函數內部的 this 值，同時可以傳遞參數列表。
   • 它的第一個參數是要綁定的 this 值，后續的參數會作為函數的參數傳遞。

3. apply 方法：

   • apply 方法也立即調用函數，并指定函數內部的 this 值，但參數傳遞方式不同。
   • 它的第一個參數是要綁定的 this 值，第二個參數是一個數組（或類數組對象），其中的元素會作為函數的參數傳遞。

實現call、apply、bind

這里實現簡化版的，核心思路是:

1. 將函數設為傳入對象的一個屬性
2. 執行該函數
3. 刪除該函數（臨時函數調用完成刪除，防止內存泄漏，以免context 對象造成污染）
4. 返回結果或傳入的this

call

js
Function.prototype.myCall = function(context, ...args) {context = context || window;const fn = Symbol();context[fn] = this;const result = context[fn](...args);delete context[fn];return result;
}

apply

js
Function.prototype.myApply = function(context, args) {context = context || window;const fn = Symbol();context[fn] = this;let result;if(args) {result = context[fn](...args);} else {result = context[fn]();}delete context[fn];return result;
}

bind

js
Function.prototype.myBind = function(context, ...outerArgs) {context = context || window;const _this = this;return function(...innerArgs) {context[fn] = _this;const result = context[fn](...outerArgs, ...innerArgs);delete context[fn];return result;}
}