call apply bind

   概   念   

相同点:

1.都可以改变函数内部的this指向

区别点:

1.call和apply会调用函数，并且改变函数内部this指向

2.call和apply传递的参数不一样，call传递参数aru1,aru2...形式 apply必须是数组形式

3.bind不会调用函数，可以改变函数内部this指向

  主  要   应  用  场  景   

1.call经常做继承

2.apply经常跟数组有关系，比如借助于数学对象实现数组最大值最小值

3.bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向

        var o={

            name:'andy'

        }

        function fn(a,b){

            console.log(this) //window

            console.log(a+b)

        }

        fn.call(o,1,2)   //this=>andy 2

实现继承

 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('刘德华',18,'男');

        console.log(son)  //Son(刘德华 18 男)

apply的应用

  var o={

            name:'andy'

        }

        function fn(arr){

            console.log(this)

            console.log(arr)

        }

         fn.call(o,['pink']) //andy pink

apply的主要应用 比如我们可以利用apply借助于数学的内置对象求最大值

 //Math.max()

        var arr=[1,66,3,55,36]

        // var max=Math.max.apply(null,arr)

        var max=Math.max.apply(Math,arr)

        var min=Math.min.apply(Math,arr)

        console.log(max,min) //1 66

/// 目前es6的解构更加完美解决这个问题
   Math.max(...arr)
// 且类数据转换 成数组
    [... arguments]

 var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)
  },
  func2: function () {
   setTimeout( function () {
    this.func1()
   }.apply(a),100);
  }
 };
 a.func2()   // Cherry

    //    bind()方法

    // 1.不会调用原来的函数，可以改变原来函数内部的this指向

    // 2.返回的是原函数改变this之后产生的新函数

    // 3.如果有的函数我们不需要立即调用，但是又想改变这个函数内部的this指向此时用bind
 

     //点击按钮时，我们点击之后，就禁用这个按钮，3秒钟之后开启这个按钮

  // var btn=document.querySelector('bntton');

    // btn.οnclick=function(){

    //     this.disabled=true; //这个this指向btn

    //     var that=this;

    //     setTimeout(function(){

    //        that.disabled=false  //加上that之后,this被改变成btn

    //         //定时器函数里面的this指向的是window

    //     },3000)

    // }

    // 此时用bind方法更简单

      

    // var btn=document.querySelector('bntton');

    // btn.οnclick=function(){

    //     this.disabled=true; //这个this指向btn

    //     setTimeout(function(){

    //         disabled=false  //加上that之后,this被指向btn

    //         //定时器函数里面的this指向的是window

    //     }.bind(this),3000)  //改变定时器this指向，这个this指向是btn

    // }

饮水思源：Es6 call(),apply(),bind()_^smile的博客-CSDN博客