深入理解JavaScript this指向：全局、对象、构造函数及闭包场景

JavaScript this关键字基础与全局上下文

本文通过具体实例深入分析JavaScript中this关键字的使用机制，旨在帮助读者理解其核心逻辑并应用于实际开发。

一、this的基本公理

根据基本规则，this关键字始终指向当前执行函数（或方法）的所有者。


function fn1(){
  this
};
fn1(); //this=>window
oDiv.onclick=fn1; //this=>oDiv
oDiv.onclick=function(){
  this //this=>oDiv
  fn1(); //this=>window
}


<div onclick="this.fn1();"></div> //这种行间脚本的写法现在非常罕见

在上述代码结构中，外层this指向div元素，而内部函数fn1()中的this则指向全局window对象。


var it=
{
  info:["腾讯","搜狐","新浪","百度"],
  getinfo:function()
  {
    alert(this.info.join(","));
  }
};
it.getinfo();

运行结果为：腾讯,搜狐,新浪,百度

函数赋值与对象方法调用中的this

二、函数赋值给变量时的this指向


var it=
{
  info:["腾讯","搜狐","新浪","百度"],
  getinfo:function()
  {
    alert(this.info.join(","));
  }
};
var data=it.getinfo;
data();

若直接调用赋值后的变量，通常会报错：TypeError: this.info is undefined

该情况的代码逻辑等价于以下形式：


var data=function(){
  alert(this.info.join(","));
};
data();

此时this指向window。若将赋值改为调用，即var data=it.getinfo();，则输出结果仍为：腾讯,搜狐,新浪,百度。同样，若使用alert(this.it.info.join(","));，输出结果不变。


var info=["QQ","sohu","sina","baidu"]
var it=
{
  info:["腾讯","搜狐","新浪","百度"],
  getinfo:function()
  {
    alert(this.info.join(","));
  }
};
var data=it.getinfo;
data();

运行结果为：QQ,sohu,sina,baidu

三、作为对象方法调用时的this指向


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

运行结果为：1

构造函数调用与闭包中的this陷阱

四、作为构造函数调用时的this指向


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

运行结果为：1


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

运行结果为：1,2

五、闭包中的this指向问题


var it=
{
  info:["腾讯","搜狐","新浪","百度"],
  getinfo:function()
  {
  function abc(){
    　　alert(this.info.join(","));
  }
  abc();
  }
};
it.getinfo();

在闭包内部直接调用时，通常会报错：TypeError: this.info is undefined

这是因为在闭包函数中，this无法正确指向外部对象it。

解决方法


var it=
{
  info:["腾讯","搜狐","新浪","百度"],
  getinfo:function()
  {
  var _this=this;
  function abc(){
      alert(_this.info.join(","));
  }
  abc();
  }
};
it.getinfo();

该方案的优点在于，无论外部函数名称（如it）如何变更，都能确保正确访问到info属性。

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述的this指向分析对大家深入理解JavaScript程序设计有所帮助。

JavaScript中this关键字的指向规则与实例解析

JavaScript this关键字基础与全局上下文

函数赋值与对象方法调用中的this

构造函数调用与闭包中的this陷阱

实用工具推荐