一个简单的函数绑定

在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. pcm跟.wav文件的关系

    PCM(Pulse Code Modulation----脉码调制录音).所谓PCM录音就是将声音等模拟信号变成符号化的脉冲列,再予以记录.PCM信号是由[1].[0]等符号构成的数字信号,而未经过任 ...

  2. 比较详细PHP生成静态页面教程

    一,PHP脚本与动态页面. PHP脚本是一种服务器端脚本程序,可通过嵌入等方法与HTML文件混合, 也可以类,函数封装等形式,以模板的方式对用户请求进行处理.无论以何种方式,它的基本原理是这样的.由客 ...

  3. 三星framebuffer驱动代码分析

    一.驱动总体概述 本次的驱动代码是Samsung公司为s5pv210这款SoC编写的framebuffer驱动,对应于s5pv210中的内部外设Display Controller (FIMD)模块. ...

  4. java-web乱码问题解决

    <一>乱码问题(设置tomcat uriencoding=’utf-8’); 统一设置编码过滤器 <1>get请求: request.setCharacterEncoding( ...

  5. android笔记:DatePickerDialog日期设置对话框

    在开发中,可以通过DatePickerDialog来设置日期,TimePickerDialog来设置时间. 实例化DatePickerDialog对象之后,再调用show方法就可以显示对话框了. 具体 ...

  6. [转]VS 2013 连接数据库报错 未能加载文件或程序集 Microsoft.SqlServer.Management.Sdk.Sfc

    原文链接:http://stackoverflow.com/questions/16906686/could-not-load-file-or-assembly-microsoft-sqlserver ...

  7. [题解]hdu 1009 FatMouse' Trade（贪心基础题）

    Problem Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding th ...

  8. javascript this

    最近看了很多人的微博,主要是“追梦子”的微博,总结了一下.希望大家多多指点. 1. 没有new this的指向问题   this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向 ...

  9. 阿牛OCX编程助手

    ※◆☆★☆◆※欢迎使用阿牛OCX编程助手,此程序为按键精灵专用,如终请联系作者QQ:82850696*0*测试版已停用*0*2014-12-27 14:05:59*哈密*E2873D0137C6D04 ...

  10. Easyui 关闭弹出框后还显示验证提示信息

    今天下午做form表单,然后可以保存,可以关闭.可是关闭的时候老是会在屏幕左上角显示验证提示框,很是着急. 如图: 可能是easyui自己框架的问题,或许是因为网上有的人,自己代码写得有问题,没有调试 ...