zoukankan      html  css  js  c++  java
  • 函数绑定

    var handler = {

    message: "哈哈",
    handleClick: function(event){
    alert(this.message);
    }

    };
    document.body.addEventListener("click", handler.handleClick, false);    //点击的时候返回undefined而不是 "哈哈",因为this指向的是document.body,而这个对象没有message属性
    因为handler.handleClick()的上下文环境没有被保存

     

    改成下面就可以返回:
    document.body.addEventListener("click", function(event) {
        handler.handleClick(event);
    }, false);
    用闭包的方式调用handler.handleClick(event);就能保留对应上下文了

     
     

    很多框架都有一个方法叫做bind(),就是为了解决这个问题,保留特定的上下文环境
    function bind(fn, context){

    return function(){
         return fn.apply(context, arguments);
    };

    }
    注意这里传进的arguments是内部函数的,而不是bind的。

     
     

    ECMAScript 5 引入了原生的bind方法:
    var handler = {
    message: “Event handled”,
    handleClick: function(event){
    alert(this.message + “:” + event.type);
    }
    };
    var btn = document.getElementById(“my-btn”);
    EventUtil.addHandler(btn, “click”, handler.handleClick.bind(handler));

     

    绑定函数通常用于event handle和setTimeout等,但是会有更多消耗,因为需要更多的内存和更多的函数调用,必要的时候才用。

  • 相关阅读:
    Mongodb在Linux下的安装和启动和配置
    mongodb常用数据操作
    通过word2013发布博客到博客网
    weex h5开发区别-实践初级篇
    移动端h5调试方法
    DOM事件机制进一步理解
    搞不懂的柯里化
    移动端特殊css样式
    h5页面唤起app(iOS和Android),没有安装则跳转下载页面
    git使用笔记
  • 原文地址:https://www.cnblogs.com/chuangweili/p/5166320.html
Copyright © 2011-2022 走看看