摆脱this指向困扰，深入浅出JavaScript中this的指向规则
2023-10-20 17:16:25
在广阔的JavaScript世界中，this常常作为引发开发人员无尽困扰和争论的核心。这个看似简单的，却在不同的代码块和执行上下文中扮演着截然不同的角色。为了拨开层层迷雾，深入理解this指向的奥秘，我们需要从JavaScript的基本原理入手。
一、this的基本概念
this代表当前正在执行代码的上下文对象。它可以是一个对象、函数、数组或其他类型。当一个函数被调用时，this将自动指向调用该函数的对象。例如：
var obj = {
name: "Cherry",
fn: function () {
console.log(this.name); // "Cherry"
},
};
obj.fn(); // "Cherry"
在本例中，当调用对象 obj 的方法 fn 时，this 指向对象 obj 本身，因此打印的值为 "Cherry"。
二、箭头函数this的指向
箭头函数是一种ES6中引入的新型函数语法，它没有自己的this，而是继承父级作用域的this。这意味着箭头函数中的this始终指向调用它的上下文对象，而不是箭头函数本身。
var obj = {
name: "Cherry",
fn: () => {
console.log(this.name); // undefined
},
};
obj.fn(); // undefined
在本例中，箭头函数 fn 没有自己的this，而是继承了父级作用域（对象 obj）的this。由于对象 obj 没有name属性，因此打印的值为undefined。
三、对象方法this的指向
对象方法中的this指向该对象本身。当以对象的方式调用函数时，this将指向该对象。
var obj = {
name: "Cherry",
fn: function () {
console.log(this.name); // "Cherry"
},
};
obj.fn(); // "Cherry"
在本例中，对象 obj 调用方法 fn 时，this指向对象 obj 本身，因此打印的值为 "Cherry"。
四、调用this的特殊情况
除了上述常规情况，还有一些特殊情况下，this的指向也会发生变化。
- 隐式绑定
当一个函数作为回调函数被调用时，this将指向调用它的对象。例如：
function greet(name) {
console.log(`Hello, ${name}!`);
}
const btn = document.querySelector('button');
btn.addEventListener('click', greet); // "Hello, undefined!"
在本例中，greet函数作为回调函数被按钮 btn 调用，因此this指向按钮 btn 本身。由于按钮 btn 没有name属性，因此打印的值为 "Hello, undefined!"。
- 显式绑定
可以通过bind()方法显式地绑定函数的this。bind()方法接受两个参数：第一个参数是this要绑定的对象，第二个参数是函数参数。例如：
function greet(name) {
console.log(`Hello, ${name}!`);
}
const btn = document.querySelector('button');
const boundGreet = greet.bind(btn);
btn.addEventListener('click', boundGreet); // "Hello, Cherry!"
在本例中，我们使用bind()方法将greet函数的this绑定到按钮 btn 上，因此当按钮 btn 被点击时，this将指向按钮 btn 本身。由于按钮 btn 有name属性，因此打印的值为 "Hello, Cherry!"。
- new关键字
当使用new关键字调用函数时，this将指向新创建的对象。例如：
function Person(name) {
this.name = name;
}
const cherry = new Person('Cherry');
console.log(cherry.name); // "Cherry"
在本例中，使用new关键字调用Person函数，创建一个新的Person对象。this指向新创建的对象cherry，因此打印的值为 "Cherry"。
五、结语
this的指向问题是JavaScript中一个非常重要的概念，理解和掌握this的指向规则对于写出高质量的代码至关重要。在本文中，我们对this的基本概念、箭头函数this的指向、对象方法this的指向以及调用this的特殊情况进行了详细的讲解。希望这些知识能够帮助您在实际开发中更好地理解和应用this，并编写出更加优雅和可维护的代码。
