Warning: count(): Parameter must be an array or an object that implements Countable in /customers/d/f/8/sveitech.dk/httpd.www/wp-content/plugins/css-javascript-toolbox/framework/events/subjects/hook.subject.php on line 81 Warning: count(): Parameter must be an array or an object that implements Countable in /customers/d/f/8/sveitech.dk/httpd.www/wp-content/plugins/css-javascript-toolbox/framework/events/subjects/hook.subject.php on line 82 Warning: count(): Parameter must be an array or an object that implements Countable in /customers/d/f/8/sveitech.dk/httpd.www/wp-content/plugins/css-javascript-toolbox/framework/events/subjects/hook.subject.php on line 81 Warning: count(): Parameter must be an array or an object that implements Countable in /customers/d/f/8/sveitech.dk/httpd.www/wp-content/plugins/css-javascript-toolbox/framework/events/subjects/hook.subject.php on line 82 Javascript Prototype | Sveitech

Javascript Prototype

Prototype Basics

Consider a simble javascript object:

var object = {};

This object has an internal property named [[prototype]]. This property is not directly accessible. When an object’s property is accessed, and the object itself lacks the named property, javascript will consult the object pointed to, if any, by [[prototype]] for the property. This allows for basic inheritance and functions used as classes.

For example, take this pseudo-kode (Will not compile, because [[prototype]] is inaccessible.

var object = {
    [[prototype]] : {
        age: 22
    }
}

console.log(object.age); // Prints 22, because age is found in the [[prototype]] object.

Since the internal [[prototype]] property is inaccessible, it must be accessed by other means. Most modern browsers and nodejs allows [[prototype]] to be accessed via the __proto__ property, or by the functions Object.getPrototypeOf() and Object.setPrototypeOf(). The previous example can be remade into the following working code, which will actually compile:

var prototype = {
    age : 22
};

var object = {
    __proto__ : prototype
};

console.log(object.age);

Or, as an alternative:

var prototype = {
    age : 22
};

var object = {};
Object.setPrototypeOf(object, prototype);

console.log(object.age);

An object’s prototype object can have its own prototype. This allows for a chain of prototypes to be created. If the prototype of an object does not contain the specified property, the next prototype object will be followed, and so on, until a null prototype is found.

Most javascript engines allows objects to be created, with a prototype already set, like so:

var prototype = {
    age = 22;
};

// Parent is a new object, whose __proto__ object is initialized to point to the prototype object.
var parent = Object.create(prototype);

Avoid Using the Inaccessible Prototype

__proto__, getPrototypeOf() and setPrototypeOf() may not be available, depending on your javascript interpretor. It varies from browser to browser, or nodejs for example. The internal prototype object should not be messed with if possible. Javascript has another way to initialize the prototype object, which is the keyword new.

Consider the following javascript function:

function Box(width, height) {
    this.width = width;
    this.height = height;
}

If the function above is called directly, the this keyword will point to the global scope, and will create two global objects, width and height. If we call this function with the new keyword however, a number of things will happen:

function Box(width, height) {
    this.width = width;
    this.height = height;
}

var small_box = new Box(10, 20);
  1. Firstly, the new keyword creates a basic, empty object ( {} )
  2. Now, the [[prototype]] property of the basic object, is set to point to the prototype property of the function
  3. Lastly, the function is called, and all references to this is replaced with the simple object

To put this in pseudo-code (not runnable javascript)

// Illustration of what the new keyword does

// Our constructor function
function Box(width, height) {
    this.width = width;
    this.height = height;
}

// All functions are born with a prototype property
Box.prototype = {};

// first, new creates a base object
var basic_object = {};           

// then, the [[prototype]] property of the object is set to point to the function prototype
basic_object.__proto__ = Box.prototype;

// Finally, the constructor function is called, with 'this' replaced by our object
Box(10, 20) {
basic_object.width = 10;
basic_object.height = 20;

// basic_object is implicitly returned here.
}

Sveistrup Technologies