JavaScript bind方法

JavaScript bind方法教程

在 JavaScript 中，bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

JavaScript bind详解

语法

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

参数

参数	描述
thisArg	调用绑定函数时作为 this 参数传递给目标函数的值。如果使用 new 运算符构造绑定函数，则忽略该值。当使用 bind 在 setTimeout 中创建一个函数（作为回调提供）时，作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为空，执行作用域的 this 将被视为新函数的 thisArg。
arg1, arg2, …	当目标函数被调用时，被预置入绑定函数的参数列表中的参数。

返回值

返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。

说明

bind() 函数会创建一个新的绑定函数（bound function，BF）。绑定函数是一个 exotic function object（怪异函数对象，ECMAScript 2015 中的术语），它包装了原函数对象。调用绑定函数通常会导致执行包装函数。

绑定函数具有以下内部属性：

[[BoundTargetFunction]] - 包装的函数对象
[[BoundThis]] - 在调用包装函数时始终作为 this 值传递的值。
[[BoundArguments]] - 列表，在对包装函数做任何调用都会优先用列表元素填充参数列表。
[[Call]] - 执行与此对象关联的代码。通过函数调用表达式调用。内部方法的参数是一个this值和一个包含通过调用表达式传递给函数的参数的列表。

当调用绑定函数时，它调用 [[BoundTargetFunction]] 上的内部方法 [[Call]]，就像这样 Call(boundThis, args)。其中，boundThis 是 [[BoundThis]]，args 是 [[BoundArguments]] 加上通过函数调用传入的参数列表。

绑定函数也可以使用 new 运算符构造，它会表现为目标函数已经被构建完毕了似的。提供的 this 值会被忽略，但前置参数仍会提供给模拟函数。

注意

Chrome 14 以及 Internet Explorer 9 仍然不接受类数组对象。如果传入类数组对象，它们会抛出异常。

案例

bind调用函数

使用 bind 实现调用函数

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript bind 方法</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            const person = {
              age: 18,
              getAge: function() {
                return this.age;
              }
            }
            const unbindGetAge = person.getAge;
            console.log("unbindGetAge =", unbindGetAge()); 
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

52_javascript bind.png

我们首先定义了一个 person 对象，该对象有一个 age 属性，同时，我们在 person 对象里定义了一个 getAge 函数，该函数返回 age 的值。

接着，我们将 person 对象的 getAge 函数赋值给了 unbindGetAge 变量，最后，我们通过 unbindGetAge() 的形式来调用该函数，输出了 undefined，即调用失败。现在，我们将程序修改如下：

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript bind 方法</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            const person = {
              age: 18,
              getAge: function() {
                return this.age;
              }
            }
            const unbindGetAge = person.getAge;
            const bindGetAge = unbindGetAge.bind(person);
            console.log("bindGetAge =", bindGetAge()); 
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

53_javascript bind.png

我们将 unbindGetAge 使用 bind 绑定到了 person 对象上去，此时，再次调用 bindGetAge() 我们可以看到，调用成功。

bind创建新函数

使用 bind 实现创建新函数并调用函数

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript bind 方法</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            this.age = 109;
            const person = {
              age: 18,
              getAge: function() {
                return this.age;
              }
            }
            const globalAge = person.getAge;
            console.log("globalAge =", globalAge());
            const bindGetAge = globalAge.bind(person);
            console.log("bindGetAge =", bindGetAge()); 
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

54_javascript bind.png

我们首先定义了一个全局的 age 属性并赋值为 109，接着，我们定义了一个 person 对象，该对象有一个 age 属性，赋值为 18。同时，我们在 person 对象里定义了一个 getAge 函数，该函数返回 age 的值。

接着，我们将 person 对象的 getAge 函数赋值给了 globalAge 变量，最后，我们通过 globalAge() 的形式来调用该函数，输出了 109，即全局的 age 属性的值。

最后，我们再次使用 bind 实现了将 globalAge 绑定到了 person 对象，此时，我们再次调用 bindGetAge()，此时输出了 18，即输出了 person 对象的 age 属性的值。

bind调用偏函数

使用 bind 实现调用偏函数

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript bind 方法</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function list() {
              return Array.prototype.slice.call(arguments);
            }
            function addArguments(arg1, arg2) {
                return arg1 + arg2
            }
            var list1 = list(1, 2, 3);
            var result1 = addArguments(1, 2); 
            // 创建一个函数，它拥有预设参数列表。
            var leadingThirtysevenList = list.bind(null, 37);
            // 创建一个函数，它拥有预设的第一个参数
            var addThirtySeven = addArguments.bind(null, 37); 
            var list2 = leadingThirtysevenList(); 
            console.log("list2 =", list2);
            var list3 = leadingThirtysevenList(1, 2, 3); 
            console.log("list3 =", list3);
            var result2 = addThirtySeven(5); 
            console.log("result2 =", result2);
            var result3 = addThirtySeven(5, 10);
            console.log("result3 =", result3);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

55_javascript bind.png

我们使用 bind 多次调用了偏函数。

JavaScript bind方法总结

在 JavaScript 中，bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。