| Blog信息 |
|
blog名称:
日志总数:1304
评论数量:2242
留言数量:5
访问次数:7587790
建立时间:2006年5月29日 |
| |
|
 [Prototype(Ajax)]Javascript基础知识之this篇
软件技术
lhwork 发表于 2006/9/7 10:15:04 |
|
介绍这方面的文章也有一些，我这里打算以一个demo来说明一下，也是基于prototype进行编写，javascript中的this看起来会和java中的this有些不同。一个简单的测试，为了绑定事件到一个按钮上：
500)this.width=500'><script src="prototype.js"></script>500)this.width=500'><input type=button name=btnTest value=测试>500)this.width=500'><script>500)this.width=500'> 500)this.width=500'> var TestThis=Class.create();500)this.width=500'>500)this.width=500'>500)this.width=500'> TestThis.prototype=500)this.width=500'>{500)this.width=500'> 500)this.width=500'>500)this.width=500'> initialize:function(btn)500)this.width=500'>{500)this.width=500'> this.value="TestThis";500)this.width=500'> $(btn).onclick=this.clickButton;500)this.width=500'> }500)this.width=500'>500)this.width=500'>500)this.width=500'> clickButton:function()500)this.width=500'>{500)this.width=500'> alert(this.value);500)this.width=500'> }500)this.width=500'>500)this.width=500'> }500)this.width=500'>500)this.width=500'> new TestThis("btnTest");500)this.width=500'>500)this.width=500'></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起到的作用则为继承和扩展，^_^ |
|
|