JavaScript中this指向原理详解：谁调用指向谁

JavaScript中this指向原理详解：对象方法赋值后的this变化

JavaScript中的this究竟代表什么？网络上关于此话题的讨论层出不穷，但许多解释显得过于复杂。为了便于理解，这里给出一个简洁明确的定义。

this本质上是一个对象引用。具体指向哪个对象？规则很简单：谁调用了它，它就指向谁。

尽管许多技术文章已对此有所涉及，但部分解释仍显模糊。为了澄清概念，下面通过几个简单的对照实验来验证这一规则，帮助读者更清晰地理解。

建议读者根据提供的代码亲自复现以下实验过程。

对象内部调用时的this指向

首先观察以下代码片段：

//创建一个局部对象a
var a = {
 user:'小东',
 getName:function(){
  return this.user;//返回当前对象的user属性值
 }
}
//调用a的getName方法
alert(a.getName());

上述代码的执行结果是什么？答案是输出“小东”。这是因为在对象a内部调用this，即由a对象调用该方法。根据“谁调用它，它就指向谁”的原则，此时的this自然指向对象a。

方法赋值给外部变量后的this变化

接下来，在上述代码基础上增加一行赋值操作：

//创建一个局部对象a
var a = {
 user:'小东',
 getName:function(){
  return this.user;//返回当前对象的user属性值
 }
}
//调用a的getName方法
alert(a.getName());
//把局部对象的属性函数赋值给外面的变量out
var out = a.getName;
//调用out函数
alert(out());

根据实验结果，直接调用a.getName会输出“小东”。然而，如果将a.getName方法赋值给外部变量out，再调用out函数，结果会是什么？答案是undefined。为什么会返回undefined？请思考片刻。若能理解此处返回undefined的原因，说明你对this的理解已相当透彻。若仍感兴趣，可继续阅读后续内容。

暂不解释为何直接引用a对象的方法却得不到预期值，我们换个角度观察以下代码（逻辑与前述类似）：

//创建一个局部对象a
var a = {
 user:'小东',
 getName:function(){
 return 1;//这里我们不返回this，而是返回1
}
}
//调用a的getName方法
alert(a.getName());
//把局部对象的属性函数赋值给外面的变量out
var out = a.getName;
//调用out函数
alert(out());

这段代码看似简单。这里，a.getName方法不再返回this.user，而是直接返回数字1。此时再调用out函数，你认为会输出什么？结果不再是undefined，而是实实在在的数字1。这似乎有些矛盾：当a.getName返回this.user时，通过out引用得到undefined；而当它返回1时，通过out引用却能正常获取返回值。这是为何？

全局环境下的this指向验证

原因很简单。当调用外部全局变量out时，this指向的是out所在的对象，而非原对象a。在JavaScript全局环境中，声明的变量属于window对象。因此，当调用out时，this指向window。此时，函数out = a.getName = function(){return this.user;}中的this.user实际上等价于window.user。然而，全局环境中是否存在window.user属性？显然没有。因此，alert(window.user)必然返回undefined。为了验证这一点，我们进行如下实验：

//创建一个局部对象a
var a = {
 user:'小东',
 getName:function(){
  return this.user;//返回当前对象的user属性值
 }
}
//调用a的getName方法
alert(a.getName());
//把局部对象的属性函数赋值给外面的变量out
var out = a.getName;
//我们增加一个window.user的全局属性，看看再次调用out函数会输出什么
var window.user='window"s username';
//调用out函数
alert(out());

执行上述代码后，你会发现out函数输出的不再是undefined，而是“window's username”。这证明了当调用out时，this确实指向了window，同时也再次验证了“谁调用它，它就指向谁”这一核心定义。

若对JavaScript全局变量概念尚不清晰，可将上述代码替换为以下形式再次调用out，以便更直观地理解：

//创建一个局部对象a
var a = {
 user:'小东',
 getName:function(){
  return this.user;//返回当前对象的user属性值
 }
}
//调用a的getName方法
alert(a.getName());
//把局部对象的属性函数赋值给外面的变量out
var out = a.getName;
//此刻，我们增加一个user的变量，看看再次调用out函数会输出什么
var user='window"s username';
//调用out函数
alert(out());

此处不再显式使用window对象，而是统一使用var声明外部属性和函数。既然均使用var声明，它们应指向同一作用域对象。此时再次执行out函数，依然可以alert出“window's username”。至此，this的定义已非常明确：谁调用它，它就指向谁。

理解this本身并不困难，难点在于确定调用它的对象。只有找到调用this的具体对象，才能明确this的指向，因为this的定义正是“谁调用它，它就指向谁”。

以上就是本文的全部内容。希望这些内容能对您的学习或工作有所帮助，同时也感谢对本站的支持！