在JavaScript的世界里，this 关键字可以说是既强大又让人头疼的存在。它就像一个调皮的小精灵，指向往往不是那么一目了然，如果使用不当，就会引发各种问题。下面咱们就来好好聊聊常见的 this 指向错误场景以及对应的修正办法。
一、this 指向的基本概念
在聊错误场景之前，咱得先知道 this 到底是怎么回事。简单来说，this 的指向是在函数调用的时候动态确定的，它的值取决于函数的调用方式，而不是定义方式。这就好比一个人在不同的场合会有不同的身份。来，看个简单的例子：
function sayHello() {
console.log(this);
// 默认情况下，在非严格模式中，全局作用域里的函数调用，this 指向全局对象（在浏览器中是 window）
}
sayHello(); // 直接调用函数，this 指向全局对象
这里的 sayHello 函数直接在全局作用域调用，所以 this 就指向了全局对象 window。但是要注意，在严格模式下，这种情况 this 会是 undefined。
二、常见的 this 指向错误场景
1. 全局作用域中的函数调用
刚刚提到了全局作用域里函数直接调用时 this 的指向问题。在全局作用域里，函数里的 this 通常指向全局对象。不过这在某些情况下可能就不是咱们想要的结果了。
var person = {
name: '张三',
sayName: function() {
function getFullName() {
console.log(this.name);
// 这里的 this 指向全局对象，因为 getFullName 是直接调用的，全局对象没有 name 属性，所以输出 undefined
}
getFullName();
}
};
person.sayName(); // 输出 undefined
在这个例子里，getFullName 函数直接在全局作用域里调用，它内部的 this 指向了全局对象，而全局对象并没有 name 属性，所以输出的就是 undefined。
2. 构造函数中的 this 问题
构造函数一般用来创建对象，正常情况下，this 应该指向新创建的对象。但要是构造函数里的方法调用不当，this 的指向就可能跑偏。
function Animal(name) {
this.name = name;
this.speak = function() {
setTimeout(function() {
console.log(this.name);
// 这里的 this 指向全局对象，因为 setTimeout 里的函数是全局作用域里调用的，所以输出 undefined
}, 1000);
};
}
var cat = new Animal('猫咪');
cat.speak(); // 一秒后输出 undefined
在这个例子中，setTimeout 里的函数是在全局作用域里调用的，所以 this 指向全局对象，而全局对象没有 name 属性，就输出了 undefined。
3. 方法作为回调函数传递
当把对象的方法作为回调函数传递时，this 的指向也可能会改变。
var button = {
text: '点击我',
clickHandler: function() {
console.log(this.text);
// 这里的 this 原本应该指向 button 对象，但作为回调传递后，this 可能指向全局对象或其他对象
}
};
// 模拟事件监听
function addClickListener(callback) {
callback();
// 这里调用回调函数，this 指向全局对象
}
addClickListener(button.clickHandler); // 输出 undefined
在这个例子中，button.clickHandler 作为回调函数传递给 addClickListener 并被调用，此时 this 指向全局对象，而全局对象没有 text 属性，所以输出 undefined。
三、修正 this 指向错误的方法
1. 使用 that 变量
这是一种比较简单直接的方法，就是在函数外部把 this 的值保存到一个变量里，然后在内部函数里使用这个变量。
var person = {
name: '李四',
sayName: function() {
var that = this;
// 把 this 的值保存到 that 变量里，此时 this 指向 person 对象
function getFullName() {
console.log(that.name);
// 使用 that 变量，输出李四
}
getFullName();
}
};
person.sayName(); // 输出李四
在这个例子里，把 this 的值保存到 that 变量中，然后在 getFullName 函数里使用 that，就可以正确访问 person 对象的 name 属性了。
2. 使用 bind 方法
bind 方法可以创建一个新的函数，在调用时 this 的值会被绑定到指定的值上。
function Animal(name) {
this.name = name;
this.speak = function() {
var boundFunction = function() {
console.log(this.name);
}.bind(this);
// 使用 bind 方法把 this 绑定到当前的 Animal 对象
setTimeout(boundFunction, 1000);
};
}
var dog = new Animal('狗狗');
dog.speak(); // 一秒后输出狗狗
在这个例子中，使用 bind 方法把 setTimeout 里的函数的 this 绑定到当前的 Animal 对象，这样就能正确输出 name 属性了。
3. 使用 箭头函数
箭头函数没有自己的 this，它的 this 是继承自外层函数的。
var person = {
name: '王五',
sayName: function() {
setTimeout(() => {
console.log(this.name);
// 箭头函数的 this 继承自 sayName 函数的 this，指向 person 对象
}, 1000);
}
};
person.sayName(); // 一秒后输出王五
在这个例子中，setTimeout 里使用了箭头函数，它的 this 继承自 sayName 函数的 this，也就是 person 对象，所以能正确输出 name 属性。
四、应用场景
1. 事件处理
在前端开发里，处理事件时经常会遇到 this 指向的问题。比如给按钮添加点击事件处理函数时，就可能需要修正 this 的指向。
var button = document.createElement('button');
button.textContent = '点我';
var obj = {
message: '按钮被点击了',
handleClick: function() {
console.log(this.message);
// 这里的 this 原本可能指向按钮元素，需要修正
}
};
button.addEventListener('click', obj.handleClick.bind(obj));
// 使用 bind 方法把 handleClick 函数的 this 绑定到 obj 对象
document.body.appendChild(button);
在这个例子中，使用 bind 方法把 handleClick 函数的 this 绑定到 obj 对象，这样点击按钮时就能正确输出 message 了。
2. 异步操作
在异步操作里，像 setTimeout 和 setInterval，this 的指向也容易出问题，这时候就可以用前面说的修正方法。
var user = {
name: '赵六',
showNameAfterDelay: function() {
setTimeout(() => {
console.log(this.name);
// 使用箭头函数，this 继承自 showNameAfterDelay 函数的 this，指向 user 对象
}, 2000);
}
};
user.showNameAfterDelay(); // 两秒后输出赵六
五、技术优缺点
优点
- 灵活性：
this的动态指向让函数可以在不同的上下文里复用，提高了代码的复用性。比如一个通用的函数可以在不同的对象里调用，根据不同的上下文指向不同的对象。 - 代码简洁：使用
this能让代码更简洁，避免重复传递对象引用。比如在对象的方法里直接使用this访问对象的属性，比每次都传递对象引用更方便。
缺点
- 难以理解：
this的指向是动态确定的，这就导致它的指向有时候很难预测，尤其是在复杂的代码里，容易引发错误。 - 调试困难：当
this指向错误时，调试起来比较麻烦，因为很难直观地看出this到底指向了哪里。
六、注意事项
- 严格模式：在严格模式下，
this的指向会有所不同。比如在全局作用域里直接调用函数，this会是undefined，而不是全局对象。所以要注意代码是否处于严格模式。 `
'use strict';
function test() {
console.log(this); // 输出 undefined
}
test();
- 箭头函数：箭头函数没有自己的
this，它的this是继承自外层函数的。所以在使用箭头函数时，要清楚它的this指向情况。如果需要改变this指向，使用箭头函数就不合适了。 bind方法：bind方法会创建一个新的函数，原函数不会受到影响。而且bind方法绑定的this是无法再次改变的。
七、文章总结
在 JavaScript 里，this 的指向问题是一个比较复杂但又非常重要的知识点。我们要清楚 this 的指向是在函数调用时动态确定的，而且不同的调用方式会导致不同的指向。常见的 this 指向错误场景包括全局作用域中的函数调用、构造函数中的问题以及方法作为回调函数传递等。我们可以通过使用 that 变量、bind 方法、箭头函数等方法来修正 this 的指向。在不同的应用场景，比如事件处理和异步操作中，要根据具体情况选择合适的修正方法。同时，我们也要注意严格模式、箭头函数和 bind 方法的使用规则，避免引发新的问题。只有掌握了这些，我们才能在 JavaScript 的开发中更加得心应手地使用 this 关键字。
评论