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。
     //因此这句等价意思就是：dom元件.ButtonFun属性 = 对象clickFun
     this._domEle.ButtonFun = this;
 
     this._domEle.onclick = this.clickHandler;
 
 };
 clickFun.prototype.clickHandler = function(){
     //神奇的地方来了！ 这里，注意，注意，要做推论题了。
     //先回构造函数里。条件1：dom元件.ButtonFun属性 = 对象clickFun
     //再看下方代码，条件2：this引用已经易主成dom元件了！（好个朝三暮四的厮）
     //还观下方代码，条件3：this(dom元件).ButtonFun属性 注册给变量buttonObj
     //综上所述，由此推论出，变量buttonObj成为对象clickFun的引用了！
     var buttonObj = this.ButtonFun;
 
     //接下来发生的事情就是没悬念了 T_T
     var value = (buttonObj && buttonObj._value)?buttonObj._value:"unknown value";
     alert("value : "+value);
     //记住，这里this这厮已经是dom元件了
     alert("this.value : "+this.value);
 };
 
 
 window.onload = function(){
     new clickFun("赋给程序的值","bt");
 }

html代码如下：

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

测试按钮：click me