StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Functions</strong> are <em>objects</em>. They can have properties:</p> <pre><code>function F() {} F.key = "value"; alert(F.key) // "value" </code></pre> <p>You can also use functions as <em>constructors</em> called with <strong><code>new</code></strong>:</p> <pre><code>function F(val) { this.key = val; } var instance = new F("value") alert(instance.key) // "value" </code></pre> <p>The difference as you can see is that the first version only adds a <code>key</code> memeber to the <code>F</code> function object, while the second one initializes a new <code>key</code> member on every <em>instance</em> created by <strong><code>new</code></strong><code>F</code>.</p> <p>When you call a function via <strong><code>new</code></strong> an <em>instance</em> object is automatically created and can be augmented by the <code>this</code> keyword. Every constructor returns <code>this</code> by default.</p> <p>You can also add public methods to the function's <code>prototype</code>, and they will be available for all the <em>instances</em>. They can change their "state" (as you call it) individually using the <code>this</code> keyword.</p> <pre><code>function F(val) { this.state = val; } // unique F.prototype.change = function() { this.state = "stuff"; } var inst = new F("value") var inst2 = new F("value") alert(inst.state) // "value" alert(inst2.state) // "value" inst.change(); alert(inst.state) // "stuff" alert(inst2.state) // "value" </code></pre> <hr> <blockquote> <p><strong>jQuery</strong></p> </blockquote> <p>I can even tell you what jQuery is doing behind the scenes, but I don't think you really want to know. :)</p> <pre><code>var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context ); }, // ... jQuery.fn = jQuery.prototype = { init: function( selector, context ) { // ... }, // ... }; // Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn; </code></pre> <p>So basically <code>$(selector)</code> means <strong><code>new</code></strong><code>jQuery.fn.init(selector)</code>, it's just a shortcut for easier typing (and also to prevent the "bug" mentioned in the comments where fogetting <strong><code>new</code></strong> binds <code>this</code> to the <em>global object</em>, instead of the current instance).</p> <p>Also, the so-called plug-ins added as <code>jQuery.fn.ext</code> are mapped to <code>jQuery.fn.init.prototype</code> as you can see in the last line, it's another shortcut. So when you call <code>$(selector)</code> everything that is added to <code>jQuery.fn</code> will also be on <code>jQuery.fn.init.prototype</code> and so the new instance will have those methods as <code>$(selector).ext(...)</code>.</p> <pre><code>// as you use it today jQuery.fn.plugin = function ( ... ) { ... } $(selector).plugin( ... ) // as it would be without shortcuts jQuery.fn.init.prototype.plugin = function ( ... ) { ... } (new jQuery.fn.init(selector)).plugin( ... ) </code></pre>

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