Javascript基础知识之this篇

介绍这方面的文章也有一些,我这里打算以一个demo来说明一下,也是基于prototype进行编写,javascript中的this看起来会和java中的this有些不同。
一个简单的测试,为了绑定事件到一个按钮上:
<script src="prototype.js"></script>
<input type=button name=btnTest value=测试>
<script>
    
    
var TestThis=Class.create();

    TestThis.prototype
={
    
        initialize:
function(btn){
            
this.value="TestThis";
            $(btn).onclick
=this.clickButton;
        }


        clickButton:
function(){
            alert(
this.value);
        }


    }


    
new TestThis("btnTest");

</script>
在IE中执行代码会发现点击按钮后弹出的提示的值为"测试",按照java的思想去看的话我们会觉得这是很奇怪的事,因为按照java执行的话这个时候一定是弹出"TestThis"...
那么为什么会发生这样的状况呢,其实就是在将按钮的onclick事件绑定到clickButton造成的,当事件发生时候当前的对象为button,而不是TestThis,自然这个时候的this也就是button了...
有些时候我们是不希望这样的,在拥有prototype的情况下我们可以用它提供的bind来解决,将上面的绑定按钮的onclick事件部分的代码改为:
$(btn).onclick=this.clickButton.bind(this);
再次执行后会发现这个时候点击按钮弹出的提示的值就变为"TestThis"了,呵呵,其实就是prototype帮忙将这个时候的参数进行了重新的绑定..
bind和extend是prototype中两个非常重要的方法,去看prototype.js就会发现,里面很多地方都用到了Object.extend和Function.prototype.bind这两个函数...
bind可以起到的作用就象我上面说的..
extend起到的作用则为继承和扩展,^_^

posted on 2006-03-02 20:25 BlueDavy 阅读(1927) 评论(1)  编辑  收藏 所属分类: Javascript

评论

# re: Javascript基础知识之this篇 2006-04-05 23:11 JC

我今天写用JS的Prototype机制也遇到同样的问题,这样就可以了,
this.sbutton.clickEventSender = this;
this.sbutton.onclick = function(){
this.clickEventSender.show();
}

不过使用prototype.js更为幽雅 :)  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

公告

 









feedsky
抓虾
google reader
鲜果

导航

<2006年3月>
2627281234
567891011
12131415161718
19202122232425
2627282930311
2345678

统计

随笔分类

随笔档案

文章档案

Blogger's

搜索

最新评论

阅读排行榜

评论排行榜