0

I'm trying to learn to apply object-oriented principles to my Javascript programming, however I'm confused about how object "fields" or "methods" work in Javascript. I understand that properties can be dynamically assigned to Javascript objects (functions), but I don't seem to understand how to apply this in practice.

Consider the following example code snippet:

<head>
<script type="text/javascript">

var foo = function()
{
    this.bar = "abc";
    alert(this.bar);
}

foo.start = function()
{
    alert(foo.bar);
}

</script>
</head>

<body>
<div align='center'>
<input type="submit" onclick = "foo(); foo.start();">

When the submit button is clicked, it displays the message abc, followed by undefined.

This output is contrary to my understanding and intent here. My understanding is that the line this.bar = "abc" creates a new bar property (or field) of the foo object, and assigns it the value "abc". However, when I call another method of foo, the bar property seems to have disappeared.

So, why is foo.bar undefined when I access it in foo.start?

Channel72
  • 24,139
  • 32
  • 108
  • 180

1 Answers1

3

JavaScript functions execute in a context that determines what this refers to inside the function. When you create a new foo object like this:

var f = new foo();

...then this refers to the new object. However, when the new operator is omitted, like this:

var f = foo();

...then the context is the global window object. In that case, this line:

this.bar = "abc";

...sets the value of a property on window, not the new object.

Wayne
  • 59,728
  • 15
  • 131
  • 126
  • +1, though you should add that in the second case, there *is* no new object. – David Tang Apr 11 '11 at 00:56
  • The this keyword has nothing to do with context (whatever "context" means anyway). It is set by the call and can reference anything that the call sets it to. – RobG Apr 11 '11 at 02:07
  • 1
    @RobG - "The this keyword refers to the context object (a.k.a. current object)." https://developer.mozilla.org/en/JavaScript/Reference/Operators/Special/this – Wayne Apr 11 '11 at 02:11
  • There is no "current object". There is an object that is referenced by this, which is set according to how the function is called or (in ES 5) by using the bind method. – RobG Apr 11 '11 at 02:15
  • @RobG - The word "context" has a generic definition that clearly applies. Will the spec convince you? See section 11.1.1: "The this keyword evaluates to the this value of the execution context." – Wayne Apr 11 '11 at 02:22
  • An execution context is a concept that is (more or less) the local scope of the code being executed. It has a number of properties, like a variable object, scope chain and this. Anyhow, this is likely OT here so I'm likely to get banned or whatever. Discuss in comp.lang.javascript if you want to go further. – RobG Apr 11 '11 at 02:55
  • @RobG - I'll retract my link to the spec, since, again, the word "context" has a generic meaning in the English language that clearly applies. – Wayne Apr 11 '11 at 03:26