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 相关文章推荐
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
浅谈开发eslint规则
Oct 01 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
python 2.7.14安装图文教程
2018/04/08 Python
python中cPickle类使用方法详解
2018/08/27 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python变量命名的7条建议
2019/07/04 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
养殖人员的创业计划书范文
2013/12/26 职场文书
慈善晚会策划方案
2014/05/14 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
领导班子整改措施
2014/10/24 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
2015年暑假生活总结
2015/07/13 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
详解Mysql和Oracle之间的误区
2021/05/18 MySQL