bind()测试

bind()测试

<div style='font-weight:bold;color:#9d9d9d'>bind()方法会创建一个新的函数，称为绑定函数,fun方法在this环境下调用</div> 
 <div id='divid' style='font-weight:bold;color:#9d9d9d'></div> 
  
 <script>
 
 var divid = document.getElementById('divid');
  function showMsg(msg){
    divid .innerHTML = divid .innerHTML + '<br>'+msg;
               }
 
 function fun1() {
      var slice = Array.prototype.slice;
      return slice.apply(arguments);
  } 
 showMsg('bind()快捷使用一');
  showMsg(fun1(1,2,3));//[1,2,3]
 
 function fun2() {
     var unboundSlice = Array.prototype.slice;
     // 把函数的call方法绑定在数组slice方法上，之后再给call方法传递参数
     var slice = Function.prototype.call.bind(unboundSlice);
     return slice(arguments);
 }
 showMsg('bind()快捷使用二');
 showMsg(fun2(1,2,3));//[1,2,3]
 
 function list(){
     // 让类数组arguments拥有数组的方法slice，这个函数实现了简单把类数组转换成数组
     return Array.prototype.slice.call(arguments);
 }
 
 //给list绑定一个预设参数4 
 var list1 = list.bind(undefined,4);
 showMsg('bind()预设参数');
 showMsg(list1(1,2,3));//[4,1,2,3]
 
 showMsg('bind()对象转换...');
 this.num = 9; 
 var module = {
   num: 81,
   getNum: function() { return showMsg(this.num); }
 };
 module.getNum(); // 81
 var getNum = module.getNum;
 getNum(); // 9, 因为在这个例子中，'this'指向全局对象
 // 创建一个'this'绑定到module的函数
 var boundGetNum = getNum.bind(module);
 boundGetNum(); // 81
 showMsg('bind()对象转换结束！！！');
 
 showMsg('调用setTimeout的时候this会指向全局对象，但是使用类的方法时我们需要指向类的实例，所以要把this，绑定要回调函数方便继续使用实例');
 function FunTime() { 
   this.name = 1;
  }
 FunTime.prototype.fun2 = function() {
   window.setTimeout(this.fun3.bind(this), 1000);
  }
 FunTime.prototype.fun3 = function(){
     showMsg('name:'+this.name);//name:1
 }
 var fun = new FunTime();
 fun.fun2();
 </script>
 

 

posted @ 2019-03-05 21:11 月光小提琴 阅读( ...) 评论( ...)   编辑 收藏