path: root/files/nl/web/javascript/reference/global_objects/function/call/index.html

---
title: Function.prototype.call()
slug: Web/JavaScript/Reference/Global_Objects/Function/call
tags:
  - Functie
  - JavaScript
  - Méthode
translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
---
<div>{{JSRef}}</div>

<p>De <code><strong>call()</strong></code> methode roept een functie aan met een gegeven <code>this</code> waarde en afzonderlijk gedefineerde argumenten.</p>

<div class="note">
<p><strong>Note:</strong> Hoewel de syntax van deze functie vrijwel gelijk is aan die van {{jsxref("Function.prototype.apply", "apply()")}}, zit er een essentieel verschil tussen deze twee. De <code>call()</code> methode accepteert een <span style="font-size: 14px;"><strong>argumentenlijst</strong></span>, terwijl <code>apply()</code> een<strong> enkele array met argumenten </strong>accepteert.</p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox"><code><var>function</var>.call(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code>thisArg</code></dt>
 <dd>De waarde van <code>this</code> die aan de call voor <code><em>function</em></code> wordt meegegeven. Houd er rekening mee dat dit mogelijk niet de waarde is die de methode ziet: Als de methode gedefineerd is in {{jsxref("Functions_and_function_scope/Strict_mode", "non-strict mode", "", 1)}} code, dan zullen {{jsxref("Global_Objects/null", "null")}} en {{jsxref("Global_Objects/undefined", "undefined")}} worden vervangen met het globale object en primitieve waardes worden omgezet naar objecten.</dd>
 <dt><code>arg1, arg2, ...</code></dt>
 <dd>De argumenten voor het object.</dd>
</dl>

<h3 id="Return_waarde">Return waarde</h3>

<p>Het resultaat van het aanroepen van de functie met de gespecificeerde <strong><code>this</code> </strong>waarde en argumenten.</p>

<h2 id="Omschrijving">Omschrijving</h2>

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

<p>Een ander <code><strong>this</strong></code> object worden toegewezen als er een bestaande functie wordt aangeroepen. <code>this</code> verwijst in principe naar het huidige object, het object wat de aanroep doet. Met <code>call</code> 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.</p>

<h2 id="Voorbeelden">Voorbeelden</h2>

<h3 id="call_gebruiken_om_constructors_aan_elkaar_te_ketenen_voor_een_object"><code>call</code> gebruiken om constructors aan elkaar te ketenen voor een object</h3>

<p><code>call</code> 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 <code>Product</code> object gedefineerd met twee parameters; <code>name</code> en <code>price</code>. De twee andere functies, <code>Food</code> en <code>Toy</code>, roepen <code>Product</code> aan en geven <code>this</code>, <code>name</code> en <code>price</code> mee. <code>Product</code> initializeert de eigenschappen <code>name</code> en <code>price</code>, en deze gespecializeerde functies defineren de <code>category</code>. </p>

<pre class="brush: js">function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price &lt; 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);
</pre>

<h3 id="call_gebruiken_om_een_anonieme_functie_aan_te_roepen"><code>call</code> gebruiken om een anonieme functie aan te roepen</h3>

<p>In dit voorbeeld hebben we een anonieme functie, en gebruiken we <code>call</code> 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 <code>this</code> waarde is niet strict noodzakelijk, maar laat wel de werking zien.</p>

<pre class="brush: js">var animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];

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

<h3 id="Call_gebruiken_om_een_functie_aan_te_roepen_en_een_context_te_geven_aan_'this'.">Call gebruiken om een functie aan te roepen en een context te geven aan '<code>this</code>'.</h3>

<p>In het onderstaande voorbeeld zal de waarde van <code>this</code> gebonden zijn aan het object <code>obj</code> wanneer we <code>greet</code> aanroepen.</p>

<pre class="brush: js">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
</pre>

<h3 id="Call_gebruiken_om_een_functie_aan_te_roepen_zonder_eerste_argument">Call gebruiken om een functie aan te roepen zonder eerste argument</h3>

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

<pre class="brush: js"><code>var sData = 'Wisen';

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

display.call();  // sData value is Wisen</code></pre>

<div class="blockIndicator note">
<p><strong>Note:</strong> De waarde van <code>this</code> is <code>undefined</code> in strict mode. Zie onderstaand.</p>
</div>

<pre class="brush: js"><code>'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</code></pre>

<h2 id="Specificaties">Specificaties</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initiele definitie. Geimplementeerd in JavaScript 1.3.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome voor Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{jsxref("Function.prototype.bind()")}}</li>
 <li>{{jsxref("Function.prototype.apply()")}}</li>
 <li>
  <p><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introductie voor Object Georienteerd JavaScript</a></p>
 </li>
</ul>