JavaScript中的this问题超详细总结
作者：言者非也
这篇文章主要介绍了JavaScript中this问题的相关资料,this的指向规则涵盖全局、对象方法、构造函数、箭头函数及事件处理中的上下文,文中通过代码介绍的非常详细,需要的朋友可以参考下
一、this的指向问题
1、全局环境的this
在全局环境中（即不在任何函数内部），this 指向全局对象：
- 在浏览器环境中，this 指向 window 对象。
console.log(this); // 浏览器环境中输出 window
- 在 Node.js 环境中，this 指向 global 对象（但在严格模式下，this 是 undefined）。
"use strict"; console.log(this); // 输出 undefined
2、对象方法中的this
当 this 出现在对象的方法中时，this 指向调用该方法的对象。
const obj = {
name: 'Alice',
sayName: function () {
console.log(this.name);
}
};
obj.sayName(); // 输出 'Alice'
3、构造函数中的 this
在构造函数中，this 指向正在创建的实例对象。
function Person(name) {
this.name = name;
}
const person1 = new Person('Bob');
console.log(person1.name); // 输出 'Bob'
4、箭头函数中的this
箭头函数不会创建自己的 this，它会捕获其所在上下文的 this 值。
const obj = {
name: 'Alice',
sayName: function () {
const arrowFunc = () => {
console.log(this.name);
};
arrowFunc();
}
};
obj.sayName(); // 输出 'Alice'
//箭头函数 arrowFunc 中的 this 继承自 sayName 方法中的 this，即 obj
5、事件处理器中的 this
在 DOM 事件处理器中，this 默认指向触发事件的 DOM 元素
const button = document.querySelector('button');
button.addEventListener('click', function () {
console.log(this); // 指向 button 元素
});
如果使用箭头函数作为事件处理器，this 将不再指向 DOM 元素，而是继承自外部作用域的 this
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log(this); // 指向外部作用域的 this（可能是 window 或 undefined，取决于严格模式）
});
6、 类中的 this
在类中，this 的行为与构造函数类似，指向当前实例对象。
class Person {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}
const person = new Person('Dave');
person.sayName(); // 输出 'Dave'
二、回调函数中的this问题
this的指向在回调函数中会变得复杂，而this的指向问题也主要集中于回调函数，因为回调函数的this与上下文的调用有关，因此另开一个章节重新进行分析：
1、普通函数作为回调函数
当普通函数被用作回调函数时，this的指向通常取决于调用该函数的对象，而不是定义它的对象。默认情况下，this在非严格模式下指向全局对象（浏览器中是 window），在严格模式下指向 undefined。
function myCallback() {
console.log(this);
}
const obj = {
method: function() {
[1, 2, 3].forEach(myCallback); // myCallback 作为回调函数
}
};
obj.method();
// 输出：
// 在非严格模式下，输出 window（浏览器环境）
// 在严格模式下，输出 undefined
2、对象方法作为回调函数
如果对象的方法被用作回调函数，this 通常不会指向该对象，除非显式绑定。
const obj = {
name: 'Alice',
sayName: function() {
console.log(this.name);
}
};
[1, 2, 3].forEach(obj.sayName);
// 输出：
// undefined（因为 this 不再指向 obj）
// 或者报错（如果 this.name 被访问且 this 是 undefined 或 window）
3、 事件处理器中的回调函数
在 DOM 事件处理器中，this默认指向触发事件的 DOM 元素。如果使用箭头函数，this将继承自外部作用域的 this。
const button = document.querySelector('button');
button.addEventListener('click', function() {
console.log(this); // 指向 button 元素
});
button.addEventListener('click', () => {
console.log(this); // 指向外部作用域的 this（可能是 window 或 undefined，取决于严格模式）
});
4、async 回调函数中的 this
在 async 函数或 Promise 的回调中，this 的指向与普通函数相同，取决于调用方式。
const obj = {
name: 'Alice',
fetchData: async function() {
const data = await new Promise((resolve) => {
setTimeout(() => {
resolve('Data fetched');
}, 1000);
});
console.log(this.name); // 这里的 this 需要正确绑定
}
};
// 使用箭头函数或 bind 确保 this 指向 obj
obj.fetchData().then(() => {}); // 正常输出 'Alice'
// 如果在另一个上下文中调用 fetchData，需要绑定 this
const fetch = obj.fetchData;
fetch.call(obj); // 或者使用 bind
三、改变this指向的方法
1、把关键字转为变量
案例：
let xiaoming = {
age: 18,
introduce: function() {
setTimeout(function() {
console.log(this.age)
}, 1000)
}
}
xiaoming.introduce();
解决方案：
let xiaoming = {
age: 18,
introduce: function() {
let a = this; //用一个变量a来储存
setTimeout(function() {
console.log(a.age) //此处变为调用a
}, 1000)
}
}
xiaoming.introduce();
2、绑定函数的this
案例：
class MyCom {
constructor() {
this.value = 100;
}
getValue() {
return this.value;
}
}
let mc = new MyCom();
console.log(mc.getValue()); // 结果: 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()); // 结果: 200。因为调用者变为了btn
如果希望函数永远指向MyCom的实例对象：
class MyCom {
constructor() {
this.value = 100;
this.getValue = this.getValue.bind(this);
}
getValue() {
return this.value; //此时this被锁定为MyCom的实例对象
}
}
let btn = {
value: 200
}
let mc = new MyCom();
btn.getValue = mc.getValue;
console.log(btn.getValue()); // 结果: 100
bind方法的使用：每个函数本身都有一个bind方法，作用就是用来固定函数的this指向。其不会对函数本身进行任何改造，实际上它会生成一个新的函数并返回（需要我们接收）如下：
function test() {
}
let newTest = test.bind(xiaoming);
newTest(); // this永远指向xiaoming
3、箭头函数（上文有提过）
4、使用call/apply代替bind
案例：
在上面中使用bind太过繁琐，可以使用call/apply解决问题：
总结
到此这篇关于JavaScript中的this问题的文章就介绍到这了,更多相关js this问题总结内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！