Function.prototype.call()

De call() methode roept een functie aan met een gegeven this waarde en afzonderlijk gedefineerde argumenten.

Note: Hoewel de syntax van deze functie vrijwel gelijk is aan die van apply(), zit er een essentieel verschil tussen deze twee. De call() methode accepteert een argumentenlijst, terwijl apply() een enkele array met argumenten accepteert.

Syntax

function.call(thisArg[, arg1[, arg2[, ...]]])

Parameters

thisArg
De waarde van this die aan de call voor function wordt meegegeven. Houd er rekening mee dat dit mogelijk niet de waarde is die de methode ziet: Als de methode gedefineerd is in non-strict mode code, dan zullen null en undefined worden vervangen met het globale object en primitieve waardes worden omgezet naar objecten.
arg1, arg2, ...
De argumenten voor het object.

Return waarde

Het resultaat van het aanroepen van de functie met de gespecificeerde this waarde en argumenten.

Omschrijving

De call() methode staat het toe dat een functie of methode van een object om te worden toegewezen en aangeroepen voor een ander object.

Een ander this object worden toegewezen als er een bestaande functie wordt aangeroepen. this verwijst in principe naar het huidige object, het object wat de aanroep doet. Met call kun je een methode eenmaal schrijven en dan door overerving gebruiken in een ander object, zonder dat je de methode hoeft te herschrijven voor het nieuwe object.

Voorbeelden

call gebruiken om constructors aan elkaar te ketenen voor een object

call kan gebruikt worden om constructors voor een object aan elkaar te ketenen, vergelijkbaar met de werkwijze in Java. In het volgende voorbeeld is de constructor voor het Product object gedefineerd met twee parameters; name en price. De twee andere functies, Food en Toy, roepen Product aan en geven thisname en price mee. Product initializeert de eigenschappen name en price, en deze gespecializeerde functies defineren de category

function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price < 0) {
    throw RangeError('Cannot create product ' +
                      this.name + ' with a negative price');
  }
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

call gebruiken om een anonieme functie aan te roepen

In dit voorbeeld hebben we een anonieme functie, en gebruiken we call om deze aan te roepen voor elk object in een array. Het voornaamste doel van de anonieme functie is het toevoegen van een print functie aan elk object in de array. Het object meegeven als this waarde is niet strict noodzakelijk, maar laat wel de werking zien.

var animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];

for (var i = 0; i < animals.length; i++) {
  (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);
}

Call gebruiken om een functie aan te roepen en een context te geven aan 'this'.

In het onderstaande voorbeeld zal de waarde van this gebonden zijn aan het object obj wanneer we greet aanroepen.

function greet() {
  var reply = [this.person, 'is An Awesome', this.role].join(' ');
  console.log(reply);
}

var obj = {
  person: 'Douglas Crockford', role: 'Javascript Developer'
};

greet.call(obj); // Douglas Crockford Is An Awesome Javascript Developer

Call gebruiken om een functie aan te roepen zonder eerste argument

In het onderstaande voorbeeld roepen we de display functie aan zonder het eerste argument mee te geven. Als het eerste argument niet is meegegeven zal this worden gebonden aan het globale object.

var sData = 'Wisen';

function display() {
  console.log('sData value is %s ', this.sData);
}

display.call();  // sData value is Wisen

Note: De waarde van this is undefined in strict mode. Zie onderstaand.

'use strict';

var sData = 'Wisen';

function display() {
  console.log('sData value is %s ', this.sData);
}

display.call(); // Cannot read the property of 'sData' of undefined

Specificaties

Specification Status Comment
ECMAScript 1st Edition (ECMA-262) Standard Initiele definitie. Geimplementeerd in JavaScript 1.3.
ECMAScript 5.1 (ECMA-262)
The definition of 'Function.prototype.call' in that specification.
Standard
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Function.prototype.call' in that specification.
Standard
ECMAScript Latest Draft (ECMA-262)
The definition of 'Function.prototype.call' in that specification.
Draft

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome voor Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

See also