call、apply、bind，改变this指向

        改变this指向的三种方法，一直是面试的经典问题，也是开发中的一个重点问题。本次文章来聊一下this的指向怎么使用call、apply、bind来改变。

1. call ( 新的this指向,参数一,参数二...)   参数不必传

        demo1：不传参，改变this指向

   function changeThis() {
        console.log(this)
    }
    const obj={name:'猪八戒',sex:'male'};
    changeThis.call(); //不传参数默认指向window
    changeThis.call(window); //window
    changeThis.call(document);// #document
    changeThis.call(obj); //{name: '猪八戒', sex: 'male'}

        demo2：传参，改变this指向

   var Dog={
        say:'wangwnagwang...,我吃',
        eat:function(food){
            console.log(this.say+food)
        }
    }
    Dog.eat('骨头'); //wangwnagwang...,我吃骨头

    var Cat={
        say:'miaomiaomiao...,我吃',
        eat:function(food){
            console.log(this.say+food)
        }
    }
    Cat.eat('鱼'); //miaomiaomiao...,我吃鱼
    // 使用call,这里将this指向了Dog
    Cat.eat.call(Dog,'鱼'); //wangwnagwang...,我吃鱼

2. apply ( 新的this指向, [参数一,参数二...])   参数可不传

call() 和 apply() 相似，不传参的时候用法一样

不同之处是：

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

如果要使用数组而不是参数列表，则 apply() 方法非常方便。

demo：

    var Person={
        likes:function(like3,like4){
            console.log(this.like1,this.like2,like3,like4)
        }
    }
    var  MiYang={
        like1:'黑木耳',
        like2:'银耳',
    }
    Person.likes.call(MiYang,'苹果','橘子')  //黑木耳 银耳 苹果 橘子
    Person.likes.apply(MiYang,['苹果','橘子'])  //黑木耳 银耳 苹果 橘子

情景题：快速找出一个数组里的最大值

    // 找出数组中的最大值 
    const array1=            
      [21,123,45,213,45,41,341,2,31,3,413,1,423,41,5341,3,41,341,12312,453,123,1];
    const maxNum= Math.max.apply(null,array1)
    console.log(maxNum)  //12312

3. bind：

bind与call和apply的区别：
bind的返回值是一个函数，需要自己去调用，而call和apply是立即调用。

demo1：

   var pig={
        name:'猪八戒'
    }
    function Animal(){
        console.log(this.name)
    }
    Animal.bind(pig)    // f Animal(){...}
    Animal.bind(pig)()  // '猪八戒'

demo2:

传参形式 

   function Animal(a,b,c){
        console.log(a,b,c)
    }
    // 正常调用
    Animal('dog','cat','pig')  //dog cat pig
    // 使用call改变this指向调用
    Animal.call(null,'dog','cat','pig')  //dog cat pig
    // 使用apply改变this指向调用
    Animal.apply(null,['dog','cat','pig'])  //dog cat pig
    // 使用bind改变this指向调用
    Animal.bind(null,'dog','cat','pig')()  // dog cat pig
    Animal.bind(null)('dog','cat','pig')  // dog cat pig

    // 这种情况下,
    // bind的第二个参数会作为Animal的第一个参数，
    // 执行方法的第一第二个参数会作为Animal的第二第三个参数
    Animal.bind(null,'cat')('dog','cat','pig')  // cat dog cat