javascript的this关键字

 this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象。也即:谁调用,指向谁。切记…

1、普通函数中的this

无论this身处何处,第一要务就是要找到函数运行时的位置。

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

当this出现在全局环境的函数getName中时,此时函数getName运行时的位置在 alert(getName());

显然,函数getName所在的对象是全局对象,即window,因此this的安身之处定然在window。此时的this指向window对象,则getName返回的this.name其实是window.name,因此alert出来的是“全局”!

那么,当this不是出现在全局环境的函数中,而是出现在局部环境的函数中时,又会身陷何方呢?

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

其中this身处的函数getName不是在全局环境中,而是处在xpg环境中。无论this身处何处,一定要找到函数运行时的位置。此时函数getName运行时的位置  alert(xpg.getName());

显然,函数getName所在的对象是xpg,因此this的安身之处定然在xpg,即指向xpg对象,则getName返回的this.name其实是xpg.name,因此alert出来的是“局部”!

 举个例子巩固一下:

var someone = {
  name: "Bob",
  showName: function(){
    alert(this.name);
  }
};
 
var other = {
  name: "Tom",
  showName: someone.showName
}
 
other.showName();  //Tom

this关键字虽然是在someone.showName中声明的,但运行的时候是other.showName,所以this指向other.showName函数的当前对象,即other,故最后alert出来的是other.name。

 2、闭包中的this

 闭包也是个不安分子,本文暂且不对其过于赘述,简而言之:所谓闭包就是在一个函数内部创建另一个函数,且内部函数访问了外部的变量。
浪子this与痞子闭包混在一起,可见将永无宁日啊!

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

此时的this明显身处困境,竟然处在getName函数中的匿名函数里面,而该匿名函数又调用了变量name,因此构成了闭包,即this身处闭包中。
无论this身处何处,一定要找到函数运行时的位置。此时不能根据函数getName运行时的位置来判断,而是根据匿名函数的运行时位置来判断。

function (){
  return this.name;
};

显然,匿名函数所在的对象是window,因此this的安身之处定然在window,则匿名函数返回的this.name其实是window.name,因此alert出来的就是“全局”!

那么,如何在闭包中使得this身处在xpg中呢?—缓存this

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

在getName函数中定义that=this,此时getName函数运行时位置在 alert(xpg.getName());

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

在网上看了一些博主写的资料,感觉这位博主写的不错,在此做些简单的记录。

http://www.jb51.net/article/75097.htm

http://www.jb51.net/article/76933.htm

原文地址:https://www.cnblogs.com/phermis/p/7007622.html