JavaScript中的this問(wèn)題超詳細(xì)總結(jié)
一、this的指向問(wèn)題
1、全局環(huán)境的this
在全局環(huán)境中（即不在任何函數(shù)內(nèi)部），this 指向全局對(duì)象：
- 在瀏覽器環(huán)境中，this 指向 window 對(duì)象。
console.log(this); // 瀏覽器環(huán)境中輸出 window
- 在 Node.js 環(huán)境中，this 指向 global 對(duì)象（但在嚴(yán)格模式下，this 是 undefined）。
"use strict"; console.log(this); // 輸出 undefined
2、對(duì)象方法中的this
當(dāng) this 出現(xiàn)在對(duì)象的方法中時(shí)，this 指向調(diào)用該方法的對(duì)象。
const obj = {
name: 'Alice',
sayName: function () {
console.log(this.name);
}
};
obj.sayName(); // 輸出 'Alice'
3、構(gòu)造函數(shù)中的 this
在構(gòu)造函數(shù)中，this 指向正在創(chuàng)建的實(shí)例對(duì)象。
function Person(name) {
this.name = name;
}
const person1 = new Person('Bob');
console.log(person1.name); // 輸出 'Bob'
4、箭頭函數(shù)中的this
箭頭函數(shù)不會(huì)創(chuàng)建自己的 this，它會(huì)捕獲其所在上下文的 this 值。
const obj = {
name: 'Alice',
sayName: function () {
const arrowFunc = () => {
console.log(this.name);
};
arrowFunc();
}
};
obj.sayName(); // 輸出 'Alice'
//箭頭函數(shù) arrowFunc 中的 this 繼承自 sayName 方法中的 this，即 obj
5、事件處理器中的 this
在 DOM 事件處理器中，this 默認(rèn)指向觸發(fā)事件的 DOM 元素
const button = document.querySelector('button');
button.addEventListener('click', function () {
console.log(this); // 指向 button 元素
});
如果使用箭頭函數(shù)作為事件處理器，this 將不再指向 DOM 元素，而是繼承自外部作用域的 this
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log(this); // 指向外部作用域的 this（可能是 window 或 undefined，取決于嚴(yán)格模式）
});
6、 類中的 this
在類中，this 的行為與構(gòu)造函數(shù)類似，指向當(dāng)前實(shí)例對(duì)象。
class Person {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}
const person = new Person('Dave');
person.sayName(); // 輸出 'Dave'
二、回調(diào)函數(shù)中的this問(wèn)題
this的指向在回調(diào)函數(shù)中會(huì)變得復(fù)雜，而this的指向問(wèn)題也主要集中于回調(diào)函數(shù)，因?yàn)榛卣{(diào)函數(shù)的this與上下文的調(diào)用有關(guān)，因此另開(kāi)一個(gè)章節(jié)重新進(jìn)行分析：
1、普通函數(shù)作為回調(diào)函數(shù)
當(dāng)普通函數(shù)被用作回調(diào)函數(shù)時(shí)，this的指向通常取決于調(diào)用該函數(shù)的對(duì)象，而不是定義它的對(duì)象。默認(rèn)情況下，this在非嚴(yán)格模式下指向全局對(duì)象（瀏覽器中是 window），在嚴(yán)格模式下指向 undefined。
function myCallback() {
console.log(this);
}
const obj = {
method: function() {
[1, 2, 3].forEach(myCallback); // myCallback 作為回調(diào)函數(shù)
}
};
obj.method();
// 輸出：
// 在非嚴(yán)格模式下，輸出 window（瀏覽器環(huán)境）
// 在嚴(yán)格模式下，輸出 undefined
2、對(duì)象方法作為回調(diào)函數(shù)
如果對(duì)象的方法被用作回調(diào)函數(shù)，this 通常不會(huì)指向該對(duì)象，除非顯式綁定。
const obj = {
name: 'Alice',
sayName: function() {
console.log(this.name);
}
};
[1, 2, 3].forEach(obj.sayName);
// 輸出：
// undefined（因?yàn)?this 不再指向 obj）
// 或者報(bào)錯(cuò)（如果 this.name 被訪問(wèn)且 this 是 undefined 或 window）
3、 事件處理器中的回調(diào)函數(shù)
在 DOM 事件處理器中，this默認(rèn)指向觸發(fā)事件的 DOM 元素。如果使用箭頭函數(shù)，this將繼承自外部作用域的 this。
const button = document.querySelector('button');
button.addEventListener('click', function() {
console.log(this); // 指向 button 元素
});
button.addEventListener('click', () => {
console.log(this); // 指向外部作用域的 this（可能是 window 或 undefined，取決于嚴(yán)格模式）
});
4、async 回調(diào)函數(shù)中的 this
在 async 函數(shù)或 Promise 的回調(diào)中，this 的指向與普通函數(shù)相同，取決于調(diào)用方式。
const obj = {
name: 'Alice',
fetchData: async function() {
const data = await new Promise((resolve) => {
setTimeout(() => {
resolve('Data fetched');
}, 1000);
});
console.log(this.name); // 這里的 this 需要正確綁定
}
};
// 使用箭頭函數(shù)或 bind 確保 this 指向 obj
obj.fetchData().then(() => {}); // 正常輸出 'Alice'
// 如果在另一個(gè)上下文中調(diào)用 fetchData，需要綁定 this
const fetch = obj.fetchData;
fetch.call(obj); // 或者使用 bind
三、改變this指向的方法
1、把關(guān)鍵字轉(zhuǎn)為變量
案例：
let xiaoming = {
age: 18,
introduce: function() {
setTimeout(function() {
console.log(this.age)
}, 1000)
}
}
xiaoming.introduce();
解決方案：
let xiaoming = {
age: 18,
introduce: function() {
let a = this; //用一個(gè)變量a來(lái)儲(chǔ)存
setTimeout(function() {
console.log(a.age) //此處變?yōu)檎{(diào)用a
}, 1000)
}
}
xiaoming.introduce();
2、綁定函數(shù)的this
案例：
class MyCom {
constructor() {
this.value = 100;
}
getValue() {
return this.value;
}
}
let mc = new MyCom();
console.log(mc.getValue()); // 結(jié)果: 100
如果修改為下面代碼：
class MyCom {
constructor() {
this.value = 100;
}
getValue() {
return this.value;
}
}
let btn = {
value: 200
}
let mc = new MyCom();
btn.getValue = mc.getValue;
console.log(btn.getValue()); // 結(jié)果: 200。因?yàn)檎{(diào)用者變?yōu)榱薭tn
如果希望函數(shù)永遠(yuǎn)指向MyCom的實(shí)例對(duì)象：
class MyCom {
constructor() {
this.value = 100;
this.getValue = this.getValue.bind(this);
}
getValue() {
return this.value; //此時(shí)this被鎖定為MyCom的實(shí)例對(duì)象
}
}
let btn = {
value: 200
}
let mc = new MyCom();
btn.getValue = mc.getValue;
console.log(btn.getValue()); // 結(jié)果: 100
bind方法的使用：每個(gè)函數(shù)本身都有一個(gè)bind方法，作用就是用來(lái)固定函數(shù)的this指向。其不會(huì)對(duì)函數(shù)本身進(jìn)行任何改造，實(shí)際上它會(huì)生成一個(gè)新的函數(shù)并返回（需要我們接收）如下：
function test() {
}
let newTest = test.bind(xiaoming);
newTest(); // this永遠(yuǎn)指向xiaoming
3、箭頭函數(shù)（上文有提過(guò)）
4、使用call/apply代替bind
案例：
在上面中使用bind太過(guò)繁瑣，可以使用call/apply解決問(wèn)題：
總結(jié)
到此這篇關(guān)于JavaScript中的this問(wèn)題的文章就介紹到這了,更多相關(guān)js this問(wèn)題總結(jié)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS實(shí)現(xiàn)拖拽元素時(shí)與另一元素碰撞檢測(cè)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖拽元素時(shí)與另一元素碰撞檢測(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
原生JS實(shí)現(xiàn)列表子元素順序反轉(zhuǎn)的方法分析
這篇文章主要介紹了原生JS實(shí)現(xiàn)列表子元素順序反轉(zhuǎn)的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)dom元素、數(shù)組reverse方法、innerHTML方法等列表元素順序翻轉(zhuǎn)相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
JavaScript實(shí)現(xiàn)可動(dòng)的canvas環(huán)形進(jìn)度條
這篇文章主要介紹了如何利用JavaScript canvas繪制一個(gè)可以動(dòng)的環(huán)形進(jìn)度條。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試2022-02-02
Javascript簡(jiǎn)單實(shí)現(xiàn)面向?qū)ο缶幊汤^承實(shí)例代碼
這篇文章主要介紹了Javascript簡(jiǎn)單實(shí)現(xiàn)面向?qū)ο缶幊汤^承實(shí)例代碼,簡(jiǎn)單分析了面向?qū)ο蟪绦蛟O(shè)計(jì)的特征與繼承的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
整理Javascript數(shù)組學(xué)習(xí)筆記
整理Javascript數(shù)組學(xué)習(xí)筆記,之前一系列的文章是跟我學(xué)習(xí)Javascript，本文就是進(jìn)一步學(xué)習(xí)javascript數(shù)組，希望大家繼續(xù)關(guān)注2015-11-11
js實(shí)現(xiàn)隨機(jī)點(diǎn)名程序
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
js/jquery遍歷對(duì)象和數(shù)組的方法分析【forEach，map與each方法】
這篇文章主要介紹了js/jquery遍歷對(duì)象和數(shù)組的方法,結(jié)合實(shí)例形式分析了數(shù)組遍歷的forEach，map與each方法常見(jiàn)使用技巧,需要的朋友可以參考下2019-02-02
分享10個(gè)常見(jiàn)的JavaScript前端手寫功能
javascript實(shí)現(xiàn)搶購(gòu)倒計(jì)時(shí)程序