详解JavaScript函数绑定
<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()方法,当然这是特定于此场景的解决方案,创建多个闭包可能会令代码难以理解和调试。
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为事件句柄绑定监听函数的方法.分享给大家供大家参考,具体如下: 在JavaScript中为Dom元素绑定事件监听函数是一件非常常见的事情,但这里也有许多的Bug.各种浏览器对于事件绑定都提供了很多方法,但可靠的只有3中: 1.传统的绑定方法: elem.onclick = function( event ){ alert(event.type + 'this.innerHTML'); }; a.传统的绑定方法,非常简单稳定,函数体内的this指向的也是指向正在处
-
javascript 解决表单仍然提交即使监听处理函数返回false
复制代码 代码如下: <form action="http://www.jb51.net" id="form"> <input type="text" /> <input type="submit" /> </form> <script> var code = function () { return false; }; var element = window.do
-
JS 事件绑定函数代码
主要解决了 浏览器兼容,现在可以兼容IE6 7 8 FF 谷歌(废话) IE浏览器里,this指向问题. 直接上代码吧! 复制代码 代码如下: var bind=function(object,type,fn){ if(object.attachEvent){//IE浏览器 object.attachEvent("on"+type,(function(){ return function(event){ window.event.cancelBubble=true;//停止时间冒泡 o
-
JavaScript 事件属性绑定带参数的函数
例如不能采用这种调用方式:element.onclick = test();element.onclick = test(arg1,arg2);只能通过element.onclick = function(){ ... };或者element.onclick = test这种方式来实现,所以无法给函数传递参数.参考了大量的网上资料,解决这个问题的方式,以代码为例,如下所示: 复制代码 代码如下: function Handler() { }; Handler.prototype = { /* *
-
js循环动态绑定带参数函数遇到的问题及解决方案[转]
众所周知,不带参数的绑定非常简单,只要使用(语法:"document.getElementById("对象ID名").attachEvent("事件名,如onchange",函数名);")(示例:"document.getElementById("select_0").attachEvent("onchange",modifyFunction);")即可.(注:以下只写示例) 带参数的绑
-
js使用函数绑定技术改变事件处理程序的作用域
第一种,也是 最常见的,就是直接在html标签里面通过指定事件处理程序同名的HTML属性来注册事件,代码如下: 复制代码 代码如下: function eventHandler() { alert("当前作用域是 input 元素本身"); } <input type="button" value="单击我" onclick="eventHandler(this)"/> 第二种方式就是将一个函数赋值给一个事件处理程
-
javascript中的绑定与解绑函数应用示例
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 EventListene
-
封装了一个支持匿名函数的Javascript事件监听器
关于js中的事件监听大家用的比较多了,无非是判断浏览器是否支持addEventListener和attachEvent,网上搜索关于事件监听的方法也挺多,但是总有些不是很完善.下面的方法中对于添加事件监听的方法是一样的,只不过在取消事件绑定上面做了点手术,现在可以支持匿名函数的使用,所以在绑定事件的时候不再需要给函数单独命名了. 主要代码: 复制代码 代码如下: /*绑定事件与取消绑定*/var handleHash = {};var bind = (function() { if (windo
-
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数.分享给大家供大家参考.具体如下: IE 的事件绑定函数是 attachEvent:而 Firefox, Safari 是 addEventListener:Opera 则两种都支持.使用jQuery就可以使用简单的bind(),或者$().click()之类的函数解决,而如果不使用JavaScript框架的时候,大家可是使用下面的封装bind()函数. 添加事件绑定 bind() /*********************
-
详解JavaScript函数绑定
复制代码 代码如下: <body> <input id="btnTest" type="button" value="Button"/> <script type="text/javascript"> var handler={ message:"Event handled.",
-
详解javascript函数写法大全
1.常规写法 function fnName(){ console.log("常规写法"); } 2.匿名函数,函数保存到变量里 var myfn = function(){ console.log("匿名函数,函数保存到变量里"); } 3.如果有多个变量,可以用对象收编变量 3.1 用json对象 var fnobject1={ fn1:function(){ console.log("第一个函数"); }, fn2:function(){
-
详解JavaScript函数callee、call、apply的区别
arguments.callee 关于callee的解释:callee 是 arguments 对象的一个属性.可以用于引用该函数的函数体内当前正在执行的函数.这在函数的名称是未知时很有用,例如在没有名称的函数表达式 (也称为"匿名函数")内. 递归调用实现一个阶乘函数: function sum(num){ if(num <= 1){ return 1; }else{ console.log(num, arguments.callee(num-1)); return num *
-
详解Javascript函数声明与递归调用
Javascript的函数的声明方式和调用方式已经是令人厌倦的老生常谈了,但有些东西就是这样的,你来说一遍然后我再说一遍.每次看到书上或博客里写的Javascript函数有四种调用方式,我就会想起孔乙己:茴字有四种写法,你造吗? 尽管缺陷有一堆,但Javascript还是令人着迷的.Javascript众多优美的特性的核心,是作为顶级对象(first-class objects)的函数.函数就像其他普通对象一样被创建.被分配给变量.作为参数被传递.作为返回值以及持有属性和方法.函数作为顶级对象,
-
详解javascript函数的参数
javascript函数可以用任意多个参数来调用,而不用管函数定义时指定了几个参数.因为函数是弱类型的,没有方法去声明它所期望的参数类型,并且给任何函数传递任何类型的值都是合法的. 1.Js函数可以传入不同的参数,如 function writeNString(strMsg){ document.write(strMsg + "<br>"); } 2.Js函数返回值,js函数可以将运行的结果返回,函数可以视为一个黑盒子,使用参数输入数据后产生所需的运行结果,如 functi
-
详解javascript事件绑定使用方法
由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所出现的错误.如果有多个javascript文件,那么极有可能出现多个window.onload事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了. IE方式 attachEvent(事件名称, 函数),绑定事件处理函数 detachEvent(事件名称, 函数),解除绑定 DO
-
详解JavaScript函数
函数是一组可以随时随地运行的语句,函数作为ECMAScript的核心是很重要的.函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.也就是函数是定义一次但却可以调用或执行任意多次的一段JavaScript代码.函数有时会有参数,即函数被调用时指定了值的局部变量.函数常常使用这些参数来计算一个返回值,这个值也成为函数调用表达式的值. 一.函数声明 函数对于任何语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方,任何时候调用执行.JS中的函数使用fun
-
详解JavaScript函数对象
函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. function One(leve , leve){ //code return leve+leve } 注释: 形参不需要加上类型: return语句为可选,没有return语句的函数返回undefined: 局部变量与全局变量 在函数内声明:局部变量 在函数外声明:全局变量 向一个新变量名赋值时并没有使用var:这个变量会变为新的全局变量 函数可以作为值 形式1: function init(){ alert("One&qu
-
JavaScript函数绑定用法实例分析
本文实例讲述了JavaScript函数绑定.分享给大家供大家参考,具体如下: Perface 如果让你实现这个页面和一些操作的,比如点击1.2.3等就在那个input text中显示,还有删除功能,拨打我们先不要管它,只是模拟而已.要是我刚开始做的话,我会这样做: 1. 用css.HTML布局那个界面 2. 用javascript的事件委托监听那个按钮的父节点的点击事件 但是如果我想用面向对象的思想做呢?我是用Ext做的,所以我想说的是它帮我封装了很多.可能一些没用过Ext的人不太了解我下面贴的
-
详解Javascript 中的 class、构造函数、工厂函数
到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol
随机推荐
- 使用PL/SQL Developer连接Oracle数据库的方法图解
- Android 退出多Activity的application的方式方法
- SignalR Self Host+MVC等多端消息推送服务(三)
- php读取excel文件的简单实例
- Asp下实现限制IP访问的程序代码
- Android 监听WiFi的开关状态实现代码
- 给ListBox添加双击事件示例代码
- jQuery mobile转换url地址及获取url中目录部分的方法
- 用vbs实现向任何电子邮件发送邮件
- sqlserver数据库中的表、字段sql语句
- jquery中object对象循环遍历的方法
- js自动滑动+鼠标滑动区域
- Android自定义view实现圆形、圆角和椭圆图片(BitmapShader图形渲染)
- 详解java中保持compareTo和equals同步
- python3实现公众号每日定时发送日报和图片
- Java基于外观模式实现美食天下食谱功能实例详解
- 给我一面国旗 python帮你实现
- MySQL数据库中null的知识点总结
- django模板结构优化的方法
- SPRING IOC注入方式过程解析