Accessing properties and methods

Of course as a method is just a property that happens to be a function we really don't need to deal with methods as a separate case - but it helps to see what the syntax looks like.

To access properties and methods you can use the usual dot notation:

 myObject.myProperty;

or an array index notation:

 myObject[myProperty];

The notation you use makes no difference to the way the property or method is accessed.

For example you can write

 myObject.myMethod();

or

 myObject[myMethod]();

they both mean and result in exactly the same thing.

The array notation reveals the fact clearly that a Javascript object is just a hash storage structure and this viewpoint is also important.

Reference

There is another subtle point that is worth keeping in mind. The object that has been created is not myObject.

The myObject variable simply references (or points to) the anonymous object that has been created.

To illustrate this idea we can simply create another variable that references the same object:

 var yourObject=myObject;

now both myObject and yourObject reference the same anonymous object i.e. there is, still, only one object.

You can easily prove this fact because changing a property using one of the variables changes the property when accessed by the other variable.

For example:

 myObject.myProperty=456;
 alert(yourObject.myMethod());

displays 456.

Now ask yourself the question of what the name of the object is? It clearly doesn't have a name even though when an object is created with a single variable to reference it we usually allow the confusion between the variable's name and the object. So we say that the object instance is called myObject. This of course breaks down as soon as we have an object referenced by two or more variables. This is the sense in which objects that are referenced by variables are anonymous.

You can take this idea to simply mean you have to be careful when assigning objects to variables but it is deeper than this. The object you create has an existence independent of the variables that reference it.

Context and this

Now consider the example given earlier.

The object created has a single property myProperty with a value of 123. It has a single method myMethod which is set to reference a function which simply returns the value of myProperty.

   myMethod:function(){
         return myObject.myProperty;} 

Notice that the function is defined in the usual way and can have as many lines of code as it takes.

The only oddity is the way that the property myProperty has to be referred to by its full name myObject.myProperty.

Notice that once again you really should think of this as specifying the myProperty of the object that the myObject variable references.

Usually when you are defining an object, other languages automatically provide an object context for the definitions. That is, in most other languages a reference to myProperty within myObject would be interpreted to mean myObject.myProperty.

This isn't the case in Javascript and it's partly  because myObject references an object and not a class. Languages that used classes can easily implement a class context for variables within a method defined within the class.

In a prototype-object language this doesn't make  much sense as  you already have a reference to the instance of the class - it is stored in the myObject variable. Given the fact that you actually know the instance "name"  i.e. myObject you might as well use it and be explicit about the nature of the variable you are creating.

However, this all said, you can use a shortcut to refer to the current object when writing methods. The this keyword always refers to the context that the function is being defined in and this is true even in the case of an object literal - even if this syntax is not used much in practice.

For example: you can define the object using:

var myObject = 
{
  myProperty:123,
  myMethod:function(){
         return this.myProperty;} 
};

This is often explained by saying that this is set to myObject in the object's definition and you can think of it as a sort of shorthand if it helps - but by now you should be getting the idea that it actually references the same anonymous object that myObject references.

That is you can imagine that

 this=myObject;

is executed behind the scenes as the object literal is first created.

However once outside of the curly brackets this is no longer defined in this way.

The rule is, and it's a rule that is difficult to state but easy to follow -

any variables you define within methods are in the same context as if they were defined in the same place in the program but not within an object. 

or

only properties have object context.

myMethod:function(){
   return myGlobal;
}

then myGlobal is a variable defined elsewhere in the program and not within the object. 

If the method is defined as:

myMethod:function(){
   var i=789;
   return i ;
}

then i is a local variable to the function myMethod and is used as such. It isn't accessible outside of myMethod and this includes other methods within myObject.

In both cases the context of the variables isn't changed by being defined within an object.

Finally notice that when we create an object in this way we are doing exactly this - creating an instance of the object - there is no concept of class or instantiating a class mixed up in Javascript's approach to OOP.

You simply create an object.

<ASIN:0596805527>

<ASIN:0470684143>

<ASIN:0137054890>

<ASIN:1449381871>