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

骑猪看日落 2022-06-09 06:08 259阅读 0赞

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

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

**1、call() 和 apply() **

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

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

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

**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));