this指向剖析

以前学过Java,对this大概有个理解,也不难。现在来看看javascript中的this,那变化可是不少。本文主要说说几个经常应用到的例子,关于全局作用于和对象作用域的东东。

1.把this看成当前对象,是最常见到的用法,也是最容易理解的

如:

1 <input type="button" value="我是谁?" onclick="this.value='我是中国人!'" />

这里当按钮被触发时,this指向当前这个button对象。value值随之改变。

2.跟java一样,指向当前实例

如:

1 function Person(){
2
3   this.name = "我是中国人!";
4
5 }
6
7 var f = new Person();
8
9 alert(f.name);

这里的this指向当前的实例对象。

3.指向当前的对象直接量

如:

 1 var o = {
2   name:"我是对象直接量",
3
4   me:function(){
5
6     return this;
7
8   }
9
10 }
11
12 var newObj = o.me(); //这里调用me方法,返回this,也就是当前对象直接量o
13
14 alet(newObj.name);

 以上的都是this对象作用域的范畴,下面指出什么时候出现全局作用域的情况

1.普通函数的调用

细心的人会发现,所谓的f()只不过是window.f()的简写,所以this指的是全局对象window,因此alert(name)相当于alert(window.name);

这里稍稍修改一下,把f()换成new f();即实例化对象。则此时this则是指向当前实例对象。

原因是使用new运算符实例化函数f()后,则创建了一个新的对象,当前的作用域就不是全局作用域了,而是变回对象作用域。

2.对比第一个例子

改写下第一个例子为:

修改前:

<input type="button" value="我是谁?" onclick="this.value='我是中国人!'" />

修改后:

<input type="button" value="我是谁?" onclick="f()"  />

    
<script>

      
function f(){

        
this.value = "我是中国人!";

      }

    
</script>

运行后你会发现,按钮的value值没有变化,也就是说,这里使用直接调用函数的方法,this处于全局作用域中,仍然指向window对象。

再变形一下:

 1 <input type="button" value="我是谁?"  />
2
3       <script>
4
5         var btn = document.getElementsByTagName("input").[0];
6
7         btn.onclick = f;    //注意这里是f,而不是f()
8
9         function f(){
10
11           this.value = "我是中国人!";
12
13         }
14
15       </script>

惊喜出现了,this又重新变为对象作用域,指向当前按钮对象.

总结:

  1.引用后,再执行,作用域发生变化,this指向执行的对象

  2.直接调用执行,作用域保持不变,this指向定义它的对象

posted @ 2011-08-19 14:48  菜心作坊  阅读(345)  评论(0编辑  收藏  举报