zoukankan      html  css  js  c++  java
  • (转)javascript方法--bind()

    地址:https://www.cnblogs.com/xxxxBW/p/4914567.html

    bind方法,顾名思义,就是绑定的意思,到底是怎么绑定然后怎么用呢,下面就来说说我对这个方法的理解。

    语法

    fun.bind(this,arg1,arg2,...)

    bind()方法会创建一个新的函数,称为绑定函数,fun方法在this环境下调用

    该方法可传入两个参数,第一个参数作为this,第二个及以后的参数则作为函数的参数调用

    实例 

    1.创建绑定函数

     1 this.a = 1;
     2 var module = {
     3     a : 2,
     4     getA:function() {
     5     return this.a;    
     6     }
     7 };
     8 module.getA();//2
     9 
    10 var getA1 = module.getA;
    11 // getA在外部调用,此时的this指向了全局对象
    12 getA1();//1
    13 
    14 // 再把getA1方法绑定到module环境上
    15 var getA2 = getA1.bind(module);
    16 getA2();

    从上面的例子可以看出,为什么要创建绑定函数,就是当我们调用某些函数的时候是要在特定环境下才能调用到,所以我们就要把函数放在特定环境下,就是使用bind把函数绑定到特定的所需的环境下。

    2.让函数拥有预设的参数

    使用bind()方法使函数拥有预设的初始参数,这些参数会排在最前面,传给绑定函数的参数会跟在它们后面

     1 function list(){
     2     // 让类数组arguments拥有数组的方法slice,这个函数实现了简单把类数组转换成数组
     3     return Array.prototype.slice.call(arguments);
     4 }
     5 
     6 list(1,2,3);//[1,2,3]
     7 
     8 //给list绑定一个预设参数4 
     9 var list1 = list.bind(undefined,4);
    10 
    11 list1();//[4]
    12 
    13 list1(1,2,3);//[4,1,2,3]

    3.setTimeout的使用

    正常情况下,调用setTimeout的时候this会指向全局对象,但是使用类的方法时我们需要指向类的实例,所以要把this,绑定要回调函数方便继续使用实例

     1 function Fun1() { 
     2   this.name = 1;
     3  }
     4 Fun1.prototype.fun2 = function() {
     5   window.setTimeout(this.fun3.bind(this), 1000);
     6  }
     7 Fun1.prototype.fun3 = function(){
     8     console.log('name:'+this.name);//name:1
     9 }
    10 var fun = new Fun1();
    11 fun.fun2();

    4.快捷方法--把类数组转换成数组

    第一种方法是使用apply方法

    1  function fun1() {
    2      var slice = Array.prototype.slice;
    3      return slice.apply(arguments);
    4  }
    5  
    6 fun1(1,2,3);//[1,2,3]

    第二种方法是使用call方法和bind方法一起使用

    1 function fun2() {
    2     var unboundSlice = Array.prototype.slice;
    3     // 把函数的call方法绑定在数组slice方法上,之后再给call方法传递参数
    4     var slice = Function.prototype.call.bind(unboundSlice);
    5     return slice(arguments);
    6 }
    7 
    8 fun2(1,2,3);//[1,2,3]
  • 相关阅读:
    【转+补充】在OpenCV for Android 2.4.5中使用SURF(nonfree module)
    Delphi StarOffice Framework Beta 1.0 发布
    Angular ngIf相关问题
    angularjs文档下载
    公众号微信支付开发
    公众号第三方平台开发 教程六 代公众号使用JS SDK说明
    公众号第三方平台开发 教程五 代公众号处理消息和事件
    公众号第三方平台开发 教程四 代公众号发起网页授权说明
    公众号第三方平台开发 教程三 微信公众号授权第三方平台
    公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取
  • 原文地址:https://www.cnblogs.com/zhaobao1830/p/8016638.html
Copyright © 2011-2022 走看看