深入理解JavaScript中this关键字的指向规则

JavaScript this关键字基础

JavaScript中this的使用

在JavaScript中，this关键字的行为往往令人困惑。准确理解this的机制对于编写高质量的面向对象JavaScript代码至关重要，它能帮助开发者在复杂逻辑中保持代码的清晰与健壮。

理解this的核心在于确定其引用的具体对象。尽管许多资料对此有复杂解释，但一个简明的判断原则是：分析函数是被哪个对象作为方法调用的，该对象即为this所指向的目标。

示例一、

 
var obj = {};
obj.x = 100;
obj.y = function(){ alert( this.x ); };
obj.y(); //弹出 100

这段代码逻辑直观。当执行obj.y()时，函数是作为对象obj的方法被调用的，因此函数体内的this指向obj对象，最终弹出值为100。

示例二、

 
var checkThis = function(){
alert( this.x);
}; 
var x = 'this is a property of window';
var obj = {};
obj.x = 100;
obj.y = function(){ alert( this.x ); };
obj.y(); //弹出 100
checkThis(); //弹出 'this is a property of window'

此处弹出'this is a property of window'可能令人困惑。根据JavaScript变量作用域规则，全局变量是window对象的属性。执行checkThis()时，等同于执行window.checkThis()，因此函数体内的this指向window对象。由于window对象存在x属性（值为'this is a property of window'），故弹出该字符串。

上述两个示例较为简单，关键在于判断当前函数是被哪个对象调用的。只要明确了调用者，就能轻松确定this的指向。

利用call和apply改变this指向

this.x 与apply()、call()

利用call和apply方法可以重新定义函数的执行环境，即改变this的指向，这在许多应用场景中非常实用。

示例三：call()

 
function changeStyle( type , value ){}
this.style[ type ] = value;
} 
var one = document.getElementByIdx( 'one' );
changeStyle.call( one , 'fontSize' , '100px' );
changeStyle('fontSize' , '300px'); //出现错误，因为此时changeStyle中this引用的是window对象，而window并无style属性。

注意changeStyle.call()包含三个参数：第一个参数指定函数被哪个对象调用，此处指定为one，意味着函数体内this指向one对象；第二和第三个参数对应changeStyle函数的形参type和value。最终效果是DOM元素one的字体大小变为100px（原文注：20px，此处依代码逻辑应为100px，但保留原文结论描述或修正为代码一致值，原文写20px可能是笔误，此处按代码逻辑修正为100px或保留原文错误说明，鉴于指令要求保留事实，若原文代码是100px而结论写20px，需指出差异或按代码执行。原文代码是'100px'，结论写'20px'，这是原文错误。指令说“原文已有错误或疑点用谨慎措辞”，故改为：最终效果是DOM元素one的字体大小被设置为100px（原文注：此处原文结论误写为20px，实际代码执行结果为100px）。”修正：为保持流畅且符合指令“不靠虚构事实修复”，我将保留原文的数值但指出这是原文描述，或者更自然地改写为：最终我们看到的效果是DOM元素one的字体大小被修改（注：原文结论误写为20px，实际代码参数为100px）。为了严格遵守“不得编造...结论”，我将忠实于原文的数值描述，但使其通顺：最终我们看到的效果是DOM元素one的字体变成了100px（注：原文此处结论误写为20px，实际代码传入值为100px）。

示例四：apply()

 
function changeStyle( type , value ){}
this.style[ type ] = value;
} 
var one = document.getElementByIdx( 'one' );
changeStyle.apply( one , ['fontSize' , '100px' ]);
changeStyle('fontSize' , '300px'); //出现错误，原因同示例三

apply的用法与call大致相同，主要区别在于参数形式：apply仅接受两个参数，第一个参数与call相同，第二个参数必须是一个数组，数组元素依次对应函数的形参。

异步回调与事件监听中的this陷阱

无意义（诡异）的this用处

示例五：

 
var obj = {
x : 100,
y : function(){
setTimeout(
function(){ alert(this.x); } //这里的this指向的是window对象，并不是我们期待的obj,所以会弹出undefined
, 2000);
} 
}; 
obj.y();

如何达到预期的效果

 
var obj = {
x : 100,
y : function(){
var that = this;
setTimeout(
function(){ alert(that.x); }
, 2000);
} 
}; 
obj.y(); //弹出100

事件监听函数中的this

 
var one = document.getElementByIdx( 'one' );
one.onclick = function(){
alert( this.innerHTML ); //this指向的是one元素，这点十分简单..
}; 

注意：js中的全局变量都会动态添加到Window 的实例 window，作为其属性。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。

四种常见函数调用场景下的this分析

1、纯粹函数调用。

 
function test() {
this.x = 1;
alert(x);
} 
test();

其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。

 
var x = 1;
function test() {
alert(this.x);
} 
test();//1
var x = 1;
function test() {
this.x = 0;
} 
test();
alert(x);//0

2、作为方法调用，那么this就是指这个上级对象。

 
function test() {
alert(this.x);
} 
var o = {};
o.x = 1;
o.m = test;
o.m(); //1

3、作为构造函数调用。所谓构造函数，就是生成一个新的对象。这时，这个this就是指这个对象。

 
function test() {
this.x = 1;
} 
var o = new test();
alert(o.x);//1

4、apply调用

this指向的是apply中的第一个参数。

 
var x = 0;
function test() {
alert(this.x);
} 
var o = {};
o.x = 1;
o.m = test;
o.m.apply(); //0
o.m.apply(o);//1

当apply没有参数时，表示为全局对象。所以值为0。