javascript里的this例子讲解

前两天给一朋友讲解javascript里的this怎么用，说了老半天要注意this所处的上下文关系，但就是没法理解。唉，也不怪他。javascript里的this有时候的确很让人揪心的，连我们这些经常写的人偶尔也会为之faint。后来，我被迫写了个小程序，绘声绘色外加严刑拷打终于解释清楚了。Oh，my GOD!整个人心情一下得到释放。I believe i can fly...

我干脆把例子放这里，加了详细的注释。应该说，这个例子是this变换角色最最基础的应用体现，权当是入门吧。高级玩家就不用看了，直接略过。

 1  function  clickFun(value,domEle){
 2       // 将参数传进来的值保存在当前对象属性_value里
 3       this ._value  =  value; 
 4 
 5       // 将对DOM元件的引用保存在当前对象属性_domEle里
 6       this ._domEle  =  document.getElementById(domEle);
 7 
 8       // this._domEle这时已经成为dom元件的引用。
 9       // 后面的纯this指代当前这个对象clickFun。
10       // 因此这句等价意思就是：dom元件.ButtonFun属性 = 对象clickFun
11       this ._domEle.ButtonFun  =   this ;
12 
13       this ._domEle.onclick  =   this .clickHandler;
14 
15  };
16  clickFun.prototype.clickHandler  =   function (){
17       // 神奇的地方来了！ 这里，注意，注意，要做推论题了。
18       // 先回构造函数里。条件1：dom元件.ButtonFun属性 = 对象clickFun
19       // 再看下方代码，条件2：this引用已经易主成dom元件了！（好个朝三暮四的厮）
20       // 还观下方代码，条件3：this(dom元件).ButtonFun属性 注册给变量buttonObj
21       // 综上所述，由此推论出，变量buttonObj成为对象clickFun的引用了！
22       var  buttonObj  =   this .ButtonFun;
23 
24       // 接下来发生的事情就是没悬念了 T_T
25       var  value  =  (buttonObj  &&  buttonObj._value) ? buttonObj._value: " unknown value " ;
26      alert( " value :  " + value);
27       // 记住，这里this这厮已经是dom元件了
28      alert( " this.value :  " + this .value);
29  };
30 
31 
32  window.onload  =   function (){
33       new  clickFun( " 赋给程序的值 " , " bt " );
34  }

html代码如下：

1  < button  type ="button"  value ="我是按钮的值"  id ="bt" > click me </ button >

测试按钮：click me