JavaScript 中的 call()、apply() 和 bind() 方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/latency_cheng/article/details/77679741

call()、apply() 和 bind() 都用于在特定的作用域中调用函数，实际上等于设置函数体内this 对象的值。

其中，call() 和 apply() 由函数直接调用，bind() 则创建一个函数的实例。

1、call() 和 apply() 

call() 和 apply() 的唯一区别在于接收参数的方式不同：

call() 第一个参数为作用域，其余参数都直接传递给执行函数。

apply() 第一个参数为作用域，第二个参数是参数数组，可以是Array 的实例，也可以是 arguments 对象。

function sum(num1, num2){
    return num1 + num2;
}
function callSum1(num1, num2){
    return sum.apply(this, arguments); // 传入arguments 对象
}
function callSum2(num1, num2){
    return sum.apply(this, [num1, num2]); // 传入数组
}
function callSum3(num1, num2){
    return sum.call(this, num1, num2);//直接传入参数
}
alert(callSum1(10,10)); //20
alert(callSum2(10,10)); //20
alert(callSum3(10,10)); //20

2、bind()

接收一个参数，即作用域。会创建一个函数的实例，其this 值会被绑定到传给bind()函数的值。

window.color = "red";
var o = { color: "blue" };
function sayColor(){
    alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue

3、一个应用场景

var handler = {
    message: "Event handled",

    handleClick: function(){
        alert(this.message);
    }
};
$('#button').click(handler.handleClick);

在上面这个例子中，创建了一个叫做handler 的对象。handler.handleClick()方法被分配为一个按钮的事件处理程序。当按下该按钮时，就调用该函数，显示一个警告框。虽然貌似警告框应该显示Event handled ， 然而实际上显示的是undefiend 。这个问题在于没有保存handler.handleClick()的环境，所以this 对象最后是指向了按钮而非handler。

解决方案：

（1）使用闭包

$('#button').click(function(){
    handler.handleClick();
})

（2）使用bind()

$('#button').click(handler.handleClick.bind(handler));