JavaScript函数绑定

一个简单的函数绑定

在JavaScript与DOM交互中经常需要使用函数绑定,定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上,绑定函数经常和回调函数及事件处理程序一起使用,以便把函数作为变量传递的同时保留代码执行环境。

<body><input id="btnTest" type="button" value="Button"/><script type="text/javascript">            var handler={message:"Event handled.",handlerFun:function(){alert(this.message);}};document.getElementById('btnTest').οnclick=handler.handlerFun;</script></body>

 

上面的例子创建了一个handler对象,handler.handlerFun()方法被分配为DOM按钮的click事件处理程序。设计意图是这样的:当点击按钮的时候触发该方法,弹出对话框显示handler定义的message,然而点击后对话框内容却是undefined。熟悉闭包的同学可以轻松看出来这个问题在于没有保存handler.handlerFun()方法的执行环境,this对象最后指向了DOM按钮而非handler。可以使用闭包解决此问题,修改函数绑定语句

document.getElementById('btnTest').οnclick=function(){handler.handlerFun();}

这样就可以得到预期的结果,这个解决方案在onclick程序内部使用一个闭包直接调用handler.handlerFun()方法,当然这是特定于此场景的解决方案,创建多个闭包可能会令代码难以理解和调试。

 

自定义bind函数

function bind(fn,context){return function(){return fn.apply(context,arguments);};}document.getElementById('btnTest').οnclick=bind(handler.handlerFun,handler);

通过自定义的bind函数可以将函数绑定到指定环境,bind()函数接收两个参数:一个绑定函数,一个执行环境,并返回一个在执行环境中调用绑定函数的函数。看起来很简单,但是其功能很强大,在bing()中创建了一个闭包,闭包使用apply()调用传入的函数,并给apply()传入执行环境和参数,这里的arguments是内部匿名函数的,而非bind()的。当调用返回的函数时,它会在给定的函数中执行被传入的函数,并给出所有参数。上面例子的调用handler.handlerFun依旧可以得到参数event,因为所有参数在都通过绑定的函数传递给它了。

小结

一旦要将某个函数以函数指针的形式传递,同时该函数必须在特定的环境中执行,自定义的bind()函数就可以使用,他们主要用于事件处理程序及setTimeout和setInterval,然而这种绑定方式和普通函数相比需要更多的内存开销,所以尽量只在必要的时候使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402422.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ie6兼容问题汇总

这几天在查找和解决网页在ie6下的兼容性问题花了我不少的时间&#xff0c;参考了网上的一些解决方法和自己做出来比较有效果的给大家参考一下&#xff0c;也方便我日后再用到&#xff1a; 1.IE的cache设置为Every visit to the page&#xff0c;而不是默认的Automatically。基本…

Linux C 数据结构---线性表

数据结构指的是数据元素及数据元素之间的相互关系&#xff0c;包含下面三方面的内容&#xff1a; 其中&#xff0c;线性表是最基本、最简单、也是最常用的一种数据结构。线性表中数据元素之间的关系是一对一的关系&#xff0c;即除了第一个和最后一个数据元素之外&#xff0c;其…

Postman发送请求时带上登录信息

正常情况下&#xff0c;没有登录验证等公共接口&#xff0c;用postman进行get或post请求都很方便&#xff0c;加上相应的参数就行。 但是对于某些接口&#xff0c;可能需要先登录后才能请求&#xff0c;这时如果按正常的思路请求&#xff0c;可能就会被拦截了。 对于这种情况…

Chrome跨域问题

2019独角兽企业重金招聘Python工程师标准>>> 在chrome图标&#xff0c;右键--->属性 --->目标 路径末尾添加 “--disable-web-security” 重启即可 转载于:https://my.oschina.net/u/861562/blog/152171

解决安装mysql的”A Windows service with the name MySQL already exists.“问题

如果以前安装过mysql&#xff0c;卸载重装&#xff0c;很可能会碰到”A Windows service with the name MySQL already exists.“这样的提示。即服务已经存在。我们可以在window任务管理器----服务中查看&#xff0c;发现确实存在&#xff0c;没有卸载干净。 解决这个问题&…

[vue] 父子组件间传值

环境说明: vue 3.x ant-vue 父组件(Album.vue)使用: <template><div><a-button type"primary" icon"plus" click"uploadImage">图片</a-button><upload-image :visible.sync"visible"></upload-i…

Linux C 数据结构---单向链表

线性表存储结构分为顺序存储、链式存储。 顺序存储的优点&#xff1a; 顺序存储的缺点&#xff1a; 链表就是典型的链式存储&#xff0c;将线性表L &#xff08;a0,a1,a2,........an-1&#xff09;中个元素分布在存储器的不同存储块&#xff0c;成为结点&#xff08;Node&…

杂感

成功的IT大佬&#xff0c;我读着沸腾十五年&#xff0c;激荡三十年&#xff0c;知识英雄&#xff0c;满腔热血&#xff0c;梦想真的是个好东西&#xff0c;让你在这个国度不至于行尸走肉。走上编程这条路&#xff0c;有人因走投无路而走此路&#xff0c;有人怀抱着梦想&#xf…

分页插件--根据Bootstrap Paginator改写的js插件

刚刚出来实习&#xff0c;之前实习的公司有一个分页插件&#xff0c;和后端的数据字典约定好了的&#xff0c;基本上是看不到内部是怎么实现的&#xff0c;新公司是做WPF的&#xff0c;好像对于ASP.NET的东西不多&#xff0c;导师扔了一个小系统给我和另一个同事&#xff0c;指…

sprintboot 配置文件上传大小(默认是1MB)

application.yaml: spring:profiles:active: activatedjackson:date-format: yyyy/MM/dd HH:mm:sstime-zone: GMT8servlet:multipart:max-file-size: 6MBmax-request-size: 6MB

Android ANR

ANRs (“Application Not Responding”)&#xff0c;意思是”应用没有响应“。 1&#xff09;什么引发了ANR&#xff1f;在Android里&#xff0c;应用程序的响应性是由Activity Manager和WindowManager系统服务监视的。当它监测到以下情况中的一个时&#xff0c;Android就会针对…

Linux C 算法分析初步

提到算法&#xff0c;必须提到数据结构&#xff0c;我们要知道一个著名公式&#xff1a; 数据结构 算法 程序 我们先看看下面这张图&#xff1a; 算法是什么&#xff1f;算法是一个有穷规则&#xff08;或语句、指令&#xff09;的有续集和。他确定了解决某一问题的一个运算序…

hive实例,GPRS流量统计

2019独角兽企业重金招聘Python工程师标准>>> 最近面试&#xff0c;发现很多公司在使用hive对数据进行处理。 hive是hadoop家族成员&#xff0c;是一种解析like sql语句的框架。它封装了常用MapReduce任务&#xff0c;让你像执行sql一样操作存储在HDFS的表。 hive的表…

90.不用其它变量进行变量互换

package com.chongrui.test;//不用其它变量进行变量互换import java.util.Scanner; //导入扫描器public class test { public static void main(String[] args){ Scanner scan new Scanner(System.in);//创建扫描器 System.out.println("请输入变量A的值");//输入变…

android中 MediaStore提取缩略图和原始图像

android中 MediaStore提取缩略图和原始图像 . 欢迎转载&#xff1a;http://blog.csdn.net/djy1992/article/details/10005767提取图像的Thumbnail 1) 启动Intent Intent intent new Intent(Intent.ACTION_GET_CONTENT, null); intent.setType("image/*"); intent.pu…

Linux C 数据结构—-循环链表

前面我们学习了单向链表&#xff0c;现在介绍单向循环链表&#xff0c;单向循环链表是单链表的一种改进&#xff0c;若将单链表的首尾节点相连&#xff0c;便构成单向循环链表结构&#xff0c;如下图&#xff1a; 对于一个循环链表来说,其首节点和末节点被连接在一起。这种方式…

预备作业03 20162320刘先润

第一次编代码 这几周自学了Linux基础入门&#xff0c;有好多想吐槽的地方&#xff0c;所以这篇随笔是带有半吐槽性质的&#xff0c;这是我学完后最真实的感受 我在电脑上按照教程安装了虚拟机&#xff0c;对于Linux这个完全陌生的概念也稍微算是有些理解&#xff0c;但是还有很…

JTable 失去焦点时取消编辑状态

为什么80%的码农都做不了架构师&#xff1f;>>> reference&#xff1a; http://tips4java.wordpress.com/2008/12/12/table-stop-editing/ 当JTable的单元格处于编辑状态时&#xff0c;如果用户触发以下事件&#xff0c;表格就会退出编辑状态&#xff0c;进而调用T…

JS中的array和Object的区别

区别&#xff1a; 数组表示有序数据的集合&#xff0c;对象表示无需数据的集合。如果数据顺序很重要的话&#xff0c;就用数组&#xff0c;否则就用对象的好。 数组的数据没有名称name 对象的数据有名称 name 但是在很多编程语言中有个叫关联数组的&#xff0c;这种数组中的…

Linux C 数据结构——栈

还是先把这张图贴出来&#xff0c;以便对比和理解 栈是限制在一段进行插入操作和删除操作的线性表&#xff08;俗称堆栈&#xff09;&#xff0c;允许进行操作的一端称为“栈顶”&#xff0c;另一固定端称为“栈底”&#xff0c;当栈中没有元素称为“空栈”。特点&#xff1a;先…