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指向定义它的对象