跟我学习Javascript的call(),apply(),bind()与回调

基础知识

在Javascript中，函数不仅可以像其他变量一样进行传递，还可以通过call(), apply()和bind()这三种函数方法来控制函数内部的this关键字。这三种方法的主要作用是改变调用函数的this指向。

• call()方法:

call()方法的作用是在函数体内部，将一个对象绑定到this关键字。并将参数作为函数调用时传入函数。语法如下：

function.call(thisArg, arg1, arg2, ...)

其中，thisArg是指代被调用函数内部的this指向的对象，arg1, arg2, … 是指用来调用函数的参数列表。

• apply()方法：

apply()方法的作用与call()方法类似，只是在参数的形式上有所不同。apply()方法接受的是一个数组。语法如下：

function.apply(thisArg, [argArray])

其中，thisArg参数为被调用函数内部的this指向的对象，argArray参数为一个数组，包含用来调用函数的参数。

• bind()方法：

bind()方法将被调用函数的this值绑定到一个特定的对象上，并返回该函数的一个新的复制版本，这个新版本的函数内部this指向了该特定的对象。bind()方法不会调用函数，它只是返回一个新函数对象。语法如下：

function.bind(thisArg[, arg1[, arg2[, ...]]])

其中，thisArg是被绑定到函数内部this密钥的对象，而arg1，arg2等是指定在调用原始函数时所需要的参数。

示例说明

在下面这个示例中，我们定义了一个矩形对象和一个输出该对象面积的函数：

let rectangle = {
    width: 10,
    height: 20,
    area: function() {
        return this.width * this.height;
    }
};

function printArea() {
    console.log("The area is " + this.area());
}

我们可以使用call()、apply()和bind()来控制printArea()函数内部的this指向。

• 使用call()方法:

我们可以使用以下代码将printArea()函数与rectangle对象绑定，以便在函数内部使用矩形对象的属性和方法：

printArea.call(rectangle);

• 使用apply()方法：

可以使用以下代码将printArea()函数与rectangle对象绑定，以便在函数内部使用矩形对象的属性和方法：

printArea.apply(rectangle);

• 使用bind()方法：

我们可以使用以下代码将printArea()函数与rectangle对象绑定，并创建一个新的函数，以便在新函数中使用矩形对象的属性和方法：

let printRectangleArea = printArea.bind(rectangle);
printRectangleArea();

上述示例中，我们创建了一个新的函数printRectangleArea，该函数继承了printArea()的所有属性和方法，但它的内部this指向了rectangle对象。因此，当我们调用printRectangleArea()函数时，它就会输出正确的矩形面积。

我们还可以在一个异步操作中使用回调函数来改变函数内部this的指向。例如：

let myObj = {
    myVar: 'Hello',
    myFunc: function(callback) {
        setTimeout(function() {
            callback.call(myObj); //使用call()方法
        }, 1000);
    }
};

myObj.myFunc(function() {
    console.log(this.myVar);
});

在这个例子中，myFunc()函数中的回调函数是通过使用call()方法来将myObj对象作为回调函数的this指向来进行调用的。

总结

使用call()、apply()和bind()方法可以使我们更好地控制函数内部this关键字的指向。这些方法可以在不更改函数原始定义的情况下，动态地向函数内部注入不同的上下文环境，从而实现更加灵活和多样化的函数调用方式。同时，在使用回调函数时，这些方法也能帮助我们改变函数内部this的指向，从而更好地管理异步代码中的上下文环境。