zoukankan      html  css  js  c++  java
  • 掌握 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 编写功能代码。

  • 相关阅读:
    find the most comfortable road
    Rank of Tetris
    Segment set
    Codeforces Round #380 (Div. 2)D. Sea Battle
    A Bug's Life
    Is It A Tree?
    N皇后问题
    符号三角形
    2016 ICPC总结
    Sudoku Killer
  • 原文地址:https://www.cnblogs.com/lu215225/p/10553183.html
Copyright © 2011-2022 走看看