代码改变世界

我的JavaScript之旅——this到底是啥?

2010-09-25 22:17  菜阿彬  阅读(3344)  评论(19编辑  收藏  举报

  下图是在ASP.NET中为button挂上客户端onclick事件的两种办法:图中的2和3/1。 结果发现两种方式调用同样一个函数clickMe,this却不一样。  

  如果采用3或1的做法,那么点击button1后将alert出[object DOMWindow];而采用2的做法,将alert出 [object HTMLInputElement](在chrome下测试。)

  显然,在1的做法中,this指向DOMWindow,也就是全局的object——global;而2的做法中,this指向Button1这个元素。

  为什么呢?

  (注:对于3这种通过Attribute来声明处理程序的方式,button的onclick不是指向clickMe函数,而是指向一个被自动创建的匿名函数,该匿名函数以Attribute的值(也就是"clickMe();")作为函数体——也就是等价于1。)

简单的答案

  基于类的OO语言(比如C#)中,函数总是声明在一个类中,函数内部的this指向该类的当前实例。而JS中,函数是第一等公民(它不会声明为别的东西的一部分),所以this跟函数是如何声明的无关,跟函数是怎么被调用的有关。

  方式1和2对clickMe的调用,不同之处在于:1中clickMe是被button1.onclick所指向的函数调用的,2中clickMe是作为button1.onclick属性直接调用的。因此对于clickMe函数,1中的this指向“拥有”clickMe函数的对象——global(DOMWindow),而2中的this指向“拥有”onclick属性的对象——button1。

  可惜对像我这种写JS写的不多的人来说,总是记不住这个简单答案,因为它只告诉我what,没有告诉我why。本文试图从ECMAScript官方文档出发,从原理上说明:在不同的场合中,函数的this到底是什么?

 

call和apply

  首先明确一点,在最正常的情况下,我们这样调用:Func(),这时this是由JavaScript来确定的,这也是本篇要研究的主题。而如果用Func.call(thisArg,  arg1, arg2, ...)或者Func.apply(thisArg, [arg1, arg2, ...])来调用时,this是我们自己传进去的(作为call或apply的第一个参数)。如果我们不传this进去,或者传null进去,会怎样?这时this将会是global object。

  

函数作为构造器时的this

  先从简单的说起。所谓构造器,就是用new关键字来调用函数,在这篇关于new关键字的玄机的文章中有说到。看下面的注释,可以知道,A函数里的this这时就是a。

function A() {this.x = 1;}


var a = new A(); //这行代码大概等价于下面两行
 

var a = {}; // a指向一个新创建的对象。
A.call(a); //再把a作为第一个参数传给A.call函数。

 

普通调用时的this

  看下图,对于在全局定义的函数A,this就是global。

  

  这个好理解,A作为顶级函数,是顶级对象global(也就是window)的属性,所以this === global。但看下图:

  

  Outer()返回inner函数,Outer()()就是是对inner的调用,在inner内部,this同样等于global。可是inner函数是执行Outer时,在Outer的context下创建起来的,inner并不是global的属性(见下图)。为什么inner里的this仍旧是global?一个函数被调用时,this究竟是怎么确定的?

  

 

官方文档对this的解释

  上面第1个例子,当执行A()时,这里说明了函数被调用时发生的事情,简述如下:

    1,  得到A这个引用。

    2, 求A的值,就是A这个函数对象。

    3, A的值必须是object,并且必须有[[Call]]方法。(当然,它是函数型object,函数被创建时都有[[Call]]方法。)

    4, 如果A是个引用(是),那么通过GetBase()得到A所在的对象,就是包含有A属性的对象(在我们例子中就是global)

    5, 检查上面步骤中A所在的对象。如果是个activation object(就是variable object,scope chain里的对象),则把null作为thisArg传给A.call();否则就把该对象作为thisArg。

  重点就是这第5步(需要对variable object熟悉,否则请先阅读这篇文章),执行A()时,global里有A属性,而global是global context下的activation object,所以将会把null作为thisArg参数传给A.call()。而上文说了,如果传的thisArg参数为null,则会把global作为this。所以gloabl === this还不是天生就这样,还转了下弯。

  对于第2个例子,Outer()(),也就好解释了:因为Outer()返回的inner函数是在OuterContext中创建为OuterVariableObject的属性,所以第4步得到的对象是OuterVariableObject;那么根据第5步逻辑,仍旧把null作为thisArg传给inner.call()。因此inner里的this也同样是global。

 

把函数作为对象的属性值

  所以,如果直接调用函数,无论这个函数是在哪个执行上下文被创建,this都指向global。除非“拥有”这个函数的对象不是一个variable object,它才会被当做this。那么很简单,我们把函数作为我们自己创建的对象(非variable object)的属性值,然后再调用,那么this就应该是这个我们创建的对象了。验证如下:

  

回过头看文章开头的问题:

方式1是这样调用的:Button1.onclick(clickMe();),clickMe是global的属性,因此clickMe里的this指向global。

方式2是这样调用的:Button1.onclick(),onclick是Button1的属性,因此里面的this指向Button1。

简言之,onclick和clickMe都是对真正的函数object的引用,只不过通过GetBase()得到的“所属对象”不同,this自然也就不同了。

 

阶段性结语

  我的JavaScript之旅先告一段落了(快写吐了),5篇文章写下来,至少自己收获不少,下次面人的时候,终于可以问点JS的东西了。

  this, scope chain, prototype chain, constructor, closure,这些都是学习JavaScript必须懂的东西,每本JS的书都会对这些概念进行描述,我看过几篇,都是讲what,就是要你死记硬背,或者多写JS,熟能生巧才行。没有看到一篇讲why的。而我把这5篇写why的博文写完,再看那些书籍上的描述,真有一览众山小的感觉,哈哈。

  至于对这些概念的运用,就需要多写多看JS代码了,不想写那样的文章了。JS告一段落,要研究别的东西去了。FubuMVC、Ruby on Rails、CQRS……