JavaScript函数绑定用法实例分析


Posted in Javascript onNovember 14, 2017

本文实例讲述了JavaScript函数绑定。分享给大家供大家参考,具体如下:

Perface

JavaScript函数绑定用法实例分析

如果让你实现这个页面和一些操作的,比如点击1、2、3等就在那个input text中显示,还有删除功能,拨打我们先不要管它,只是模拟而已。要是我刚开始做的话,我会这样做:

1. 用css、HTML布局那个界面

2. 用javascript的事件委托监听那个按钮的父节点的点击事件

但是如果我想用面向对象的思想做呢?我是用Ext做的,所以我想说的是它帮我封装了很多。可能一些没用过Ext的人不太了解我下面贴的代码,但是我会尽量解释清楚的!

Description

ContactTelPanel =Ext.extend(Ext.Panel, {
  //构造方法
  constructor : function(config) {
    Ext.apply(this, config);//直接把config对象的属性全复制到this对象中
    Parent = this.parent;
    var me = this;
    ContactTelPanel.superclass.constructor.call(this, {//用ContactTelPanel的父类也就是Ext.Panel的构造函数
      autoScroll : true,
      title : "拨打电话",//设置title,跟这篇文章的主体没关系,不要管他
      id : "contacttelpanel",
      bodyStyle : "padding: 30px 300px;",
      defaults : {//可以为该对象(ContactTelPanel)包含的组件(也就是在items配置选项)设置一些相同属性
        layout : "column",
        defaults : {
          xtype : "button",
          width : 50,
          height : 25,
          style : "margin:4px 15px",
          handler : this.press //为每个按钮都添加一个click的事件
        },
        bodyBorder : false
      },
      items : [ {//textfield组件
        height : 30,
        width : 250,
        xtype : "textfield",
        id : "tf",
        style : "margin-bottom:10px"
      }, {// 没有xtype就是默认为panel,下面也是,不然就不要纠结了,直接在这里想象成第一行按钮1、按钮2、按钮3
        items : [ {
          text : "1"
        }, {
          text : "2"
        }, {
          text : "3"
        } ]
      }, {// 这里是按钮4、按钮5、按钮6
        items : [ {
          text : "4"
        }, {
          text : "5"
        }, {
          text : "6"
        } ]
      }, {// 这里是按钮7、按钮8、按钮9 下同
        items : [ {
          text : "7"
        }, {
          text : "8"
        }, {
          text : "9"
        } ]
      }, {
        items : [ {
          text : "*"
        }, {
          text : "0"
        }, {
          text : "#"
        } ]
      }, {
        items : [ {
          text : "拨打",
        }, {
          text : "删除",
        } ]
      } ]
    });
  },
  press : function() {
    var text = this.text, textfield = Ext.getDom("tf");
    if (/[0-9*#]/.test(text)) {//在textfield中显示所点击按钮的数字
      textfield.value += text;
    } else if (this.text == "删除") {//删除功能
      textfield.value = textfield.value.slice(0, -1);
    } else if (this.text == "拨打") {//这个先不要管他
      Tel.telcall(textfield.value);
    }
  }
});

注:其实从上面可以知道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的函数绑定技术,感兴趣的读者可对照一下二者的异同。

PS:这里再为大家附上javascript系统自带事件参考表供大家参考查询:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《JavaScript事件相关操作与技巧大全》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 图片等比例缩放代码
May 13 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
javascript如何实现create方法
Nov 04 Javascript
vue实现购物车列表
Jun 30 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
JavaScript如何操作css
Oct 24 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 #Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 #Javascript
JS中图片压缩的方法小结
Nov 14 #Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 #jQuery
Node.js使用Express.Router的方法
Nov 14 #Javascript
js精确的加减乘除实例
Nov 14 #Javascript
JavaScript插件Tab选项卡效果
Nov 14 #Javascript
You might like
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
详解PHP归并排序的实现
2016/10/18 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
python dlib人脸识别代码实例
2019/04/04 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
会计与审计专业大专生求职信
2013/10/03 职场文书
三年级小学生评语
2014/04/22 职场文书
高一地理教学工作总结
2015/08/12 职场文书
公司年会主持词范文!
2019/05/07 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
vue中 this.$set的使用详解
2021/11/17 Vue.js
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python