掌握 bind, apply 和 call 的用法

这些函数在所有知名的库中可能都可以看到。它们提供了柯里化的方法,可通过编写不同的函数来实现功能。优秀的 JavaScript 开发者可以随时说出这三个函数的用法。

本质上,它们是函数的原型方法,通过改变行为来实现某些功能。根据 JS 开发者 Chad 的说法,它们的用法是这样的:

当希望延迟调用带有特定上下文的函数时,使用 .bind(),这在事件中很有用。当希望立刻调用函数时,使用 .call() 或 .apply(),同时会修改上下文。

call 函数拯救了我!

让我们看看上面论述代表什么意思。假设你的数学老师要求你创建一个库并提交它。你编写了一个计算圆的面积与周长的抽象的库。

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

你把代码库提交给老师。现在运行调用该数学库的代码。

mathLib.area(2);
12.56

正要提交第二个代码示例时,你恍然发觉老师要求 pi 常数精确到小数点后五位。噢天哪!你是用了3.14不是3.14159。但现在截止日期已过,不能再提交代码了。JS 的 call 函数拯救了你。只需这样:

mathLib.area.call({pi: 3.14159}, 2);

那么它在执行中会取新的pi值。输出结果是:

12.56636

如此,老师会很欣慰。你会发现 call 函数接收了两个参数:

  • 上下文

  • 函数参数

上下文是在函数体内替换 this 的对象。接着,参数会通过函数的参数传入。例如:

var cylinder = {
    pi: 3.14,
    volume: function(r, h) {
        return this.pi * r * r * h;
    }
};

call 是这样用的:

cylinder.volume.call({pi: 3.14159}, 2, 6);
75.39815999999999

发现了吗?函数参数是在上下文对象后,作为参数传递的。

Apply 是完全相同的用法,只是函数参数是以列表的形式传递。

cylinder.volume.apply({pi: 3.14159}, [2, 6]);
75.39815999999999

如果你了解 call 函数,那你就也了解 apply 函数,反之亦然。那什么是 bind 函数?

Bind 将一个全新的 this 赋给指定的函数。Bind 与 call 或 apply 不同,bind 情况下,函数不会立即执行。

var newVolume = cylinder.volume.bind({pi: 3.14159}); // This is not instant call
// After some long time, somewhere in the wild
newVolume(2,6); // Now pi is 3.14159

Bind 函数有什么用途?它提供了给函数传入上下文的方法,并返回带有更新的上下文的函数。

这意味着 this 变量就是用户提供的变量。这在处理 JavaScript 事件时非常有用。

建议掌握这三个函数,以便用 JavaScript 编写功能代码。

原文地址:https://www.cnblogs.com/lu215225/p/10553183.html