JavaScript中的this指针使用汇总

时间:2021-11-07 04:37:14

原文连接 http://www.blogjava.net/jjshcc/archive/2010/08/04/327935.html 

在Javascript里面,this指针代表的是执行当前代码的对象的所有者。

<script type="text/javascript">
  var name = "Kevin Yang";
  function sayHi(){
    alert("你好,我的名字叫" + this.name);
  }
  var person = {name:"Marry"};
  person.sayHello = sayHi;
  person.sayHello();
script>

  JavaScript中的this指针使用汇总

解释:判别this指针的指导性原则
在Javascript里面,this指针代表的是执行当前代码的对象的所有者。
在上面的示例中我们可以看到,第一次,我们定义了一个全局函数对象sayHi并执行了这个函数,函数内部使用了this关键字,那么执行this这行代码的对象是sayHi(一切皆对象的体现),sayHi是被定义在全局作用域中。其实在Javascript中所谓的全局对象,无非是定义在 window这个根对象下的一个属性而已。因此,sayHi的所有者是window对象。也就是说,在全局作用域下,你可以通过直接使用name去引用这个对象,你也可以通过window.name去引用同一个对象。因而this.name就可以翻译为window.name了。
再来看第二个this的示例。我们定义了一个person的对象,并定义了它的sayHello属性,使其指向sayHi全局对象。那么这个时候,当我们运行person.sayHello的时候,this所在的代码所属对象就是sayHello了(其实准确来说,sayHi和sayHello是只不过类似两个指针,指向的对象实际上是同一个),而sayHello对象的所有者就是person了。我们在定义person的时候加了name属性了,那么this.name指向的自然就是我们定义的字符串了。

理解了上面所说的之后,我们将上面最后一段示例改造成面向对象式的代码。

<script type="text/javascript">
  var name = "Kevin Yang";
  function sayHi(){
    alert("你好,我的名字叫" + this.name);
  }
  function Person(name){
    this.name = name;
  }
  Person.prototype.sayHello = sayHi;
  var marry = new Person("Marry"); 
  marry.sayHello();
  var kevin = new Person("Kevin");
  kevin.sayHello();
script>

JavaScript中的this指针使用汇总

当然这段代码并不能正确执行,但是它可以帮助你更好的理解这个过程。

当我们使用new关键字实例化一个“类”对象的时候,Javascript引擎会在这个对象内部定义一个新的对象并将其存入this指针。所有此对象内部用到this的代码实际上都是指向这个新的对象。如this.name = name,实际上是将参数中的name对象赋值给了这个新创建的对象。函数对象执行完之后Javascript引擎会将此对象返回给你,于是就有 marry变量得到的对象的name为“Marry”,而kevin变量得到的对象的name属性确实“Kevin”。

 容易误用的情况

示例1——内联式绑定Dom元素的事件处理函数

<script type="text/javascript">
  function sayHi(){
    alert("当前点击的元素是" + this.tagName);
  } 
script>
<input id="btnTest" type="button" value="点击我" onclick="sayHi()">在此例代码中,我们绑定了button的点击事件,期望在弹出的对话框中打印出点击元素的标签名。但运行结果却是:

 JavaScript中的this指针使用汇总

也就是this指针并不是指向input元素。这是因为当使用内联式绑定Dom元素的事件处理函数时,实际上相当于执行了以下代码:

<script type="text/javascript"> 
  document.getElementById("btnTest").onclick = function(){
    sayHi();
  }

script>在这种情况下sayHi函数对象的所有权并没有发生转移,还是属于window所有。用上面的指导原则一套我们就很好理解为什么this.tagName是undefined了。

那么如果我们要引用元素本身怎么办呢?

我们知道,onclick函数是属于btnTest元素的,那么在此函数内部,this指针正是指向此Dom对象,于是我们只需要把this作为参数传入sayHi即可。

<script type="text/javascript">
  function sayHi(el){
    alert("当前点击的元素是" + el.tagName);
  }
script>
<input id="btnTest" type="button" value="点击我" onclick="sayHi(this)">等价代码如下:

<script type="text/javascript">
  document.getElementById("btnTest").onclick = function(){
  
  sayHi(this);
  }
script>

 示例2——临时变量导致的this指针丢失

<script type="text/javascript">
  var Utility = {
    decode:function(str){
      return unescape(str);
    },
    getCookie:function(key){
      // ... 省略提取cookie字符串的代码
      var value = "i%27m%20a%20cookie";
      return this.decode(value);
    }
  };
  alert(Utility.getCookie("identity"))
script>我们在写稍微有点规模的Js库的时候,一般都会自己封装一个Utility的类,然后将一些常用的函数作为Utility类的属性,如客户端经常会用到的getCookie函数和解码函数。如果每个函数都是彼此独立的,那么还好办,问题是,函数之间有时候会相互引用。例如上面的getCookie函数,会对从document.cookie中提取到的字符串进行decode之后再返回。如果我们通过Utility.getCookie去调用的话,那么没有问题,我们知道,getCookie内部的this指针指向的还是Utility对象,而Utility对象时包含decode属性的。代码可以成功执行。

但是有个人不小心这样使用Utility对象呢?

<script type="text/javascript">
  function showUserIdentity(){
    // 保存getCookie函数到一个局部变量,因为下面会经常用到
    var getCookie = Utility.getCookie;
    alert(getCookie("identity"));
  }
  showUserIdentity();
script>这个时候运行代码会抛出异常“this.decode is not a function”。运用上面我们讲到的指导原则,很好理解,因为此时Utility.getCookie对象被赋给了临时变量getCookie,而临时变量是属于window对象的——只不过外界不能直接引用,只对Javascript引擎可见——于是在getCookie函数内部的this指针指向的就是window对象了,而window对象没有定义一个decode的函数对象,因此就会抛出这样的异常来。

这个问题是由于引入了临时变量导致的this指针的转移。解决此问题的办法有几个:

不引入临时变量,每次使用均使用Utility.getCookie进行调用
getCookie函数内部使用Utility.decode显式引用decode对象而不通过this指针隐式引用(如果Utility是一个实例化的对象,也即是通过new生成的,那么此法不可用)
使用Funtion.apply或者Function.call函数指定this指针
前面两种都比较好理解,第三种需要提一下。正是因为this指针的指向很容易被转移丢失,因此Javascript提供了两个类似的函数apply和call来允许函数在调用时重新显式的指定this指针。

修正代码如下:

<script type="text/javascript">
  function showUserIdentity(){
    // 保存getCookie函数到一个局部变量,因为下面会经常用到
    var getCookie = Utility.getCookie;
    alert(getCookie.call(Utility,"identity"));
    alert(getCookie.apply(Utility,["identity"]));
  }
  showUserIdentity();
script>call和apply只有语法上的差异,没有功能上的差别。

示例3——函数传参时导致的this指针丢失

我们先来看一段问题代码:

<script type="text/javascript">
  var person = {
    name:"Kevin Yang",
    sayHi:function(){
      alert("你好,我是"+this.name);
    }
  }
  setTimeout(person.sayHi,5000);
script>这段代码期望在访客进入页面5秒钟之后向访客打声招呼。setTimeout函数接收一个函数作为参数,并在指定的触发时刻执行这个函数。可是,当我们等了5秒钟之后,弹出的对话框显示的this.name却是undefined。

其实这个问题和上一个示例中的问题是类似的,都是因为临时变量而导致的问题。当我们执行函数的时候,如果函数带有参数,那么这个时候Javascript引擎会创建一个临时变量,并将传入的参数复制(注意,Javascript里面都是值传递的,没有引用传递的概念)给此临时变量。也就是说,整个过程就跟上面我们定义了一个getCookie的临时变量,再将Utility.getCookie赋值给这个临时变量一样。只不过在这个示例中,容易忽视临时变量导致的bug。

函数对象传参
对于函数作为参数传递导致的this指针丢失的问题,目前很多框架都已经有方法解决了。

Prototype的解决方案——传参之前使用bind方法将函数封装起来,并返回封装后的对象

<script type="text/javascript">
  var person = {
    name:"Kevin Yang",
    sayHi:function(){
      alert("你好,我是"+this.name);
    }
  }
  var boundFunc = person.sayHi.bind(person,person.sayHi);
  setTimeout(boundFunc,5000);
script>bind方法的实现其实是用到了Javascript又一个高级特性——闭包。我们来看一下源代码:

function bind(){
  if (arguments.length < 2 && arguments[0] === undefined)
    return this;
  var __method = this, args = $A(arguments), object = args.shift();
  return function(){
    return __method.apply(object, args.concat($A(arguments)));
  }
}
首先将this指针存入函数内部临时变量,然后在返回的函数对象中引用此临时变量从而形成闭包。

微软的Ajax库提供的方案——构建委托对象

<script type="text/javascript">
  var person = {
    name:"Kevin Yang",
    sayHi:function(){
      alert("你好,我是"+this.name);
    }
  } 
  var boundFunc = Function.createDelegate(person,person.sayHi);
  setTimeout(boundFunc,5000);
script>其实本质上和prototype的方式是一样的。

著名的Extjs库的解决方案采用的手法和微软是一样的。