javascript this

其实学习javascript到现在已经有3年多的时间了,以前对js的了解也只是皮毛,最近一年才开始学习javascript的高级程序设计。我都是学习javascript的那部分就写那部分,所以顺序有点乱。接下来的日子我会把javascript高级程序部分一一的例举出来讲解,其实更多的应该说是记录,因为我还只是个小菜鸟,有讲得不对的地方还请各位多多指教。

今天我要记录的是javascript的this关键字,这个关键字既简单也复杂,复杂在于它的灵活。它的赋值是在运行期赋值,所以导致它的指向多变。以前我对javascript this的理解也很茫然。经过多次,多方面的查阅。基本上搞懂了这个神奇的this。

永远记住一句话,在Javascript中,This关键字永远都指向函数(方法)的所有者。以前我也怀疑过这句话,但是我现在相信了,把这句话搞清楚就知道this到底指向谁。

1.默认指向window。

var name="window";
alert(this.name); //弹出window ,因为this默认指向window,全局变量name又是window的属性,所以this.name弹出”window“。 function test(){ alert(this.name); //test属于全局函数,所以是window的方法,this指向函数所有者,也就是window。执行test(),弹出“window”。 }


2.直接在HTML页面标签中注册事件,把this当参数传人

//html
<input onclick="show(this)"  value="input-this" />

//javascript
var value="window";
function show(this){ alert(this.value); //因为this是在dom标签onclick属性中调用show()时传进来的,所以this指向input,弹出”input-this“
}


3.直接在HTML页面标签中注册事件,没有把this当参数传人

//html
<input onclick="show()"  value="input-this" />

//javascript
var value="window";
function show(){
    alert(this.value); //前面说了this默认指向window,所以此处弹出“window”,这与2.中例子不同的是this不是通过show()传进来的

}

4.采用dom方式注册事件

//html
<input id="show" onclick="show()"  value="input-this" />

//javascript
var value="window";

function show(){
    alert(this.value); 
}
var btn= document.getElementById("show").onclick=show;
//这样把show()赋值给了btn的click事件,this指向btn,弹出input-this

5.模拟面向对象,new一个构造函数

var name="window";

function P(){
    this.name="aaa";
}
var instence = new P();
alert(instence.name);//弹出"aaa",此处实例化了P这个构造函数,this指向实例,这个很好理解的

6.对于不是事件处理函数的场合, 我们可以使用apply或者call 来改变this关键字的指向。这是个特别的例子,this被人为的改变指向了。

var name="window";
var obj= {
     name : 'object'
};
 
function show() {
     alert(this.name);
}
 
show.call(obj);
或者
show.apply(obj);
//通过call或apply来改变函数的执行环境来改变this的执行,这儿弹出"object"。

7.闭包中的this,一般都是指向window。

这是经常用到的,当然javascript的this也是个很复杂的身份,不仅仅是这7条能表示完的。暂时掌握这几种就可以了。能理解的就理解,不能理解的就记住。

 

 

 

 

 

 

 

 

 

 

posted @ 2014-05-06 18:58  过眼云烟之活在当下  阅读(555)  评论(0编辑  收藏  举报