Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>When you write a function like:</p> <pre><code>(function (foo, bar) { return foo.getElementById(bar); })(document, "myElement") </code></pre> <p>then the function is immediately called with arguments <code>document</code> and <code>"myElement"</code> for parameters <code>foo</code> and <code>bar</code>. Therefore, inside the function, <code>foo.getElementById(bar)</code> is equivalent to <code>document.getElementById("myElement")</code>.</p> <p>Similarly, in your plugin example, you are immediately calling the function with the arguments <code>jQuery, document, window</code>.</p> <blockquote> <p>What indeed is meant by <code>function($)</code>?</p> </blockquote> <p>The <code>$</code> simply represents a reference to a <code>jQuery</code> object that is passed in to the wrapper function. Later, when the anonymous function is called with <code>(jQuery, window, document)</code>, the <code>$</code> reference inside the function references the <code>jQuery</code> object. This is done for a number of reasons, not least of which is that <code>$</code> is quicker to type. It also allows the user to apply your plugin in wrapper to a <em>particular instance</em> of <code>jQuery</code>, produced perhaps by <code>jQuery.noConflict()</code>.</p> <blockquote> <p>Why should I include <code>window</code>, <code>document</code> and <code>undefined</code> as arguments of <code>function($)</code>?</p> </blockquote> <p>You don't <em>need</em> to include these. The original author's reasoning is that assigning function-local variables to reference these will shorten the time it takes to resolve these variables. I assert that the savings are negligible; I personally wouldn't bother unless I used <em>a lot</em> of references to <code>window</code> and/or <code>document</code>.</p> <p>As for <code>undefined</code>, the original author's purpose in including this is to ensure that someone hasn't altered the <code>undefined</code> global variable in EcmaScript 4 (edit: actually ECMAScript 3 -- version 4 never made it) or earlier. Again, I can't envision this problem cropping up. If you're truly worried that this could be a problem, just include something like this in your function:</p> <pre><code>if(typeof undefined !== "undefined") { undefined = void 0; } </code></pre> <blockquote> <p>If I do it, how do I access the actual <code>window</code> and <code>document</code> objects?</p> </blockquote> <p>All you have to do is make sure that the function call at the end of your anonymous function passes in the actual (jQuery, window, document) parameters. Or, don't include the <code>window</code> and <code>document</code> arguments in your function signature. Either way, you will be referring to the <em>actual</em> objects, regardless of the level of indirection.</p> <blockquote> <p><code>undefined</code> what, and why?</p> </blockquote> <p><code>undefined</code> is a global variable of type "undefined". Fields that have not been initialized are exactly equal (===) to undefined. It allows the programmer to differentiate between a deliberately null value and a simple uninitialized one. In ECMAScript 5 and later, <code>undefined</code> is read only. Prior to that, it is possible that other code could modify the value of <code>undefined</code>. You can <em>always</em> get the true value <code>undefined</code> with the expression <code>void 0</code>... as in <code>myUndefinedVar = void 0;</code>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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