StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In JavaScript, most <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-function-objects">functions</a> are both callable and instantiable: they have both a <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-function-objects-call-thisargument-argumentslist">[[Call]]</a> and <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-function-objects-construct-argumentslist-newtarget">[[Construct]]</a> internal methods.</p> <p>As callable objects, you can use parentheses to call them, optionally passing some arguments. As a result of the call, the function can <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-return-statement">return a value</a>.</p> <pre><code>var player = makeGamePlayer("John Smith", 15, 3); </code></pre> <p>The code above calls function <code>makeGamePlayer</code> and stores the returned value in the variable <code>player</code>. In this case, you may want to define the function like this:</p> <pre><code>function makeGamePlayer(name, totalScore, gamesPlayed) { // Define desired object var obj = { name: name, totalScore: totalScore, gamesPlayed: gamesPlayed }; // Return it return obj; } </code></pre> <p>Additionally, when you call a function you are also passing an additional argument under the hood, which determines the value of <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-this-keyword"><code>this</code></a> inside the function. In the case above, since <code>makeGamePlayer</code> is not called as a method, the <code>this</code> value will be the global object in sloppy mode, or undefined in strict mode.</p> <p>As constructors, you can use the <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-new-operator"><code>new</code> operator</a> to instantiate them. This operator uses the <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-function-objects-construct-argumentslist-newtarget">[[Construct]]</a> internal method (only available in constructors), which does something like this:</p> <ol> <li>Creates a new object which inherits from the <code>.prototype</code> of the constructor</li> <li>Calls the constructor passing this object as the <code>this</code> value</li> <li>It returns the value returned by the constructor if it's an object, or the object created at step 1 otherwise.</li> </ol> <pre class="lang-js prettyprint-override"><code>var player = new GamePlayer("John Smith", 15, 3); </code></pre> <p>The code above creates an instance of <code>GamePlayer</code> and stores the returned value in the variable <code>player</code>. In this case, you may want to define the function like this:</p> <pre><code>function GamePlayer(name,totalScore,gamesPlayed) { // `this` is the instance which is currently being created this.name = name; this.totalScore = totalScore; this.gamesPlayed = gamesPlayed; // No need to return, but you can use `return this;` if you want } </code></pre> <p>By convention, constructor names begin with an uppercase letter.</p> <p>The advantage of using constructors is that the instances inherit from <code>GamePlayer.prototype</code>. Then, you can define properties there and make them available in all instances</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload