掌握 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