• bind()使用方法


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

    语法

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

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

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

    实例 

    1.创建绑定函数

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

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

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

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

    1. 1 function list(){
    2. 2 // 让类数组arguments拥有数组的方法slice,这个函数实现了简单把类数组转换成数组
    3. 3 return Array.prototype.slice.call(arguments); 
    4. 4 }
    5. 5
    6. 6 list(1,2,3);//[1,2,3]
    7. 7
    8. 8 //给list绑定一个预设参数4
    9. 9 var list1 = list.bind(undefined,4);
    10. 10
    11. 11 list1();//[4]
    12. 12
    13. 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.  1 function fun1() {
    2.  2 var slice = Array.prototype.slice;
    3.  3 return slice.apply(arguments); 
    4. 4 }
    5.  5
    6.  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]
  • 相关阅读:
    安居客scrapy房产信息爬取到数据可视化(下)-可视化代码
    安居客scrapy房产信息爬取到数据可视化(上)-scrapy爬虫
    反贪风暴4-猫眼影评从爬取到可视化
    vue实战:路由监听
    vue实战——登录页面
    一个电商首页
    网页换肤
    小游戏—九宫格(拼图游戏)
    复选框(checkbox)、多选框
    CSS实现水平垂直居中
  • 原文地址:https://www.cnblogs.com/qhantime/p/13081295.html
Copyright © 2020-2023  润新知