JavaScript中的this指向，call、apply、bind的簡單實現
作者：cqhly
this是JavaScript中一個特殊關鍵字，用于指代當前執行上下文中的對象。它的難以理解之處就是值不是固定的，是再函數被調用時根據調用場景動態確定的，主要根據函數的調用方式來決定this指向的對象。
JavaScript中的this
this是JavaScript中一個特殊關鍵字，用于指代當前執行上下文中的對象。它的難以理解之處就是值不是固定的，是再函數被調用時根據調用場景動態確定的，主要根據函數的調用方式來決定this指向的對象。this 的值在函數被調用時動態確定，以下是幾種常見的情況：
- 全局上下文中：當在全局作用域中調用函數時，this 指向全局對象。在瀏覽器環境中，這個全局對象是 window 對象。
console.log(this); // 在瀏覽器中，輸出為 Window 對象- 函數作為對象的方法：當函數作為對象的方法被調用時，this 指向調用該方法的對象。
const obj = {
property: 'value',
printProperty: function() {
console.log(this.property);
}
};
obj.printProperty(); // 輸出 'value'- 構造函數中：在使用 new 關鍵字創建實例時，構造函數內部的 this 指向即將創建的新實例。
function Person(name) {
this.name = name;
}
const person = new Person('Alice');
console.log(person.name); // 輸出 'Alice'- 顯式綁定：使用call、apply、bind方法可以顯式指定this的綁定對象。
function greet(message) {
console.log(`${message}, ${this.name}!`);
}
const person = { name: 'Bob' };
greet.call(person, 'Hello'); // 輸出 'Hello, Bob!'- 箭頭函數：箭頭函數不綁定this,它會捕獲外層作用域的this值作為自己的this。
const obj = {
method: function() {
const arrowFunc = () => {
console.log(this === obj);
};
arrowFunc();
}
};
obj.method(); // 輸出 true- 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- 事件綁定事件綁定中的this是指向觸發事件的dom元素。
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log(this === button);
});
// 在按鈕點擊時輸出 true如何改變this指向
改變 this 指向是在 JavaScript 中常見的需求，特別是當你想要在不同的上下文中調用函數時。以下是幾種常見的方法來改變 this 指向：
- 使用 call 方法：call 方法允許你顯式地指定函數內部的 this 值，并且傳遞參數列表。第一個參數是要綁定的 this 值，后面的參數是函數的參數。
function greet(message) {
console.log(`${message}, ${this.name}!`);
}
const person = { name: 'Alice' };
greet.call(person, 'Hello'); // 輸出 'Hello, Alice!' 這里把this綁定給person對象- 使用 apply 方法：apply 方法與 call 類似，但它接受一個數組或類數組對象作為參數，其中的元素將作為函數參數傳遞。
function greet(message) {
console.log(`${message}, ${this.name}!`);
}
const person = { name: 'Bob' };
greet.apply(person, ['Hi']); // 輸出 'Hi, Bob!'- 使用 bind 方法：bind 方法創建一個新函數，將 this 值永久地綁定，并可以預先設置部分參數。原函數不會受到影響。
function greet(message) {
console.log(`${message}, ${this.name}!`);
}
const person = { name: 'Charlie' };
const greetPerson = greet.bind(person);
greetPerson('Hey'); // 輸出 'Hey, Charlie!'- 使用箭頭函數：箭頭函數不會綁定獨立的 this 值，而是捕獲其外部函數的 this 值。
const obj = {
method: function() {
const arrowFunc = () => {
console.log(this === obj);
};
arrowFunc();
}
};
obj.method(); // 輸出 truecall和apply區別
- bind 方法：
- bind 方法創建一個新函數，將原函數的 this 值永久綁定到指定的對象，并可以在調用時傳遞參數。
- 它不會立即執行原函數，而是返回一個新的函數，需要手動調用新函數以執行原函數。
- bind 方法不會改變原函數的上下文，而是返回一個新函數。
- call 方法：
call 方法立即調用函數，并指定函數內部的 this 值，同時可以傳遞參數列表。
它的第一個參數是要綁定的 this 值，后續的參數會作為函數的參數傳遞。
apply 方法：
apply 方法也立即調用函數，并指定函數內部的 this 值，但參數傳遞方式不同。
它的第一個參數是要綁定的 this 值，第二個參數是一個數組（或類數組對象），其中的元素會作為函數的參數傳遞。
實現call、apply、bind
這里實現簡化版的，核心思路是:
- 將函數設為傳入對象的一個屬性
- 執行該函數
- 刪除該函數（臨時函數調用完成刪除，防止內存泄漏，以免context 對象造成污染）
- 返回結果或傳入的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;
}
}責任編輯：武曉燕
來源：
海燕技術棧
