位置: 编程技术 - 正文
JavaScript函数绑定用法实例分析(js三种绑定方式)
编辑：rootadmin推荐整理分享JavaScript函数绑定用法实例分析(js三种绑定方式)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:javascript数据绑定,js绑定函数,js绑定函数,js绑定click,js绑定事件的两种方式,js绑定onchange,js绑定方法,js绑定方法,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例讲述了JavaScript函数绑定。分享给大家供大家参考，具体如下：
Perface
如果让你实现这个页面和一些操作的，比如点击1、2、3等就在那个input text中显示，还有删除功能，拨打我们先不要管它，只是模拟而已。要是我刚开始做的话，我会这样做：
1. 用css、HTML布局那个界面
2. 用javascript的事件委托监听那个按钮的父节点的点击事件
但是如果我想用面向对象的思想做呢？我是用Ext做的，所以我想说的是它帮我封装了很多。可能一些没用过Ext的人不太了解我下面贴的代码，但是我会尽量解释清楚的！
Description
注：其实从上面可以知道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",那么你再点击那个页面的按钮的时候它会弹出，为不是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的函数绑定技术，感兴趣的读者可对照一下二者的异同。
PS：这里再为大家附上javascript系统自带事件参考表供大家参考查询：
javascript事件与功能说明大全：
JavaScript实现为事件句柄绑定监听函数的方法分析 本文实例讲述了JavaScript实现为事件句柄绑定监听函数的方法。分享给大家供大家参考，具体如下：在JavaScript中为Dom元素绑定事件监听函数是一件非常常
bootstrap paginator分页插件的两种使用方式实例详解 分页有两种方式：1.前台分页：ajax一次请求获取全部数据，适合少量数据（万条数据以下）；$.ajax({type:"GET",url:"",//后台接口地址dataType:"json",success:functio
js导出Excel表格超出位英文字符的解决方法ES6 这个需要对Excel表格的表头编码规则有所了解，目前示例代码只扩展到个字段/***json数据导入导出Excel表格示例代码*/vararray_utils=require('./utils-array')varXLSX
标签: js三种绑定方式
本文链接地址:https://www.jiuchutong.com/biancheng/369791.html 转载请保留说明！
