JavaScript中this关键字指向规则详解

JavaScript中this关键字指向规则详解

理解JavaScript中this的关键在于牢记一条原则：this始终指向函数执行时的上下文对象，而不是函数定义时的对象。

为了清晰掌握this的归属，我们将通过三种典型场景进行分析。

普通函数中的this指向

普通函数中的this指向

无论代码结构如何复杂，确定this身份的第一步永远是定位函数实际执行的位置。

1 var name="全局";
2 function getName(){
3 var name="局部";
4 return this.name;
5 };
6 alert(getName());

当this出现在全局作用域的函数getName中时，我们需要观察该函数被执行时的环境。

alert(getName());

显然，函数getName的执行上下文是全局对象，即window。因此，this指向window对象，getName返回的this.name实际上等同于window.name，所以alert弹出的结果是“全局”。

接下来探讨当this出现在非全局环境的函数中时，其指向会发生什么变化。

1 var name="全局";
2 var twobin={
3 name:"局部",
4 getName:function(){
5 return this.name;
6 }
7 };
8 alert(twobin.getName());

在此例中，函数getName并非处于全局环境，而是作为对象twobin的方法存在。确定this指向的关键依然在于找到函数运行时的位置。

alert(twobin.getName());

此时，函数getName的执行上下文是对象twobin。因此，this指向twobin对象，getName返回的this.name等同于twobin.name，alert弹出的结果是“局部”。

闭包中的this指向

闭包中的this指向

闭包机制较为特殊，这里简要说明：闭包是指在一个函数内部创建另一个函数，且内部函数能够访问外部函数的变量。

当this与闭包结合使用时，情况往往变得复杂。

1 var name="全局";
2 var twobin={
3 name:"局部",
4 getName:function(){
5 return function(){
6 return this.name;
7 };
8 }
9 };
10 alert(twobin.getName()());

此时的this处境较为特殊，它位于getName函数内部返回的匿名函数中。由于该匿名函数访问了外部变量name，从而构成了闭包，因此this处于闭包环境中。

确定this指向时，不能依据外层函数getName的执行位置，而必须依据内部匿名函数的执行位置。

function(){
return this.name;
};

显然，匿名函数的执行上下文是全局对象window。因此，this指向window，匿名函数返回的this.name等同于window.name，alert弹出的结果是“全局”。

那么，如何在闭包环境中让this正确指向外部对象twobin呢？

var name="全局";
var twobin={
name:"局部",
getName:function(){
var that=this;
return function(){
return that.name;
          };
      }
 };
alert(twobin.getName()());

在getName函数内部定义变量that并赋值为this。此时，由于getName的执行上下文是twobin对象，因此this指向twobin，进而that也指向twobin。在闭包的匿名函数中返回that.name，此时that.name等同于twobin.name，因此alert弹出的结果是“局部”。

alert(twobin.getName());

此时this指向twobin对象，因此that也指向twobin对象。在闭包的匿名函数中返回that.name，则此时返回的that.name其实是twobin.name，因此就可以alert出来 “局部”！

call与apply中的this指向

call与apply中的this指向

在JavaScript中，能够强制改变this指向的方法主要是call和apply。

call和apply类似于this的管理者，它们指定this指向哪个对象，this就必须指向该对象。

var name="全局";
var twobin={
name:"局部",
};
function getName(){
alert(this.name);
}
getName(twobin);
getName.call(twobin);

在此例中，this位于函数getName内部。确定this指向时，需观察函数的执行位置。

getName(twobin);

直接调用时，函数getName的执行上下文是全局对象window。因此，this指向window，getName返回的this.name等同于window.name，alert弹出的结果是“全局”。

接下来引入call和apply方法，因为this必须遵循它们的指令。

getName.call(twobin);

使用call方法指定this的执行上下文为twobin对象。由于this被强制指向twobin，此时this.name等同于twobin.name，因此alert弹出的结果是“局部”。

总结

关于this的指向规则可以概括为：this永远指向函数运行时所在的对象，而非创建时的对象；若处于匿名函数中或未绑定到任何对象，则this指向window对象；若使用call或apply方法，则this指向该方法指定的对象。