bar.bind.bind

功能绑定 (Function Bind)

bind is a method on the prototype of all functions in JavaScript. It allows you to create a new function from an existing function, change the new function’s this context, and provide any arguments you want the new function to be called with. The arguments provided to bind will precede any arguments that are passed to the new function when it is called.

bind是JavaScript所有函数原型的一种方法。 它允许您从现有函数创建新函数，更改新函数的this上下文，并提供希望与新函数一起调用的参数。 提供给bind的参数将在调用新函数时传递给新函数的所有参数之前。

使用bind在函数中更改this设置 (Using bind to change this in a function)

The first argument provided to bind is the this context the function will be bound to. If you do not want to change the value of this pass null as the first argument.

提供给第一个参数bind是this上下文功能将被绑定到。 如果您不想更改this传递的null ，则将null作为第一个参数。

You are tasked with writing code to update the number of attendees as they arrive at a conference. You create a simple webpage that has a button that, when clicked, increments the numOfAttendees property on the confrence object. You use jQuery to add a click handler to your button, but after clicking the button the confrence object has not changed. Your code might look something like this.

您的任务是编写代码，以在与会者到达会议时更新他们的人数。 您创建一个简单的网页，有一个按钮，点击后，增量numOfAttendees的confrence对象的属性。 您使用jQuery向按钮添加了单击处理程序，但是单击按钮后confrence对象没有更改。 您的代码可能看起来像这样。

var nodevember = {numOfAttendees: 0,incrementNumOfAttendees: function() {this.numOfAttendees++;}// other properties
};$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees);

This is a common problem when working with jQuery and JavaScript. When you click the button the this keyword in the method you passed to jQuery’s on method references the button and not the conference object. You can bind the this context of your method to solve the problem.

在使用jQuery和JavaScript时，这是一个常见问题。 当您单击按钮时，传递给jQuery的on方法的方法中的this关键字引用该按钮，而不是会议对象。 您可以绑定方法的this上下文来解决问题。

var nodevember = {numOfAttendees: 0,incrementNumOfAttendees: function() {this.numOfAttendees++;}// other properties
};$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees.bind(nodevember));

Now when the button is clicked this references the nodevember object.

现在，当单击按钮时， this引用了nodevember对象。

使用bind为函数提供参数 (Providing arguments to a function with bind)

Each argument passed to bind after the first will precede any arguments passed when the function is called. This allows you to pre-apply arguments to a function. In the example below, combineStrings takes two strings and concatenates them together. bind is then used to create a function that always provides “Cool” as the first string.

在第一个参数之后传递给bind每个参数将在调用函数时传递的任何参数之前。 这使您可以将参数预先应用于函数。 在下面的示例中， combineStrings接受两个字符串并将它们串联在一起。 然后， bind用于创建始终提供“ Cool”作为第一个字符串的函数。

function combineStrings(str1, str2) {return str1 + " " + str2
}var makeCool = combineStrings.bind(null, "Cool");makeCool("trick"); // "Cool trick"

The guide on this reference has more information about how what the this keyword references can change.

此参考指南提供了有关this关键字参考的更改方式的更多信息。

More details on the bind method can be found on Mozilla’s MDN docs.

有关bind方法的更多详细信息，请参见Mozilla的MDN文档 。

功能长度 (Function Length)

The length property on the function object holds the number of arguments expected by the function when called.

函数对象上的length属性保存调用时函数期望的参数数量。

function noArgs() { }function oneArg(a) { }console.log(noArgs.length); // 0console.log(oneArg.length); // 1

ES2015语法 (ES2015 Syntax)

ES2015, or ES6 as it is commonly called, introduced the rest operator and default function parameters. Both of these additions change the way the length property works.

ES2015或俗称的ES6引入了rest运算符和默认函数参数。 这两个添加都更改了length属性的工作方式。

If either the rest operator or default parameters are used in a function declaration the length property will only include the number of arguments before a rest operator or a default parameter.

如果在函数声明中使用了rest运算符或默认参数，则length属性将仅在rest运算符或默认参数之前包含参数数量。

function withRest(...args) { }function withArgsAndRest(a, b, ...args) { }function withDefaults(a, b = 'I am the default') { }console.log(withRest.length); // 0console.log(withArgsAndRest.length); // 2console.log(withDefaults.length); // 1

More Information on Function.length can be found on Mozilla’s MDN Docs.

可以在Mozilla的MDN文档中找到有关Function.length更多信息。

翻译自: https://www.freecodecamp.org/news/function-prototype-bind-and-function-prototype-length-in-javascript-explained/

bar.bind.bind