首页 / JAVASCRIPT / 实例讲解JavaScript函数绑定用法

实例讲解JavaScript函数绑定用法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了实例讲解JavaScript函数绑定用法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4097字，纯文字阅读大概需要6分钟。

内容图文

本文主要介绍了JavaScript函数绑定用法,结合实例形式分析了javascript函数绑定的原理、实现方法与相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。

Perface

实例讲解JavaScript函数绑定用法 - 文章图片

如果让你实现这个页面和一些操作的，比如点击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",那么你再点击那个页面的按钮的时候它会弹出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的函数绑定技术，感兴趣的读者可对照一下二者的异同。

内容总结

以上是互联网集市为您收集整理的实例讲解JavaScript函数绑定用法全部内容，希望文章能够帮你解决实例讲解JavaScript函数绑定用法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/297125.html

来源：【匿名】

【上一篇】两种mongoose更新对象的方法【下一篇】javascript 怎么调用php方法

更多 ►

【实例讲解JavaScript函数绑定用法】教程文章相关的互联网学习教程文章

JavaScript之Array常用函数汇总【代码】

[20141121]JavaScript之Array常用功能汇总*:first-child {margin-top: 0 !important; }body>*:last-child {margin-bottom: 0 !important; }/* BLOCKS =============================================================================*/p, blockquote, ul, ol, dl, table, pre {margin: 15px 0; }/* HEADERS =============================================================================*/h1, h2, h3, h4, h5, h6 {margin: 20p...

javascript继承之借用构造函数与原型

在js中，关于继承只有利用构造函数和原型链两种来现实。以前所见到的种种方法与模式，只不过是变种罢了。借用构造函数?123456789101112131415161718192021// 一个动物类，包含名字和性别属性functionAnimal (name, sex) { this.name = name; this.sex = sex; this.getName = function(){ returnthis.name; }; } // Cat类继承Animal基类，并且拥有额外的属性functionCat (name, sex, hasLegs) { ...

JavaScript 基础(五) 函数变量和作用域

函数定义和调用　　　定义函数，在JavaScript中，定义函数的方式如下：　　　　　　function abs(x){ 　　　　　　　　if(x >=0){ 　　　　　　　　　　return x; 　　　　　　　　}else{ 　　　　　　　　　　return -x; 　　　　　　　　} 　　　　　　} 　　上述abs() 函数的定义如下：　　　　function 指出这是一个函数定义; 　　　　abs 是函数的名称；　　　　(x) 括号内列出函数的参数，多个参数以...

把多个JavaScript函数绑定到onload事件处理函数上

为了让函数只在页面加载完毕后才得到执行，我们会把函数绑定到onload事件上：window.onload = userFunction但如果有两个函数：firstFunction() 和 secondFunction()，都想让它们在页面加载完毕后得到执行，该怎么办？如果这样： window.onload = firstFunciton; window.onload = secondFunction;只有最后一个函数能被执行。由此可得：每个事件处理函数只能绑定一条指令。但我们可以这样做： window.onload = function...

解决JavaScript中构造函数浪费内存的问题！【代码】

解决JavaScript中构造函数浪费内存的问题！把构造函数中的公共的方法放到构造函数的原型对象上！ // 构造函数的问题!function Gouzaohanshu(name, age, gender) {this.name = name;this.age = age;this.gender = gender;// this.hanshu = function() {// console.log(123)// }}// 把构造函数放到我们的原型对象身上!Gouzaohanshu.prototype.hanshu = function () {console.log(123)}var gz = new Gouzaohanshu(‘lvhang‘, ...

JavaScript--对象+函数

1. 复杂数据类型 Object ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合。 1) 创建Object实例：　　1.使用构造函数创建，new Object() 　　　　var person = new Object(); 　　　　 person.name = "briup"; 　　　　person.age = 22; 　　2.使用对象字面量表示法　　　　不同的属性之间用‘,‘分割，属性名和属性值之间用‘:‘分割　　　　　　 var person = { 　　　　　　　　name : "briup",...

关于JavaScript权威指南函数章节的一些翻译问题【代码】

对于学习前端，学习javascript，犀牛书是一本很好的书，很系统的介绍了JS的具体知识，所以很厚重，对于这么厚重的一本书，翻译是一个很大的挑战，能够将这么厚一本原版书翻译成中文，并出版，着实不易，而且翻译的整本书的质量，总体上来说也是非常不错的，是学习JS的不错的书籍。我也很庆幸自己买了一本来看，这对我学习js确实有很大的帮助，让我既可以系统的了解js的大概知识体系，也可以细嚼其细节知识。但是在阅读的过程中，我...

《你不知道的JavaScript[中卷]》【8】——原生函数【图】

bug合集又开始了坑王操作数选择器。。。原文：https://www.cnblogs.com/cx2016/p/13202893.html

javascript中常见的函数封装：判断是否是手机，判断是否是微信，获取url地址？后面的具体参数值，毫秒格式化时间，手机端px、rem尺寸转换等

// 判断是否是手机function plat_is_mobile(){ 　　var sUserAgent = navigator.userAgent.toLowerCase(); 　　var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; 　　var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; 　　var bIsMidp = sUserAgent.match(/midp/i) == "midp"; 　　var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; 　　var bIsUc = sUserAgent.match(/ucw...

Javascript面向对象编程（四）：非构造函数的继承【图】

什么叫非构造函数的继承？比如，现在有一个对象，叫做"中国人"。　　var Chinese = {　　　　nation:‘中国‘　　};还有一个对象，叫做"医生"。　　var Doctor ={　　　　career:‘医生‘　　}请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。二、object()方法object()函数，可以做到这一点。　　functio...

JavaScript 中的回调函数【代码】

原文：http://javascriptissexy.com/翻译：http://blog.csdn.net/luoweifu/article/details/41466537【建议阅读原文，以下为个人学习笔记，有部分知识点补充，不喜勿喷】在JavaScrip中，function是内置的类对象，也就是说它是一种类型的对象，可以和其它String、Array、Number、Object类的对象一样用于内置对象的管理。因为function实际上是一种对象，它可以“存储在变量中，通过参数传递给(别一个)函数(function)，在函数内部创建...

JavaScript函数节流（throttle）与函数去抖（debounce）【代码】

对于浏览器窗口大小改变的时候，来动态改变页面元素的大小，可以采用window的resize事件，实现代码：<script type="text/javascript">var n = 0;function resizehandler(){console.log(new Date().getTime());console.log(++n);}window.onresize = resizehandler; </script>功能能够实现，都是当我们用拖拽的方式改变浏览器大小的时候，控制台会不断打印执行resizehandler的函数的结果。一次简单的拖拽会让resizehandler()函数执行...

深入理解javascript之函数【代码】

函数的作用域和this的指向我已经在前面的文章中讲过，今天主要讲讲函数的绑定。函数绑定要创建一个函数，可以在特定的this环境中以指定参数调用另外一个函数。该技巧常常和回调函数与事件处理程序一起使用，以便在将函数作为变量传递的同时保留函数的代码执行环境。函数绑定看下面的例子：var handler = {message:"消息来了！",handlerClick :function(event){document.write(this.message);} } //一般的指定不能改变this的指向 va...

javascript中作为值的函数

因为ECMAScript中函数名本事就是一个变量，所以函数也可以作为值来使用，即不仅可以向传递参数一样把函数传递给另一个函数，而且可以将函数作为另一个函数返回这个函数接受两个参数，第一个参数是一个函数名，第二个参数是传递给该函数的一个值function add(num){return num+10;}var result=callFunction(add,10){alert(result);//20}原文：http://blog.csdn.net/hephec/article/details/39324497

javascript构造函数模块

首页 / JAVASCRIPT / 实例讲解JavaScript函数绑定用法

实例讲解JavaScript函数绑定用法

内容导读

内容图文

内容总结

内容备注

内容手机端

【实例讲解JavaScript函数绑定用法】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

实例 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程