JavaScript -> Object Model

The Object Model

In the first post about JavaScript Objects we have seen how to interact with objects but we did not learn what objects in JavaScript are on a conceptual level. If you are coming from class-based languages like C++, C# or Java you might have noticed objects are not linked to some kind of class you are used to in your language. The reason is JavaScript uses so called prototype based objects.

So what is the difference between a prototype- and class-based design of objects? Let’s start with the more familiar design the class-based one( at least for me, love c++).

class-based language

In C++,Java, Smalltalk or any other class-based language a class  is a description of its properties where instances of that class representing state and method are described in a class definition which tells the instance how to change that state (behaviour is the excution of those methods at runtime).

This description happen in separate class definition. This is the place where you can specify the constructor and deconstructor of an class which deal with the creation and destruction of an (state/)object. Inheritance is represented only as part of the structure and behaviour on object.

Then an instanceof such an class represent an unique identity (the state) of an set of possible instantiations of the very same class description in memory.  The properties of an instance are fix, means the one described in the class definition are the ones  the instance will have(to represent  state), nothing more but also nothing less( ok in c++ that is not totally true thanks to template meta programming which blurres the line there a teeny tiny bit)

To summarize we distinguish between a description of an possible instance of an object and the actual instance of the object in memory which is and have to be unique and their methods which are separated of that instance but part of the object!

prototype-base language

JavaScript, a prototype-based language, does not distinguish between these two(class,instance).  We have simply only objects in the language. Which in consequence leads us to think about objects, which are used as source for other objects, to be some kind of template object, the prototype of an object.

States and methods are represented by actual objects and are indistinguishable  from each other not like in class-based languages where those two are separated.

Objects in JavaScript are created in different ways:

  • literal notation
  • constructors

Any object is allowed to  specify their own properties and that at anytime of the objects life-cycle. Besides that you can associate one object to be another objects prototype; so that one inherit the properties of the prototype and makes it thereby part of it’s own properties in some sense. Or in other words let you share properties from the prototype object to another object which might be itself again for some other object be an prototype object and so on.

This mechanism allows for inheritance known from class-based languages. But to actual achieve this we have to keep an eye to the syntax. One common element would be the new operator to create an object on request.  Prototypes are associated to functions which makes those functions basically the constructor of the object. The keyword new marks any function on which it is applied as an object creating function at that point in time at the call-site.

A constructor itself is simply a normal function but in combination of the operator new the normal function gains a new property the so called prototype property that is used to implement inheritance and shared properties.

If a constructor is called it creates an implicit reference to the value of the constructors prototype property. Keep in Mind: functions are objects as well! This property referenced by the constructor might again reference to yet another prototype property till somewhere in the chain of properties you find an nulled reference to an prototype which marks the end of the prototype-chain.

If we want to create an reference to a property in an object  the following is true:

that reference is to the property of that name in the first object in the prototype chain that contains a property of that name. In other words, first the object mentioned directly is examined for such a property; if that object contains the named property, that is the property to which the reference refers; if that object does not contain the named property, the prototype for that object is examined next; and so on. (see p. 58 ECMA-262)

Class-based (Java) Prototype-based (JavaScript)
Class and instance are distinct entities. All objects can inherit from another object.
Define a class with a class definition; instantiate a class with constructor methods. Define and create a set of objects with constructor functions.
Create a single object with the new operator. Same.
Construct an object hierarchy by using class definitions to define subclasses of existing classes. Construct an object hierarchy by assigning an object as the prototype associated with a constructor function.
Inherit properties by following the class chain. Inherit properties by following the prototype chain.
Class definition specifies all properties of all instances of a class. Cannot add properties dynamically at run time. Constructor function or prototype specifies an initial set of properties. Can add or remove properties dynamically to individual objects or to the entire set of objects.

Let me show you an example:


The function Person creates implicitly a new Prototype called Person. Same goes for Employee. If you are calling these function with the keyword new you are creating a new Object of the prototype Personor Employee depending which one you are invoking.

It is very important to distinguish between the prototype of an Object and its prototype property. These are two different things in relation to an object and its creation in javascript.

The prototype of an object is always used for looking up non existing properties in the prototype chain; The prototype property  is used for objects created using new, it will be the prototype of the newly created object.!!!!

This has subtle but important consequence.  The this value is set to the original object and not to the prototype object. The picture depicts what this difference

Inheritance of objects

i mentioned does look like. You can clearly see the difference between the Prototype of an object (Object.prototype) and the prototype property.

Going back to our example of the Person and the Employee you can see that we set the prototype of the employee by hand and the prototype of the person automatically receives the Object.prototype by default. This is true for any object you create and not explicitly change the prototype of it.

Leave a Reply

Your email address will not be published. Required fields are marked *