The object tree

Objects can have attributes. The statements

value = obj.attr             # Get the attr of 'a'.
obj.attr = value              # Set the attr of 'a'.

respectively set and get the attr attribute of the object obj. Inheritance is where an object gets some its attributes from one or other more objects. JavaScript uses an object tree for inheritance.

Tree

All JavaScript objects are part of an inheritance tree. Each object in the tree has a parent object, which is also called the prototype object (of the child). There is a single exception to this rule, which is the root of the tree. The root of the tree does not have a parent object.

Note

You can’t get far in JavaScript without understanding the object tree.

Get

When JavaScript needs to get an attribute value of an object, it first looks up the attr of the attribute in the object’s dictionary. If the attr is a key in the dictionary, the associated value is returned.

If the attr is not a key, then the process is repeated using the object’s parent, grandparent, and so on until the key is found. If the key is not found in this way then undefined is returned.

Set

When JavaScript needs to set an attribute value of an object it ignores the inheritance tree. It simply sets that value in the object’s dictionary.

Root

When the interpreter starts up, the root of the tree is placed at Object.prototype. (We’ll find out later why that location is used.)

Every object inherits from the root, although perhaps not directly. Here’s a simple example:

js> root = Object.prototype
js> a = {}
js> a.attr === undefined
true
js> root.attr = 'gotcha'
js> a.attr
gotcha

If we give root a attr attribute then every other object, including those already created and those not yet created, also has a attr attribute with the same value. (In practice it’s better not to change Object.prototpye.)

This applies arrays:

js> array = [0, 1, 2]
0,1,2
js> array.attr
gotcha

And even to functions:

js> f = function(){}
function () {
}

js> f.attr
gotcha

Note

A page might have many scripts, all of which would like to modify the Object.prototype root object. This can cause bugs and incompatibilities. So try not to do this.

However, this up-the-tree lookup does not apply if attr is found earlier in the tree. We continue the previous example to show this, and the behaviour of set.

js> a.attr = 'fixed'
js> a.attr
fixed
js> root.attr
gotcha

Create

Any tree can be constructed from its root, together with a command create(parent) that returns a new child of the given parent node.

In all but the most recent version of JavaScript the create function is not built in. However, it’s easy to write one, once you know enough JavaScript. Here’s how its done in the work folder’s library.js file.

var create = function(parent){

    var tmp = function(){};
    tmp.prototype = parent;
    var child = new tmp();

    return child;
};

Using create

Here’s an example of its use:

js> a = {}
js> b = create(a)
js> a.attr = 'apple'
apple
js> b.attr
apple

And a continuation of the example:

js> c = create(b)
js> c.attr
apple
js> b.attr = 'banana'
banana
js> c.attr
banana

Note

JavaScript uses an inheritance tree. By using create, we can create any inheritance tree. All JavaScript objects are in this tree.