JavaScript函数绑定用法示例分析

本文说明了JavaScript函数绑定。分享给大家参考，如下：

Perface

如果允许你实现这个页面和一些操作，比如点击1、2、3等。它将显示在输入文本中，并且有一个删除功能，所以调用我们，别管它，只是模拟。如果我刚刚开始，我会这样做：

1.用css和HTML布局界面

2.使用javascript事件委托监视该按钮父节点的单击事件

但是如果我想用面向对象的思维来做呢？我用Ext做的，所以我想说的是它为我封装了很多。可能有些没用过Ext的人对我下面贴的代码不太了解，但我会尽力解释清楚！

描述

contact telpanel=ext . ext(ext . panel，{//constructor : function(config){ ext . apply(this，config)；//直接将config对象的所有属性复制到这个对象。Parent=this.parentvar me=thisContact telpanel . super class . constructor . call(这个，{//使用contact telpanel的父类，也就是Ext的构造函数。Panel，autoscroll3360true，title:' call '，//设置标题。它与本文的主体无关，不管它的id是：' contacttelpanel '，主体样式是： ' padding 3360 30px 300px'，默认值： {//您可以为此对象中包含的组件(即items配置选项)设置一些相同的属性：layout:' column '，Defaults: { xtype3360 ' button '，width3360 50，Height : 25，style :' margin :4px15px '，handler:this。按//为每个按钮添加一个点击事件}、bodyBorder : false}、Items3360 [{//textfield组件高度： 30、宽度： 250、xtype :‘textfield’、id :‘TF’、style :‘margin-bottom :10 px’}、{//如果没有xtype，默认为panel，下面也是true，否则，不用担心，想象成是第一行{//这里有按钮4、5和6 item :[{ text : ' 4 ' }，{text:' 5'}，{text:' 6'}]}。{//这里是按钮7、8和9，它们与items: [{text3360' 7'}、{text3360' 8'}、{text:' 9'}]}、{ items :[{ text 3360 ' * }、{text:' 0' }、{ text : ' # ' } }、{items: [{text3360' call '，}、{ text : ' }}，按： function(){ var text=this . text，text field=Ext . GetDom(' TF ')；If (/[0-9*#]/。test(text))。值=文本；} else if(this . text==' delete '){//delete function text field . value=text field . value . slice(0，-1)；} else if(this . text==' dial '){//不用担心tel . telcall(textfield . value)；} }});注意：实际上，从上面可以知道ContactTelPanel继承了Ext。面板，然后在这个面板中有许多键，每个键都监视点击事件。真的感觉在这里打不太好，应该用事件委托来实现，因为你的每个按钮都在听点击事件，太影响效率了。有了事件委托，我们就可以只监听其父节点的click事件，然后根据事件流判断目标对象并进行操作。本文的重点是在事件中监听代码处理程序this.press。我遇到的问题是，如果我想在press函数中使用这个类ContactTelPanel的一些属性呢？

想法

我在想，我想在press函数中使用这个类的属性。我只需要用这个对象就可以直接拿到出版社，但是我犯了一个错误。例如，如果在press函数中使用console.dir(this)，请查看chrome控制台中出现的内容。不幸的是，它显示为一个Button对象，它的这个指针已经改变了。有点麻烦，然后我想到了三个方法，如下：

解决办法

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

代码：处理程序： this.press(this)，然后在press函数体中写入alert(参数[0])

发生了什么：当这个页面被加载时，弹出窗口确实是ContactTelPanel，但是当你点击那些按钮时，它不会出现

原因：this.press(this)，这样写javascript解析器会被认为是调用了press函数，然后在加载页面的时候执行

在此ContactTelPanel类中设置全局变量

代码：例如，在第五行设置me=this，然后在press函数体中写入alert(me)

发生了什么：你真的可以在点击按钮的时候弹出一个窗口，而且成功了

缺点：污染全局变量，容易被他人无意篡改。比如我在介绍完这个页面的js之后引用其他JS的时候，在后面的JS中设置var me=' monkindey '，然后当你再次点击那个页面的按钮的时候，会弹出123，如果不是ContactTelPanel对象的话。

3封闭的简单使用

代码：handler:function () {me。按(me)}注意：me是ContactTelPanel对象，因为这个指针已经是函数中的一个button对象，所以这个对象应该和me(或者其他变量名)一起保存在函数外，也就是var me=this

发生了什么：这当然是成功的

4使用调用实现函数绑定

代码：handler : function(){ me . press . call(this，me)；}

我个人认为这应该是最好的

另外，上一篇文章详细讲解了JavaScript函数绑定，其中介绍了基于纯js的函数绑定技术。感兴趣的读者可以对比一下两者的异同。

PS:这里我们附上javascript系统的事件引用表，供大家参考：

Javascript事件和功能描述：http://tools.jb51.net/table/javascript_event

有关JavaScript的更多信息，请参见本网站的主题：《JavaScript常用函数技巧汇总》、《JavaScript事件相关操作与技巧大全》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》和0103010。

希望本文对JavaScript编程有所帮助。