理解 bind、apply 和 call

你可能在所有常用库中看到过这三个函数。它们允许局部套用，我们可以把功能组合到不同的函数。一个优秀的js开发者可以随时告诉你关于这三个函数。

基本上，这些是改变行为以实现某些功能的原型方法，根据 JS 开发人员 Chad 的说法，用法如下：

希望使用某个上下文调用该函数，请使用 .bind() ，这在事件中很有用。如果要立即调用函数，请使用.call() 或 .apply()，并修改上下文。

举例说明

让我们看看上面的陈述是什么意思! 假设你的数学老师要求你创建一个库并提交。你写了一个抽象的库，它可以求出圆的面积和周长：

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 精确到小数点后 5 位数而你只精确到 2 位，现在由于最后期限已过你没有机会提交库。这里 JS 的 call 函数可以帮你，只需要调用你的代码如下：

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

它会动态地获取新的 pi 值,结果如下：

12.56636

这时，注意到 call 函数具有两个参数：

Context
函数参数

在 area 函数中，上下文是对象被关键词 this 代替，后面的参数作为函数参数被传递。如下：

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

调用方式如下：

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 注入到指定的函数上，改变 this 的指向，使用 bind 时，函数不会像 call 或 apply 立即执行。

var newVolume = cylinder.volume.bind({pi: 3.14159});
newVolume(2,6); // Now pi is 3.14159

bind 用途是什么?

它允许我们将上下文注入一个函数，该函数返回一个具有更新上下文的新函数。这意味着这个变量将是用户提供的变量，这在处理 JavaScript 事件时非常有用。

理解 bind、apply 和 call

💬 COMMENT

👋友