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').onclick=handler.handlerFun;
</script>
</body>
上面的例子创建了一个handler对象，handler.handlerFun()方法被分配为DOM按钮的click事件处理程序。设计意图是这样的：当点击按钮的时候触发该方法，弹出对话框显示handler定义的message，然而点击后对话框内容却是undefined。熟悉闭包的同学可以轻松看出来这个问题在于没有保存handler.handlerFun()方法的执行环境，this对象最后指向了DOM按钮而非handler。可以使用闭包解决此问题，修改函数绑定语句
document.getElementById('btnTest').onclick=function(){
handler.handlerFun();
}
这样就可以得到预期的结果，这个解决方案在onclick程序内部使用一个闭包直接调用handler.handlerFun()方法，当然这是特定于此场景的解决方案，创建多个闭包可能会令代码难以理解和调试。
自定义bind函数
function bind(fn,context){
return function(){
return fn.apply(context,arguments);
};
}
document.getElementById('btnTest').onclick=bind(handler.handlerFun,handler);
通过自定义的bind函数可以将函数绑定到指定环境，bind()函数接收两个参数：一个绑定函数，一个执行环境，并返回一个在执行环境中调用绑定函数的函数。看起来很简单，但是其功能很强大，在bing()中创建了一个闭包，闭包使用apply()调用传入的函数，并给apply()传入执行环境和参数，这里的arguments是内部匿名函数的，而非bind()的。当调用返回的函数时，它会在给定的函数中执行被传入的函数，并给出所有参数。上面例子的调用handler.handlerFun依旧可以得到参数event，因为所有参数在都通过绑定的函数传递给它了。
小结
一旦要将某个函数以函数指针的形式传递，同时该函数必须在特定的环境中执行，自定义的bind()函数就可以使用，他们主要用于事件处理程序及setTimeout和setInterval,然而这种绑定方式和普通函数相比需要更多的内存开销，所以尽量只在必要的时候使用。
JavaScript函数绑定的更多相关文章
- 把多个JavaScript函数绑定到onload事件处理函数上的技巧
一,onload事件发生条件 用户进入页面且页面所有元素都加载完毕.如果在页面的初始位置添加一个JavaScript函数,由于文档没有加载完毕,DOM不完整,可能导致函数执行错误或者达不到我们想要的效 ...
- 把多个JavaScript函数绑定到onload事件处理函数上
为了让函数只在页面加载完毕后才得到执行,我们会把函数绑定到onload事件上: window.onload = userFunction 但如果有两个函数:firstFunction() 和 seco ...
- JavaScript 函数绑定 Function.prototype.bind
ECMAScript Edition5 IE9+支持原生,作用为将一个对象的方法绑定到另一个对象上执行. Function.prototype.bind = Function.prototype.bi ...
- 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- javascript多种继承方式(函数式，浅复制，深复制，函数绑定和借用)
函数式继承: var object = function (obj) { if (typeof Object.create !== 'undefined') { return Object.creat ...
- Javascript函数重载，存在呢—还是存在呢？
1.What's is 函数重载? );//Here is int 10 print("ten");//Here is string ten } 可以发现在C++中会根据参数的类型 ...
- JavaScript语言精粹读书笔记 - JavaScript函数
JavaScript是披着C族语言外衣的LISP,除了词法上与C族语言相似以外,其他几乎没有相似之处. JavaScript 函数: 函数包含一组语句,他们是JavaScript的基础模块单元,用于代 ...
- javascript函数一共可分为五类： ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数
javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 1.常规函数 javascript常规函数包括以下9个 ...
- 深入理解javascript函数系列第一篇——函数概述
× 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...
随机推荐
- jqeury 合并单元格
function mergeCells() { var tbodyTlth = $("#datatable_ajax1 tbody").find("tr").l ...
- 循序渐进Python3（四） -- 装饰器、迭代器和生成器
初识装饰器(decorator ) Python的 decorator 本质上就是一个高阶函数,它接收一个函数作为参数,然后,返回一个新函数. 使用 decorator 用Python提供的 @ 语法 ...
- js 和 c# 方法互调
js访问c#代码 1 js <script type="javascript"><%=test()%></script> c# public ...
- (八) 一起学 Unix 环境高级编程 (APUE) 之 信号
. . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...
- 写shell脚本速查笔记
linux shell脚本的语法蛋疼,而且对于java开发人员来说又不常用,常常是学了一次等到下次用的时候又忘记了.因此制作这个速查笔记,用于要写shell脚本时快速回忆&速查. 获取当前脚本 ...
- python-->基础-->001-->基本模块使用汇总
一.python调用linux系统命令模块 import os import commands 例如,调用系统命令执行ping操作: 使用commands模块方法:>>> impor ...
- 将Discuz.net 集成到asp.net
1,将bbs文件夹拷贝到网站的根目录下: 2,将bbs里面的bin目录,config目录,cache目录,DNT.config文件拷贝到网站根目录下: 3,修改网站web.config文件,在http ...
- css2选择器
CSS1&2元素选择器 选择符 类型 版本 简介 * 通配选择符 CSS2 所有元素对象. E 类型(HTML)选择符 CSS1 以文档语言对象类型作为选择符. E#myid id选择符 ...
- 第二章 ZAB协议介绍
ZAB ( ZooKeeper Atomic Broadcast , ZooKeeper 原子消息广播协议)是zookeeper数据一致性的核心算法. ZAB 协议并不像 Paxos 算法那样,是一种 ...
- ICE系列之3对象接口定义语言——slice
Slice 定义由编译器编译到特定的实现语言 .编译器把与语言无关的定 义翻译成针对特定语言的类型定义和 API.开发者使用这些类型和 API 来 提供应用功能,并与 Ice 交互.用于各种 ...