MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

De bind() methode creëert een nieuwe functie waarbij, wanneer uitgevoerd, het this keyword verwijst naar de gegeven waarde, met de gegeven lijst van arguments uit de vorige functie.

Syntaxis

fun.bind(thisArg[, arg1[, arg2[, ...]]])

Parameters

thisArg
De gegeven waarde die doorgegeven moet worden als de this parameter aan de aangewezen functie wanner de gebonden functie wordt uitgevoerd. De waarde wordt genegeerd als de gebonden functie is opgebouwd doormiddel van de new operator.
arg1, arg2, ...
 
Argumenten die worden toegekend aan argumenten die aan de gebonden functie worden toegekend wanneer de doelfunctie wordt ingeschakeld.

Return value

Een kopie van de gegeven functie met de gespecificeerde this waarde en de argumenten.

Beschrijving

De bind() functie creëert een nieuwe bound function (BF). Een BF is een exotic function object (een term van ECMAScript 2015) die het originele functie object omhult. Een BF uitvoeren resulteert meestal in de uitvoering van zijn omhulde functie.
Een BF heeft de volgende interne eigenschappen:

  • [[BoundTargetFunction]] - het gebonden functie object;
  • [[BoundThis]] - De waarde die altijd als de this waarde wordt gegeven wanneer de omhulde functie wordt uitgevoerd.
  • [[BoundArguments]] - een lijst van waardes die worden gebruikt als de eerste argumenten in elke omhulde functie.
  • [[Call]] - voert de code uit die geassocieerd wordt met dit object. Aangeroepen via een functie-aangeroepen expressie. De argumenten van de interne methode zijn een this waarde en een lijst bestaande uit de argumenten uit de call expression.

Wanneer een gebonden functie wordt uitgevoerd, roept hij een interne methode [[Call]] met de volgende argumenten: Call(target, boundThis, args). Waarin target [[BoundTargetFunction]] is, boundThis [[BoundThis]] is en args [[BoundArguments]] is.

Een gebonden functie mag ook gemaakt worden door de new operator: Dit doet alsof de doelfunctie is opgebouwd. De gegeven this  waarde wordt genegeerd, terwijl de voorgevoegde argumenten aan de geëmuleerde functie worden gegeven.

Voorbeelden

Een gebonden functie creëren

Het simpelste gebruik van de bind() functie is een functie maken die, maakt niet uit hoe aangeroepen, wordt met een gespecificeerde this waarde geroepen. 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;    // this refers to global "window" object here in the browser
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 the 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() and Function.prototype.apply(), built-in methods to have their original values.
  • The partial implementation creates functions that do not have immutable "poison pill" caller and arguments properties that throw a TypeError upon get, set, or deletion. (This could be added if the implementation supports Object.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 check 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 Latest Draft (ECMA-262)
The definition of 'Function.prototype.bind' in that specification.
Living Standard  

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 7 (Yes) 4.0 (2) 9 11.60 5.1
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.0 1 (Yes) 4.0 (2) ? 11.5 6.0

See also

Documentlabels en -medewerkers

Labels: 
 Aan deze pagina hebben bijgedragen: Jantje19
 Laatst bijgewerkt door: Jantje19,