js改变this指向的call()；apply()；bing()的使用方式！

js改变this指向的call();apply();bing()的使用方式！

1、call()

我们在js中写上这样一个代码

  var o = {
           name :"andy"
       }
       function fn (){
           console.log(this)
       }
       fn()

发现打印出来的this是window；

这时候我们可以使用我们call()方法来改变this的指向；

var o = {
           name :"andy"
       }
       function fn (){
           console.log(this)
       }
       fn.call(o);//这个是上面的o对象

这里我们就把this指向变成了o对象了

call()方法不仅可以改变this指向问题，我们还可以进行数据的传参，如下：

     var o = {
           name :"andy"
       }
       function fn (a,b){
           console.log(this)
           console.log(a+b);
       }
       fn.call(o,1,2);//这个是上面的o对象  1、2是我们传递的参数

我们可以获取到结果：

call()的主要方式是用于继承

如下：

 function Father (uname,age,sex){
           this.uname = uname;
           this.age = age ;
           this.sex = sex;
       }
       function Son (uname,age,sex){
            Father.call(this,uname,age,sex)
       }
       var son = new Son ('么西么西',21,'男')
       console.log(son);

2、apple()

1、改变this的指向：

var o = {
           name :"andy"
       }
       function fn (){
           console.log(this)
       }
       fn.apply(o,);//这个是上面的o对象

2、传递参数（注意参数一定只能是数组形式）

 var o = {
           name :"andy"
       }
       function fn (arr){
           console.log(this)
           console.log(arr);
       }
       fn.apply(o,['666']);

3、apply()的主要应用：比如说我们可以利用apply的方法来借助于数学的内置对象求最大值，

var arr=[1,66,3,99,4]
       var max = Math.max.apply(Math,arr)
       console.log(max);

bind()

1、改变this的指向：

  var o = {
           name :"andy"
       }
       function fn (){
           console.log(this)
       }
       var f = fn.bind(o);
       f();

我们发现bind()不会调用原来的函数，但是可以改变原来的this指向然后返回一个原函数改变this指向的新函数！！！
2、数据传参
和call()方法一样，我们看一下：

   var o = {
           name :"andy"
       }
       function fn (a,b){
           console.log(this);
           console.log(a+b);
       }
       var f = fn.bind(o,11,22);
       f();

出来的效果是这样的：

典型应用：如果我们有的函数我们不需要立即调用函数但又想改变this的指向
比如：我们点击了一个按钮，我们在3秒之后开启，我们就是使用bind()：

<button>按钮</button>
    <script>
       var o = {
           name :"andy"
       }
       function fn (a,b){
           console.log(this);
           console.log(a+b);
       }
       var f = fn.bind(o,11,22);
       f();
       btn = document.querySelector("button")
       btn.onclick = function(){
           this.disabled = true;
           setTimeout(function(){
               this.disabled= false;
           }.bind(this),3000)//我们写在定时器的外面，此时this指定的是我们btn这个对象
           }
    </script>

好了！3种方法都说了！！！

现在总结一下：

相同点：
都可以改变函数内部的this指向。
区别点：
1、call和apply会调用函数，并且改变内部this指向
2、call和apply传递参数不一样，call传递参数aru1，aru2…形式，apply必须数组形式[arg]
3、bind不会调用函数，可以改变函数内部this指向。
主要应用场景
1、call经常做继承
2、apply经常跟数组有关系，比如借助于数学对象数组最大值最小值
3、bind不会调用函数，但是还想改变this指向，比如改变定时器内部的this指向。