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