浅谈JavaScript中this的指向问题
在javascript中，this关键字的指向问题一直是比较困惑的一个问题，因为它的指向受到一定的影响。如果我们没有完全搞清楚this的指向规则，那么在使用this的时候可能会带来很多不方便和错误的情况。接下来让我们一起来浅谈一下javascript中this的指向问题。
this的指向规则
在javascript中，this的指向规则主要取决于函数的调用方式。一般来说，this指向几种情况：
- 当函数单独调用时，this指向全局对象（在浏览器环境中指向window对象）
function test() {
console.log(this);
}
test(); // 在浏览器环境中输出window对象
- 当函数作为对象的某个属性调用时，this指向该对象
var obj = {
name: 'Tom',
getName: function() {
console.log(this.name);
}
};
obj.getName(); // 输出Tom
- 当使用call、apply或bind等方法调用函数时，this指向call、apply或bind方法的第一个参数
var obj1 = {
name: 'Tom'
};
var obj2 = {
name: 'Jerry'
};
function test() {
console.log(this.name);
}
test.call(obj1); // 输出Tom
test.apply(obj2); // 输出Jerry
var test1 = test.bind(obj1);
test1(); // 输出Tom
注意：
- call和apply的区别在于传入参数的方式。
- call和apply的第一个参数是this要指向的对象，但是bind返回的是一个新函数，需要手动调用新函数才会执行。
- 当构造函数调用时，this指向新创建的对象
function Person(name) {
this.name = name;
}
var p1 = new Person('Tom');
console.log(p1.name); // 输出Tom
示例说明
接下来通过一些示例进一步说明this的指向规则。
示例1
var obj = {
name: 'Tom',
getName: function() {
console.log(this.name);
}
};
var getName = obj.getName;
getName(); // 输出undefined
在这个例子中，首先我们给obj对象定义了一个getName方法，该方法输出obj对象的name属性。然后我们将obj.getName赋值给了变量getName，并且调用了getName方法，结果控制台输出了undefined。
这是因为在javascript中，this的指向是根据函数被调用的方式来决定的。当我们将obj.getName赋值给变量getName时，getName的调用方式变为了单独调用（函数被直接调用）。因此，在getName函数中this指向了全局对象，即window对象。由于window对象并没有name属性，因此控制台输出了undefined。
示例2
var obj1 = {
name: 'Tom'
};
var obj2 = {
name: 'Jerry'
};
var getName = function() {
console.log(this.name);
};
var obj = {
name: 'Jack',
getName: getName
};
obj.getName(); // 输出Jack
obj.getName.call(obj1); // 输出Tom
obj.getName.call(obj2); // 输出Jerry
在这个例子中，我们定义了三个对象：obj1、obj2和obj。其中obj1和obj2分别有一个name属性，而obj有一个getName方法，该方法内部调用了getName函数。
首先我们调用obj的getName方法，输出结果为Jack，这是因为this指向了obj对象。
之后我们使用call方法来调用getName函数，并且将obj1和obj2分别作为第一个参数传入。当getName函数被call的时候，this指向了call方法的第一个参数obj1和obj2。因此，输出了Tom和Jerry。
总结
在javascript中，this指向的问题需要我们在实际编程中多加注意。只有掌握了this的指向规则，才能更好地使用它，避免出现各种莫名其妙的错误。