applycall和bind

Posted 2020-11-14 紅葉

apply()和call()

虽然在一个独立的函数调用中，根据是否是strict模式，this指向undefined或window，不过，我们还是可以控制this的指向的！
要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数时在其中运行函数的作用域，第二个参数是Array的实例，也可以是arguments对象。

另一个与apply()类似的方法是call()，唯一区别是：apply()把参数打包成Array再传入，call()把参数按顺序传入。比如调用Math.max(3, 5, 4)，分别用apply()和call()实现如下：Math.max.apply(null, [3, 5, 4]); Math.max.call(null, 3, 5, 4); 对普通函数调用，我们通常把this绑定为null。

function sum(num1, num2){
     return num1 + num2;
}
function callSum(num1, num2){
     return sum.call(this, num1, num2);
}
function callSum1(num1, num2){
     return sum.apply(this, arguments);
}
function callSum2(num1, num2){
      return sum.apply(this, [num1, num2]);
}
console.log(callSum(10,10));   //20
console.log(callSum1(10,10));//20
console.log(callSum2(10,10));//20

apply和call常被用来扩展函数赖以运行的作用域。

window.color = ‘red‘;
var o = {color:‘blue‘};
function sayColor(){
    console.log(this.color);
}
sayColor();            //red
sayColor.call(this);   //red
sayColor.call(window); //red
sayColor.call(o);      //blue

在上面的例子中，定义了一个全局函数sayColor,在全局作用域中调用时，对this.color的求值会转换成对window.color的求值，sayColor.call(this)和sayColor.call(window)是两种显示地在全局作用域中调用函数的方式，结果都会显示"red"，但是当运行sayColor.call(o)时，函数的执行环境就不一样了，此时函数内的this对象指向了o,于是结果显示"blue"。

使用call()和apply()来扩充作用域的最大好处就是对象不需要与方法有任何耦合关系。

function getAge(){
var y = new Date().getFullYear();
    return y - this.birth;
}
var xiaoming = {
    name: ‘小明‘,
    birth: 1990,
    age: getAge
};
console.log(xiaoming.age());    //27
console.log(getAge.apply(xiaoming,[]));   //27

bind()

bind()是ES5新增的方法，这个方法的主要作用就是将函数绑定到某个对象
　　当在函数f()上调用bind()方法并传入一个对象o作为参数，这个方法将返回一个新的函数。以函数调用的方式调用新的函数将会把原始的函数f()当做o的方法来调用，传入新函数的任何实参都将传入原始函数。

function f(y){
    return this.x + y; //这个是待绑定的函数
}
var o = {x:1};//将要绑定的对象
var g = f.bind(o); //在函数f()上调用bind()方法并传入一个对象o作为参数,得到一个新的函数g
g(2);//3 

上面的代码就是把原始的函数f()当做o的方法来调用 ，传入实参都将传入原始函数。

var o={
    x:1
    f:function(y){
        return this.x + y;   //y=2
    }
}

bind()方法不仅是将函数绑定到一个对象，它还附带一些其他应用：除了第一个实参之外，传入bind()的实参也会绑定到this，这个附带的应用是一种常见的函数式编程技术，有时也被称为‘柯里化‘(currying)。

var sum = function(x,y){
    return x+y;
}
var succ = sum.bind(null,1); //在函数sum上调用bind()方法并传入一个对象window，得到新的函数succ，并且还到了一个实参到该对象中
succ(2); //3，x绑定到1，并传入2作为实参y

function f(y,z){
    return this.x + y + z; //this指向当前调用的对象或Window
}
var g = f.bind({x:1},2);
g(3); //6，this.x绑定到1，y绑定到2，z绑定到3