call() , apply() , bind() 方法，

Posted 2020-09-30

　　先来说说call() 和 apply()方法:

　　在《javascript高级程序设计》中有提到：函数也是对象，函数原型链的顶层实际上是指向Object的。既然函数是对象，那么自然就具有属性和方法。“ 每个函数都包含两个非继承而来的方法  call() , apply() ”

　　call() , apply() , 这两个方法其本质就是设置函数体内this对象指向的值，换个说法来理解这句话，一个对象可以通过call() 和 apply() 来调用其他对象的方法。比如说对象A拥有一个 sayName的方法，但是对象B没有这个方法，正常来说，我们就不能在对象B调用sayName方法，如果我们又不想为对象B定义一个sayName方法，这是就可以使用call() , apply() 

对象不需要和方法有任何的耦合关系！

function Person() {};
Person.prototype = {
   name: ‘Jersey‘,
   sayName:function() {
        console.log(this.name);
    }    
} 
var person1 = new Person();
person.sayName();  //           Jersey

var car = {
   name: ‘Car‘;  
}
car.sayName();     //  wrong!
person1.sayName.call(car);    //Car
person1.sayName.apply(car);    //Car 

//这时函数sayName里的this指向car


window.color = ‘red‘;
var o ={color: ‘biue‘}
function say() {
   console.log(this.color);    //  red  全局环境中this指向window      
}
say.call(this);    //red   设置say函数内的this指向这个this
say.call(window);    //red     设置say函数内的this指向window
say.call(o);    //biue   设置say函数内的this指向对象o ， 这是say函数的执行环境就改变了

call() 和 apply() 方法的作用相同，他们区别仅在于接收参数的方式不同。（这里就不多说了）

bind() 方法：

　　使用bind()方法会创建一个函数的实例（因为函数是对象嘛），这个函数实例的this值会被绑定到传入bind()方法的第一个参数上

window.color = ‘red‘;
var o = {color: ‘blue‘};
function say() {
    console.log(this.color);    //red
}
var sayColor = say.bind(o);    //首先创建了一个函数的实例，把原say函数的this值绑定到对象o上，在把这个函数实例保存到变量sayColor里
sayColor();    //blue     

使用call() 和 apply()方法会立即执行调用这两个方法的函数，使用bind()方法，会创建一个函数实例，在调用这个函数实例的时候才执行

其实要理解这三个方法最重要的就是理解函数对象，就把函数想象成普通的对象，然后call()  apply()  bind()  作为这个对象的方法去改变这个函数内部的一些东西