一个简单的函数绑定

在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函数绑定的更多相关文章

  1. 把多个JavaScript函数绑定到onload事件处理函数上的技巧

    一,onload事件发生条件 用户进入页面且页面所有元素都加载完毕.如果在页面的初始位置添加一个JavaScript函数,由于文档没有加载完毕,DOM不完整,可能导致函数执行错误或者达不到我们想要的效 ...

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

    为了让函数只在页面加载完毕后才得到执行,我们会把函数绑定到onload事件上: window.onload = userFunction 但如果有两个函数:firstFunction() 和 seco ...

  3. JavaScript 函数绑定 Function.prototype.bind

    ECMAScript Edition5 IE9+支持原生,作用为将一个对象的方法绑定到另一个对象上执行. Function.prototype.bind = Function.prototype.bi ...

  4. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  5. javascript多种继承方式(函数式，浅复制，深复制，函数绑定和借用)

    函数式继承: var object = function (obj) { if (typeof Object.create !== 'undefined') { return Object.creat ...

  6. Javascript函数重载，存在呢—还是存在呢？

    1.What's is 函数重载? );//Here is int 10 print("ten");//Here is string ten } 可以发现在C++中会根据参数的类型 ...

  7. JavaScript语言精粹读书笔记 - JavaScript函数

    JavaScript是披着C族语言外衣的LISP,除了词法上与C族语言相似以外,其他几乎没有相似之处. JavaScript 函数: 函数包含一组语句,他们是JavaScript的基础模块单元,用于代 ...

  8. javascript函数一共可分为五类： ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数

    javascript函数一共可分为五类:    ·常规函数    ·数组函数    ·日期函数    ·数学函数    ·字符串函数    1.常规函数    javascript常规函数包括以下9个 ...

  9. 深入理解javascript函数系列第一篇——函数概述

    × 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...

随机推荐

  1. JQuery 操作按钮遮罩（删除）

    HTML代码: <input type="button" class="delete_btn" value="删 除" /> & ...

  2. Linux内核分析第六周学习总结：进程的描述和进程的创建

    韩玉琪 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.进程的描述 ...

  3. SQL触发器中的deleted表和inserted表

    SQL触发器中的deleted表和inserted表 在触发器语句中用两个特殊的表一个是deleted表和inserted.它们是通过触发器操作自动创建驻留在内存中的临时表. 描述: Deleted表 ...

  4. Android支付之支付宝封装类

    今天介绍下在android中如何集成支付宝支付到自己的APP中去.让APP能够拥有方便,快捷的支付功能. 我们在做Android支付的时候肯定会用到支付宝支付,根据官方给出的demo做起来非常费劲,所 ...

  5. C++STL学习笔记_(1)string知识

    /*============================================ string是STL的字符串类型,通常用来表示字符串 = ======================== ...

  6. 关于Datagridview控件用法的一些总结（设置列chicun）

    1. 关于Datagridview控件用法的一些总结:http://www.cnblogs.com/mingjiatang/p/4968049.html

  7. 在Linux下安装配置phpMyAdmin步骤

    本文于CentOS 6.5下测试可行,欢迎转载和指正. phpMyAdmin是一种基于Web的免费MySQL管理工具.phpMyAdmin是用PHP编写的,因此只有支持PHP的服务器才能使用phpMy ...

  8. [转] 关于linux下通过shell命令（自动）修改用户密码

    关于linux下通过shell命令(自动)修改用户密码 2012-04-23 18:47:39 分类: 原文地址:关于linux下(自动)修改用户密码 作者:ubuntuer 本文章总结了如何手动.自 ...

  9. NC WebService接口开发流程

    一.定义类: 接口类 包定义在public下,接口类名为I开头,Service结尾 实现类 包定义在private下,实现类名以ServiceImpl结尾 VO类 若有VO类,也放在public下 U ...

  10. Mysql导入数据库的方法

    mysql导入数据库的方法 | 浏览:41023 | 更新:2012-11-01 19:45 1 2 3 4 5 6 7 分步阅读 MySQL是一个中.小型关系型数据库管理系统,由瑞典MySQL AB ...