day-9.2 JS自带API（apply、bind）

call 方法的用法是可以改变this指向。

call是第一个实参是this重指向的对象，后面的实参和形参才形成对应关系

 1 <body>
 2         <div id="wrap"></div>
 3         <script>
 4             var oWrap = document.getElementById("wrap");
 5                 function fn (a , b ){
 6                     var c = a+b;
 7                     console.log(this +":"+ c);
 8                 }
 9                 fn.call(oWrap,3,4); //重指向到oWrap;
10         </script>
11 </body>

 

apply 是以数组的方式和函数形参对应，即apply的参数只有2个，第一个是重指向后this指向的对象。第二个是数组，通过数组和形参一一对应。和call的作用是一样的，只是格式不一样。

由于数组可能语义，代码上更简洁，所以一般用apply多一点。比如，我们这里可以把执行的时候传的数组实参独立出来，然后到时传参的时候再传这个数组的变量名就可以了。

1 function fn (a,b){
2   console.log(this);
3   console.log(a+b);
4 }
5 fn.apply(document,[3,4]);  //通过apply方法，将this重定向指向document ,数组 [3,4]对应 fn的形参

 

bind 不支持IE-9及以下；

函数执行的时候，通过call和 apply改变this指向，call和apply是执行表达式后面的一个方法，想用call和apply，函数就必须要执行；

比如

1 var j = {a:10};
2 document.onclick = fn.call(j)  //直接就自执行了。call和apply无法完成这种指向。
3 function fn (){
4   console.log(this);   
5 }

改成bind就可以实现这个效果

1 var j = {a:10};
2 document.onclick = fn.bind(j)  //改成bind就可以实现点击事件触发再执行这个效果。
3 function fn (){
4    console.log(this);   
5 }

bind的作用是，当函数在准备阶段的时候可以用bind绑定一个指向而不会使函数执行，当它真正执行的时候，指向会重新指向到bind绑定的指向。

bind的应用

1 <script>
2     fn(function(){
3             console.log(this);
4 }.bind(document));   //fn函数执行，传实参函数进去 
5     function fn (a){  //fn函数形参a接收该函数
6         a(); // 函数a自执行，由于该函数已经做了bind指向重写， 所以这里弹出document。
7 }
8 </script>

由于bind的是准备阶段即定义的时候修改的this指向，所以bind不涉及到为原函数传实参的问题，

 

posted @ 2018-06-12 16:31  bibiguo  阅读(112)  评论(0)    收藏  举报