This article needs a technical review. How you can help.
The bind()
method creates a new function that, when called, has its this
keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
Syntax
fun.bind(thisArg[, arg1[, arg2[, ...]]])
Parameters
thisArg
- The value to be passed as the
this
parameter to the target function when the bound function is called. The value is ignored if the bound function is constructed using thenew
operator. arg1, arg2, ...
- Arguments to prepend to arguments provided to the bound function when invoking the target function.
Return value
A copy of the given function with the specified this
value and initial arguments.
Description
The bind() function creates a new bound function (BF). A BF is an exotic function object (term from ECMAScript 6) that wraps the original function object. Calling a BF generally results in the execution of its wrapped function.
A BF has the following internal properties:
- [[BoundTargetFunction]] - the wrapped function object;
- [[BoundThis]] - the value that is always passed as the this value when calling the wrapped function.
- [[BoundArguments]] - a list of values whose elements are used as the first arguments to any call to the wrapped function.
- [[Call]] - executes code associated with this object. Invoked via a function call expression. The arguments to the internal method are a this value and a list containing the arguments passed to the function by a call expression.
When bound function is called, it calls internal method [[Call]] with following arguments Call(target, boundThis, args). Where, target is [[BoundTargetFunction]], boundThis is [[BoundThis]], args is [[BoundArguments]].
A bound function may also be constructed using the new
operator: doing so acts as though the target function had instead been constructed. The provided this
value is ignored, while prepended arguments are provided to the emulated function.
Examples
Creating a bound function
The simplest use of bind()
is to make a function that, no matter how it is called, is called with a particular this
value. A common mistake for new JavaScript programmers is to extract a method from an object, then to later call that function and expect it to use the original object as its this
(e.g. by using that method in callback-based code). Without special care however, the original object is usually lost. Creating a bound function from the function, using the original object, neatly solves this problem:
this.x = 9; var module = { x: 81, getX: function() { return this.x; } }; module.getX(); // 81 var retrieveX = module.getX; retrieveX(); // returns 9 - The function gets invoked at the global scope // Create a new function with 'this' bound to module // New programmers might confuse the // global var x with module's property x var boundGetX = retrieveX.bind(module); boundGetX(); // 81
Partially applied functions
The next simplest use of bind()
is to make a function with pre-specified initial arguments. These arguments (if any) follow the provided this
value and are then inserted at the start of the arguments passed to the target function, followed by the arguments passed to the bound function, whenever the bound function is called.
function list() { return Array.prototype.slice.call(arguments); } var list1 = list(1, 2, 3); // [1, 2, 3] // Create a function with a preset leading argument var leadingThirtysevenList = list.bind(null, 37); var list2 = leadingThirtysevenList(); // [37] var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
With setTimeout
By default within window.setTimeout()
, the this
keyword will be set to the window
(or global
) object. When working with class methods that require this
to refer to class instances, you may explicitly bind this
to the callback function, in order to maintain the instance.
function LateBloomer() { this.petalCount = Math.ceil(Math.random() * 12) + 1; } // Declare bloom after a delay of 1 second LateBloomer.prototype.bloom = function() { window.setTimeout(this.declare.bind(this), 1000); }; LateBloomer.prototype.declare = function() { console.log('I am a beautiful flower with ' + this.petalCount + ' petals!'); }; var flower = new LateBloomer(); flower.bloom(); // after 1 second, triggers the 'declare' method
Bound functions used as constructors
Warning: This section demonstrates JavaScript capabilities and documents some edge cases of the bind()
method. The methods shown below are not the best way to do things and probably should not be used in any production environment.
Bound functions are automatically suitable for use with the new
operator to construct new instances created by the target function. When a bound function is used to construct a value, the provided this
is ignored. However, provided arguments are still prepended to the constructor call:
function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function() { return this.x + ',' + this.y; }; var p = new Point(1, 2); p.toString(); // '1,2' // not supported in the polyfill below, // works fine with native bind: var YAxisPoint = Point.bind(null, 0/*x*/); var emptyObj = {}; var YAxisPoint = Point.bind(emptyObj, 0/*x*/); var axisPoint = new YAxisPoint(5); axisPoint.toString(); // '0,5' axisPoint instanceof Point; // true axisPoint instanceof YAxisPoint; // true new Point(17, 42) instanceof YAxisPoint; // true
Note that you need do nothing special to create a bound function for use with new
. The corollary is that you need do nothing special to create a bound function to be called plainly, even if you would rather require the bound function to only be called using new
.
// Example can be run directly in your JavaScript console // ...continuing from above // Can still be called as a normal function // (although usually this is undesired) YAxisPoint(13); emptyObj.x + ',' + emptyObj.y; // > '0,13'
If you wish to support use of a bound function only using new
, or only by calling it, the target function must enforce that restriction.
Creating shortcuts
bind()
is also helpful in cases where you want to create a shortcut to a function which requires a specific this
value.
Take Array.prototype.slice
, for example, which you want to use for converting an array-like object to a real array. You could create a shortcut like this:
var slice = Array.prototype.slice; // ... slice.apply(arguments);
With bind()
, this can be simplified. In the following piece of code, slice
is a bound function to the apply()
function of Function.prototype
, with the this
value set to the slice()
function of Array.prototype
. This means that additional apply()
calls can be eliminated:
// same as "slice" in the previous example var unboundSlice = Array.prototype.slice; var slice = Function.prototype.apply.bind(unboundSlice); // ... slice(arguments);
Polyfill
You can partially work around this by inserting the following code at the beginning of your scripts, allowing use of much of the functionality of bind()
in implementations that do not natively support it.
if (!Function.prototype.bind) { Function.prototype.bind = function(oThis) { if (typeof this !== 'function') { // closest thing possible to the ECMAScript 5 // internal IsCallable function throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); } var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, fNOP = function() {}, fBound = function() { return fToBind.apply(this instanceof fNOP ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments))); }; if (this.prototype) { // Function.prototype doesn't have a prototype property fNOP.prototype = this.prototype; } fBound.prototype = new fNOP(); return fBound; }; }
Some of the many differences (there may well be others, as this list does not seriously attempt to be exhaustive) between this algorithm and the specified algorithm are:
- The partial implementation relies on
Array.prototype.slice()
,Array.prototype.concat()
,Function.prototype.call()
andFunction.prototype.apply()
, built-in methods to have their original values. - The partial implementation creates functions that do not have immutable "poison pill"
caller
andarguments
properties that throw aTypeError
upon get, set, or deletion. (This could be added if the implementation supportsObject.defineProperty
, or partially implemented [without throw-on-delete behavior] if the implementation supports the__defineGetter__
and__defineSetter__
extensions.) - The partial implementation creates functions that have a
prototype
property. (Proper bound functions have none.) - The partial implementation creates bound functions whose
length
property does not agree with that mandated by ECMA-262: it creates functions with length 0, while a full implementation, depending on the length of the target function and the number of pre-specified arguments, may return a non-zero length.
If you choose to use this partial implementation, you must not rely on those cases where behavior deviates from ECMA-262, 5th edition! With some care, however (and perhaps with additional modification to suit specific needs), this partial implementation may be a reasonable bridge to the time when bind()
is widely implemented according to the specification.
Please checkout https://github.com/Raynos/function-bind for a more thorough solution!
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 5.1 (ECMA-262) The definition of 'Function.prototype.bind' in that specification. |
Standard | Initial definition. Implemented in JavaScript 1.8.5. |
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Function.prototype.bind' in that specification. |
Standard | |
ECMAScript 2017 Draft (ECMA-262) The definition of 'Function.prototype.bind' in that specification. |
Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 7 | 4.0 (2) | 9 | 11.60 | 5.1 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4.0 | 1 | 4.0 (2) | ? | 11.5 | 6.0 |