JavaScript函数绑定用法实例分析(2)

注:其实从上面可以知道ContactTelPanel是继承Ext.Panel,然后这个面板中有很多个键,每个键都监听click事件。确实在这里觉得自己敲得不是很好,应该是用事件委托来实现,因为你每个按钮都监听了click事件,太影响效率了。用事件委托我们可以指监听它的父节点的click事件就行了,然后根据事件流来判断目的对象并操作。本文重点还是监听事件里面handler : this.press这段代码中 。我遇见的问题就是如果我在press函数要用到这个类ContactTelPanel的一些属性,怎么办?

Idea

我在想,我要在press函数中用到这个类的属性,我直接在press用this对象来获取不就行了,但是我错了,比如你在press函数中console.dir(this),看chrome控制台出现的是什么?不幸的是它出现的是Button对象,它的this指针改了。确实有点麻烦,然后我就想了三个方法,如下:

Solution

1 在每个监听事件的函数中传参

代码handler : this.press(this),然后在press函数体中写alert(arguments[0])

出现的情况:确实在这个页面加载的时候就弹出窗口是ContactTelPanel,但是你点击那些按钮的时候它没出现了

原因this.press(this),这样子写javascript解析器会当作调用press函数,然后在你加载页面就执行了

2 在这个ContactTelPanel类中设置全局变量

代码:比如在第五行设置me = this,然后在press函数体中写alert(me)

出现的情况:确实可以在点击按钮的时候弹出窗口,成功了

缺点:污染全局变量,容易被别人无意篡改。比如我在引入这个页面的js后面再引用其他js的时候,在后面的js中设置var me = "monkindey",那么你再点击那个页面的按钮的时候它会弹出123,为不是ContactTelPanel对象

3 简单运用了闭包

代码handler : function(){me.press(me)} 注:me就是ContactTelPanel对象,因为在function中this指针已经是button对象了,所以应该在function外面用me(或者其他变量名)保存this对象,即var me = this

出现的情况:这个当然是成功

4 用call来实现函数绑定

代码handler : function(){ me.press.call(this,me);}

个人觉得:这个应该才是最好用的

另:前面一篇详解JavaScript函数绑定介绍了基于纯js的函数绑定技术,感兴趣的读者可对照一下二者的异同。