StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><code>john.greet("Mark")</code> actually calls a function. When you do <code>var fx = john.greet;</code>, you're getting a reference to the function. So when you call it, <code>this</code> is not bound to <code>john</code>. What you're actually doing is <code>window.fx("Mark")</code> and so <code>this</code> is the <code>window</code> object. You were on the right track when you said that it was in the global context. In this particular instance, the global object is <code>window</code>, and so <code>fx</code> is actually <code>window.fx</code>.</p> <p>When you have a function reference you should use <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> if you want to set the value of <code>this</code>. Try doing this:</p> <pre><code>fx.call(john, "Mark"); </code></pre> <p>The first argument in <code>call</code> or <code>apply</code> is the value used for <code>this</code> in the context of the function call.</p> <p><strong>EDIT</strong></p> <p>Some people mentioned that the real issue here might be confusion surrounding an object literal vs. an instance of an object. You're creating an object literal which also behaves kind of like a singleton. You cannot create a new instance of that object. In this case <code>john</code> is a reference to that object literal. In that context, <code>this</code> in the function <code>greet</code> refers to the object literal itself. Hence when you call <code>john.greet("Mark")</code>, <code>this</code> is bound to <code>john</code>.</p> <p>When you grab a reference to <code>john.greet</code> just by itself and assigning it to a global variable, you're essentially doing this:</p> <pre><code>var fx = function(person) { alert("Hi " + person + ", my name is " + this.name); } </code></pre> <p>In this scenario, <code>this</code> is <code>window</code>, because <code>fx</code> is basically <code>window.fx</code> (since the global object here is <code>window</code>. Assuming this code was wrapped inside <em>another</em> function, then the global object would refer to that function. </p> <p>If you want to create multiple instances of an object, you can do something like this:</p> <pre><code>var Person = function(name) { var self = this; //maintains a reference to the instance this.name = name; this.greet = function(name) { alert("Hi " + name + ", my name is " + self.name); } } var john = new Person("John"); john.greet("Mark"); // alerts "Hi Mark, my name is John" var fx = john.greet; fx("Mark"); // also alerts "Hi Mark, my name is John" </code></pre> <p>Here, the <code>self</code> variable (which is local to the function) maintains a reference to the actual instance because you're binding it to <code>this</code> when you create the object.</p> <p>There are many best practices associated with OOP in Javascript. You can Google and find out (there are many links). I recommend reading stuff from Douglas Crockford especially.</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