StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>For global code (code that is not part of any function), they are <em>almost</em> equivalent, both at the end create a property on the global object.</p> <p>The difference is that <code>a</code>, which has been declared with the <code>var</code> statement, the <a href="http://bclary.com/2004/11/07/#a-10.1.3" rel="noreferrer">Variable Instantiation</a> process will use the global object as the <em>Variable Object</em> <sup>(1)</sup>, and it will define that property as non-deleteable on it, e.g.:</p> <pre><code>var a = 13; delete a; // false typeof a; // "number" </code></pre> <p>Then, <code>b</code> since the <code>this</code> value in global code, points to the global object itself, will be also a <em>global property</em>, but this one can be deleted:</p> <pre><code>this.b = 21; delete b; // true typeof b; // "undefined" </code></pre> <p><sub>Don't try the first snippet in Firebug, since the Firebug's console runs the code internally with <code>eval</code>, and in this execution context the variable instantiation process behaves differently, you can try it <a href="http://jsbin.com/ugehe3/2/" rel="noreferrer">here</a>.</sub></p> <p><sub>(1)</sub> The Variable Object (VO) is an object that is used by the variable instantiation process to define the identifiers of FunctionDeclarations, identifiers declared with the <code>var</code> statements, and identifiers of function formal parameters, in the different <a href="http://bclary.com/2004/11/07/#a-10" rel="noreferrer">execution contexts</a>, all those identifiers are bound as properties of the VO, the Scope chain is formed of a list of VO's.</p> <p>For global code, the VO is the global object itself, that's why <code>a</code> ends being a property of it. For function code, the VO (<em>also known as the <a href="http://bclary.com/2004/11/07/#a-10.1.6" rel="noreferrer">Activation Object</a> for FunctionCode</em>), is a new object is created behind the scenes when you invoke a function, and that is what creates a new lexical scope, in short I'll talk about functions.</p> <p>Both <code>a</code> and <code>this.b</code> can be <a href="http://bclary.com/2004/11/07/#a-10.1.4" rel="noreferrer">resolved</a> simply as by <code>a</code> and <code>b</code> because the first object in the scope chain, is again the global object.</p> <p>Also, I think is work knowing that the Variable Instantiation process takes place <em>before</em> than the code execution, for example:</p> <pre><code>alert(a); // undefined, it exists but has no value assigned to it yet alert(b); // ReferenceError is thrown var a = 13; this.b = 21; </code></pre> <p>These differences may be trivial but I think is worth knowing them.</p> <p>Now, if the code snippet you posted is within a function, it is <em>completely different</em>.</p> <p>The <code>a</code> identifier, declared with the <code>var</code> statement in your example will be a <em>local variable</em>, available only to the lexical scope of the function (and any nested functions).</p> <p>Keep in mind that in JavaScript blocks don't introduce a new scope, only functions do, and to declare a variable in that scope, you should <em>always</em> use <code>var</code>.</p> <p>The <code>this.b</code> identifier will become a property bound to the object that is referred by the <code>this</code> value, but... <em>What is <code>this</code>???</em>.</p> <p>The <code>this</code> value in JavaScript is implicitly set when you call a function, it is determined by how do you invoke it:</p> <ol> <li><p>When you use the <code>new</code> operator, the <code>this</code> value inside the function, will point to a newly created object, e.g.:</p> <pre><code>function Test() { this.foo = "bar"; } var obj = new Test(); // a new object with a `foo` property </code></pre></li> <li><p>When you call a function that is <em>member</em> of an object, the <code>this</code> value inside that function will point to the <em>base object</em>, e.g.:</p> <pre><code>var obj = { foo: function () { return this == obj; } }; obj.foo(); // true </code></pre></li> <li><p>When you invoke a function without any base object, the <code>this</code> value will refer to the global object:</p> <pre><code>function test() { return this == window; } test(); // true </code></pre></li> <li><p>The <code>this</code> value can be set explicitly, when you invoke a function using <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Function/call" rel="noreferrer"><code>call</code></a> or <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Function/apply" rel="noreferrer"><code>apply</code></a>:</p> <pre><code>function test() { alert(this); } test.call("hello world!"); // alerts "hello world!" </code></pre></li> </ol>

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