Javascript基础知识之this篇

介绍这方面的文章也有一些，我这里打算以一个demo来说明一下，也是基于prototype进行编写，javascript中的this看起来会和java中的this有些不同。
一个简单的测试，为了绑定事件到一个按钮上：

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 阅读(2059) 评论(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更为幽雅 :) 回复更多评论

新用户注册刷新评论列表


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




网站导航: 博客园 IT新闻知识库 C++博客博问
相关文章: 两个小问题备忘以及继续谈交互 Velocity for javascript js版事件管理器 V0.7 js版事件管理器修改版的丰富交互表格RichTable.js Javascript基础知识之this篇 Prototype.js学习