理解JavaScript关键字this

原文：Understanding JavaScript's this keyword

    几天前，我写了一篇关于面向方面的JavaScript的文章，说明了如何利用包装器来替换给定的函数或方法。为了全面地理解这一概念，正确理解JavaScript对其关键字“this”的处理是很有帮助的。如何在JavaScript各种各样的上下文中确定this指的是什么，本文将给出一个简单概要。

    让我们从下面 Bob 的例子开始：

var Bob = {
  name: "Bob",
  greet: function() {
    alert( "Hi, my name is " + this.name );
  }
};

    在这里，我们创建了一个拥有两个成员的Object实例,一个简单的字符name，和一个包含对name引用的方法greet，当执行 Bob.greet()方法时，greet()函数用Bob作为this的对象。现在，让我们来看看同样的Bob.greet()在新的对象上执行会如何：

var Alice = {
  name: "Alice",
  greet: Bob.greet
};

    考虑下面哪一个才是Alice.greet()的输出呢？

   1.  "Hi, my name is Bob", or
   2. "Hi, my name is Alice" 

    如果你选择的是“2”,对了！Bob的greet函数中“this.name”的直到函数真正执行时才会被解析，所以，当Alice.greet()被调用时，函数greet()的this被设置为了Alice。但是，如果调用函数本身，而不是作为某个对象的方法，会发生什么呢？看看下面这个：

var unboundGreet = Bob.greet;
unboundGreet();

    你预测函数unboundGreet()会输出什么呢？答案是“"Hi, my name is”。这是因为当一个未绑定的函数被调用时，“this”被设置为了全局对象window，而window.name并没有定义，所以就产生空字符。

    下面的例子你将会看到隐含的未绑定会令调试很头痛：

setTimeout( Bob.greet, 1000 ); // Call Bob.greet 1 second from now

    开发者可能希望Bob.greet()会在一秒后调用，它绑定到了Bob上就会输出“Hi, my name is Bob”，但是这种预期并没有出现，相反，这个greet()方法只能称为未绑定，其输出结果同unboundGreet()是一样的。下面这个等效的代码或许能更清楚地说明其中的原由：

var unboundGreet = Bob.greet;
setTimeout( unboundGreet, 1000 );

    在这里，很明显，在执行时间开始（一秒后）时，函数greet()是一个未绑定的。当你把一个对象的方法设为一个事件处理器时，相同情况也会发生。看看下面的HTML:

<a id="clickme" href="">Greetings!</a>

    添加如下的JavaScript:

document.getElementById("clickme").onclick = Bob.greet;

    可能我们预期这会触发链接输出“Hi, my name is Bob”，但当点击它时，结果又和调用unboundGreet()是一样的。
    解决隐含未绑定的问题方法就是创建一个函数，用它来包装无范围的方法（the bound method）。大多数JavaScript库都包含了这样的助手，多数时候是通过向Function.prototype添加一个bind方法来完成的。
    这里就不用这种方式，下面用一个简单的例子说明如何建仓这样的包装器（wrapper）。

var bobsGreet = function() {
  Bob.greet();
};

setTimeout( bobsGreet, 1000 );

    或者更简单一点，

setTimeout( function(){

  Bob.greet();

}, 1000 );

    这就是本文的全部内容了。

评论

2 楼 chenxiang105 2011-08-24  

希望除了多答点问题之余 多抽点时间写点好文章共享下..
我喜欢javaeye简洁的风格但是善于总结的人 貌似已经大多不再更新iteye了.

1 楼 geniuswxk 2011-08-22  

在将Bob.greet定义到其他变量时，如后面加()效果会和直接调用Bob.greet()效果一样，如

var Alice = {
  name: "Alice",
  greet: Bob.greet[color=darkred]()[/color]
};

这里面有什么玄机没？方法的定义和执行可以看成不同类型的变量不？