call apply bind

相同点:都可以改变函数内部的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)  //刘德华 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

 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博客