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

    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方法一起使用

    复制代码
    function fun2() {
        var unboundSlice = Array.prototype.slice;
        // 把函数的call方法绑定在数组slice方法上,之后再给call方法传递参数
        var slice = Function.prototype.call.bind(unboundSlice);
        return slice(arguments);
    }
    
    fun2(1,2,3);//[1,2,3]
    复制代码
  • 相关阅读:
    将PHP文件生成静态文件源码
    Entity Framework Code First 学习日记(6)一对多关系
    Entity Framework Code First 学习日记(5)
    Entity Framework Code First 学习日记(3)
    Entity Framework Code First 学习日记(7)多对多关系
    Entity Framework Code First学习日记(2)
    Entity Framework Code First 学习日记(8)一对一关系
    Entity Framework Code First 学习日记(9)映射继承关系
    Entity Framework Code First 学习日记(10)兼容遗留数据库
    Entity Framework Code First 学习日记(4)
  • 原文地址:https://www.cnblogs.com/Tohold/p/10218366.html
Copyright © 2011-2022 走看看