diff options
Diffstat (limited to 'files/nl/web/javascript/reference/global_objects/function')
3 files changed, 0 insertions, 719 deletions
diff --git a/files/nl/web/javascript/reference/global_objects/function/apply/index.html b/files/nl/web/javascript/reference/global_objects/function/apply/index.html deleted file mode 100644 index 51428929f1..0000000000 --- a/files/nl/web/javascript/reference/global_objects/function/apply/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Function.prototype.apply() -slug: Web/JavaScript/Reference/Global_Objects/Function/apply -translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply ---- -<div>{{JSRef}}</div> - -<p>De <code><strong>apply()</strong></code> methode roept een functie aan met een gegeven <code>this</code> waarde en argumenten gedefineerd als een array (of een <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-achtig object</a>).</p> - -<div class="note"> -<p><strong>Let op:</strong> Hoewel de syntax van deze functie vrijwel gelijk is aan die van {{jsxref("Function.call", "call()")}}, is het fundamentele verschil met <code>call()</code> dat deze een <strong>lijst van argumenten</strong> accepteert, terwijl <code>apply()</code> een <strong>enkele array van argumenten</strong> verwacht.</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox notranslate"><var>fun</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>thisArg</code></dt> - <dd>De waarde van this die aan de call voor <em>fun</em> wordt meegegeven. Hou er rekening mee dat dit mogelijk niet de waarde is die de methode ziet: Als de methode gedefineerd is in <a href="https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="The documentation about this has not yet been written; please consider contributing!">non-strict mode</a> code, dan zullen <a href="https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/null" title="De waarde null representeerd voor het moedwillig weglaten, of de bedoelde afwezigheid van welk object of waarde dan ook. Het is een van JavaScript's primitive values."><code>null</code></a> en <a href="https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="The documentation about this has not yet been written; please consider contributing!"><code>undefined</code></a> worden vervangen met het globale object en primitieve waardes worden omgezet naar objecten (boxed).</dd> - <dt><code>argsArray</code></dt> - <dd>Een array-achtig object met de argumenten waarmee <em>fun </em>moet worden aangeroepen, of {{jsxref("null")}} of {{jsxref("undefined")}} als er geen argumenten worden gegeven. Vanaf ECMAScript 5 kunnen deze argumenten een generiek array-achtig object zijn in plaats van een array. Hieronder meer informatie over {{anch("Browser_compatibility", "browser compatibiliteit")}}.</dd> -</dl> - -<h3 id="Return_waarde">Return waarde</h3> - -<p>Het resultaat van de aanroep met de gegeven <code>this</code><strong> </strong>waarde en argumenten.</p> - -<h2 id="Omschrijving">Omschrijving</h2> - -<p>Het is mogelijk om een ander <code>this</code> object toe te wijzen indien je een bestaande functie aanroept. <code>this</code> verwijst naar het huidige object, het object dat de aanroep doet. Met <code>apply</code> kun je een methode eenmaal schrijven en het dan door overerving gebruiken in een ander object, zonder dat je de methode hoeft te herschrijven voor het nieuwe object.</p> - -<p><code>Apply</code> heeft veel overeenkomsten met {{jsxref("Function.call", "call()")}} maar heeft voor argumenten een andere notatie. je kunt een array van argumenten meegeven in plaats van een benoemde set aan argumenten. Met apply kun je zowel een array literal (bijv. <code><em>fun</em>.apply(this, ['eat', 'bananas'])</code>) gebruiken als een {{jsxref("Array")}} object (bijv. <code><em>fun</em>.apply(this, new Array('eat', 'bananas'))</code>).</p> - -<p>Je kunt ook {{jsxref("Functions/arguments", "arguments")}} meegeven als <code>argsArray</code> parameter. <code>arguments</code> is een locale variabele of functie, en kan gebruikt worden voor alle ongespecificeerde argumenten voor het aan te roepen object. Dit houdt in dat je niet precies hoeft te weten welke argumenten nodig zijn voor het aan te roepen object als je apply() gebruikt. Het aan te roepen object is vervolgens verantwoordelijk voor de afhandeling van de argumenten.</p> - -<p>Vanaf de 5e editie van ECMAScript kun je ook een willekeurig array-achtig object gebruiken, wat inhoud dat het een <code>length</code> en getallen met bereik <code>(0 ... length-1)</code> als properties heeft. Je kunt bijvoorbeeld een {{domxref("NodeList")}} of een op maat gemaakt object (zoals: <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code>) gebruiken.</p> - -<div class="note"> -<p><strong>Let op: </strong>De meeste browsers, waaronder Chrome 14 en Internet Explorer 9, ondersteunen array-achtige objecten nog niet. Deze zullen een exceptie geven als je het toch probeert.</p> -</div> - -<h2 id="Voorbeelden">Voorbeelden</h2> - -<h3 id="Apply_gebruiken_om_constructors_te_ketenen">Apply gebruiken om constructors te ketenen</h3> - -<p>Apply kan gebruikt worden om {{jsxref("Operators/new", "constructors", "", 1)}} voor een object aan elkaar te ketenen, gelijk aan de werkwijze in java. In het volgende voorbeeld maken we een globale {{jsxref("Function")}} methode genaamd <code>construct</code>, welke je in staat stelt om een array-achtig object te gebruiken in plaats van een lijst van argumenten.</p> - -<pre class="brush: js notranslate">Function.prototype.construct = function (aArgs) { - var oNew = Object.create(this.prototype); - this.apply(oNew, aArgs); - return oNew; -}; -</pre> - -<div class="note"> -<p><strong>Let op:</strong> De <code>Object.create()</code> methode die hierboven gebruikt wordt is vrij nieuw. Voor een alternatieve methode die gebruik maakt van closures kun je onderstaande voorbeeld ook gebruiken:</p> - -<pre class="brush: js notranslate">Function.prototype.construct = function(aArgs) { - var fConstructor = this, fNewConstr = function() { - fConstructor.apply(this, aArgs); - }; - fNewConstr.prototype = fConstructor.prototype; - return new fNewConstr(); -};</pre> -</div> - -<p>Voorbeeld gebruik:</p> - -<pre class="brush: js notranslate">function MyConstructor() { - for (var nProp = 0; nProp < arguments.length; nProp++) { - this['property' + nProp] = arguments[nProp]; - } -} - -var myArray = [4, 'Hello world!', false]; -var myInstance = MyConstructor.construct(myArray); - -console.log(myInstance.property1); // logs 'Hello world!' -console.log(myInstance instanceof MyConstructor); // logs 'true' -console.log(myInstance.constructor); // logs 'MyConstructor' -</pre> - -<div class="note"> -<p><strong>Let op:</strong> Deze niet native Function.construct methode zal niet werken met sommige native constructors (zoals {{jsxref("Date")}}, bij voorbeeld). In deze gevallen gebruik je de {{jsxref("Function.prototype.bind")}} methode (bij voorbeeld, stel je een array als de volgende voor, te gebruiken met {{jsxref("Global_Objects/Date", "Date")}} constructor: <code>[2012, 11, 4]</code>; in dit geval schrijf je bijvoorbeeld: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> — Hoewel dit werkt is dit in meerdere opzichten een kwetsbare manier die niet in productie gebruikt zou moeten worden).</p> -</div> - -<h3 id="Gebruik_van_apply_en_ingebouwde_functies">Gebruik van <code>apply</code> en ingebouwde functies</h3> - -<p>Slim gebruik van apply geeft de mogelijkheid om standaard javascript functies te gebruiken voor handelingen die anders in een loop zouden gebeuren. Als voorbeeld gaan we <code>Math.max</code>/<code>Math.min</code> gebruiken wat de maximum en minimum waardes zijn in een array.</p> - -<pre class="brush: js notranslate">// min/max number in an array -var numbers = [5, 6, 2, 3, 7]; - -// using Math.min/Math.max apply -var max = Math.max.apply(null, numbers); -// This about equal to Math.max(numbers[0], ...) -// or Math.max(5, 6, ...) - -var min = Math.min.apply(null, numbers); - -// vs. simple loop based algorithm -max = -Infinity, min = +Infinity; - -for (var i = 0; i < numbers.length; i++) { - if (numbers[i] > max) { - max = numbers[i]; - } - if (numbers[i] < min) { - min = numbers[i]; - } -} -</pre> - -<p>Maar pas op: door apply op deze manier te gebruiken loop je het risico over de maximum argument limiet van JavaScript's engine heen te gaan. De consequenties van het gebruik van apply op een functie met te veel argumenten (denk aan meer dan tienduizen argumenten) varieren tussen de verschillende engines (JavaScriptCore heeft een hard-coded <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">argument limiet van 65536</a>), omdat de limiet (en het gedrag bij extreem grote hoeveelheden objecten) niet is opgenomen in een standaard. Sommige engines zullen een exceptie opgooien, anderen kunnen mogelijk zelfs het aantal argumenten afkappen bij het maximum. Als je array toch het risico loopt te groeien voorbij de limiet, kun je beter een hybriede implementatie maken: voer je functie uit over stukken van een array, bijvoorbeeld: </p> - -<pre class="brush: js notranslate">function minOfArray(arr) { - var min = Infinity; - var QUANTUM = 32768; - - for (var i = 0, len = arr.length; i < len; i += QUANTUM) { - var submin = Math.min.apply(null, - arr.slice(i, Math.min(i+QUANTUM, len))); - min = Math.min(submin, min); - } - - return min; -} - -var min = minOfArray([5, 6, 2, 3, 7]); -</pre> - -<h3 id="Gebruik_van_apply_bij_monkey-patching">Gebruik van apply bij "monkey-patching"</h3> - -<p>Apply kan enorm nuttig zijn bij het monkey-patchen van browser-eigen- of framework-functies. Met bijvoorbeeld de <code>someobject.foo</code> functie, kun je de functie aanpassen op de volgende, ietwat smerige manier:</p> - -<pre class="brush: js notranslate">var originalfoo = someobject.foo; -someobject.foo = function() { - // Do stuff before calling function - console.log(arguments); - // Call the function as it would have been called normally: - originalfoo.apply(this, arguments); - // Run stuff after, here. -} -</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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initiele definitie. Geimplementeerd in JavaScript 1.3.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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> - <tr> - <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for 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> - <tr> - <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Zie_ook">Zie ook</h2> - -<ul> - <li>{{jsxref("Functions/arguments", "arguments")}} object</li> - <li>{{jsxref("Function.prototype.bind()")}}</li> - <li>{{jsxref("Function.prototype.call()")}}</li> - <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li> - <li>{{jsxref("Reflect.apply()")}}</li> -</ul> diff --git a/files/nl/web/javascript/reference/global_objects/function/call/index.html b/files/nl/web/javascript/reference/global_objects/function/call/index.html deleted file mode 100644 index aee4b67e7f..0000000000 --- a/files/nl/web/javascript/reference/global_objects/function/call/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -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 < 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 < 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> diff --git a/files/nl/web/javascript/reference/global_objects/function/index.html b/files/nl/web/javascript/reference/global_objects/function/index.html deleted file mode 100644 index 9cb0571d13..0000000000 --- a/files/nl/web/javascript/reference/global_objects/function/index.html +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: Function -slug: Web/JavaScript/Reference/Global_Objects/Function -tags: - - Constructor - - Function - - JavaScript - - NeedsTranslation - - TopicStub -translation_of: Web/JavaScript/Reference/Global_Objects/Function ---- -<div>{{JSRef}}</div> - -<p>The <strong><code>Function</code> constructor</strong> creates a new <code>Function</code> object. In JavaScript every function is actually a <code>Function</code> object.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> - <dd>Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> - <dt><code>functionBody</code></dt> - <dd>A string containing the JavaScript statements comprising the function definition.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p><code>Function</code> objects created with the <code>Function</code> constructor are parsed when the function is created. This is less efficient than declaring a function with a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> and calling it within your code, because such functions are parsed with the rest of the code.</p> - -<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.</p> - -<div class="note"> -<p><strong>Note:</strong> Functions created with the <code>Function</code> constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>Function</code> constructor was called. This is different from using {{jsxref("eval")}} with code for a function expression.</p> -</div> - -<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> - -<h2 id="Properties_and_Methods_of_Function">Properties and Methods of <code>Function</code></h2> - -<p>The global <code>Function</code> object has no methods or properties of its own, however, since it is a function itself it does inherit some methods and properties through the prototype chain from {{jsxref("Function.prototype")}}.</p> - -<h2 id="Function_prototype_object"><code>Function</code> prototype object</h2> - -<h3 id="Properties">Properties</h3> - -<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div> - -<h3 id="Methods">Methods</h3> - -<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div> - -<h2 id="Function_instances"><code>Function</code> instances</h2> - -<p><code>Function</code> instances inherit methods and properties from {{jsxref("Function.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all <code>Function</code> instances.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Specifying_arguments_with_the_Function_constructor">Specifying arguments with the <code>Function</code> constructor</h3> - -<p>The following code creates a <code>Function</code> object that takes two arguments.</p> - -<pre class="brush: js">// Example can be run directly in your JavaScript console - -// Create a function that takes two arguments and returns the sum of those arguments -var adder = new Function('a', 'b', 'return a + b'); - -// Call the function -adder(2, 6); -// > 8 -</pre> - -<p>The arguments "<code>a</code>" and "<code>b</code>" are formal argument names that are used in the function body, "<code>return a + b</code>".</p> - -<h3 id="A_recursive_shortcut_to_massively_modify_the_DOM">A recursive shortcut to massively modify the DOM</h3> - -<p>Creating functions with the <code>Function</code> constructor is one of the ways to dynamically create an indeterminate number of new objects with some executable code into the global scope from a function. The following example (a recursive shortcut to massively modify the DOM) is impossible without the invocation of the <code>Function</code> constructor for each new query if you want to avoid closures.</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>MDN Example - a recursive shortcut to massively modify the DOM</title> -<script type="text/javascript"> -var domQuery = (function() { - var aDOMFunc = [ - Element.prototype.removeAttribute, - Element.prototype.setAttribute, - CSSStyleDeclaration.prototype.removeProperty, - CSSStyleDeclaration.prototype.setProperty - ]; - - function setSomething(bStyle, sProp, sVal) { - var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle << 1], - aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2), - aNodeList = bStyle ? this.cssNodes : this.nodes; - - if (bSet && bStyle) { aArgs.push(''); } - for ( - var nItem = 0, nLen = this.nodes.length; - nItem < nLen; - fAction.apply(aNodeList[nItem++], aArgs) - ); - this.follow = setSomething.caller; - return this; - } - - function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); } - function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); } - function getSelectors() { return this.selectors; }; - function getNodes() { return this.nodes; }; - - return (function(sSelectors) { - var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);'); - oQuery.selectors = sSelectors; - oQuery.nodes = document.querySelectorAll(sSelectors); - oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; }); - oQuery.attributes = setAttribs; - oQuery.inlineStyle = setStyles; - oQuery.follow = getNodes; - oQuery.toString = getSelectors; - oQuery.valueOf = getNodes; - return oQuery; - }); -})(); -</script> -</head> - -<body> - -<div class="testClass">Lorem ipsum</div> -<p>Some text</p> -<div class="testClass">dolor sit amet</div> - -<script type="text/javascript"> -domQuery('.testClass') - .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum') - .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px'); -</script> -</body> - -</html> -</pre> - -<h2 id="Specifications">Specifications</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>Initial definition. Implemented in JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> - <td>{{Spec2('ES6')}}</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 for 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("Functions", "Functions and function scope")}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Statements/function", "function statement")}}</li> - <li>{{jsxref("Operators/function", "function expression")}}</li> - <li>{{jsxref("Statements/function*", "function* statement")}}</li> - <li>{{jsxref("Operators/function*", "function* expression")}}</li> - <li>{{jsxref("GeneratorFunction")}}</li> -</ul> |