Javascript - (Prototype Model|Prototypical object)

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > ECMAScript - Grammar Standard > Javascript - Object

1 - About

A prototype-based language has the notion of a prototypical object.

A prototypical object is used as a template from which to get the initial properties for a new object.

Any object can:

  • specify its own properties, either when you create it or at run time.
  • be associated as the prototype for another object, allowing the second object to share the first object's properties.

Since ECMAScript 2015, a class can be used in place of prototyping for object creation and inheritance

Advertising

3 - Management

3.1 - Initialization

The father of all prototype is: Object.prototype. See Javascript - Prototype Chain - Hierarchy (Sort of Inheritance)

4 - Example

4.1 - Object.create

4.1.1 - Basic

var foo = { a: 42 }; 
 
// create `bar` and link it to foo 
var bar = Object.create( foo ); 
 
bar.b = "hello world from bar.b"; 
console.log( bar.b ); // "hello world" 
console.log ("The property 'bar.a' was delegated to the foo prototype. 'bar.a'  has the value "+  bar.a ); // 42 <-- delegated to ` foo `
 
foo.hello = "hello from foo";
console.log ("Attributes added after the initialization are also seen.")
console.log(" The new property 'foo.hello' can be accessed by 'bar': "+bar.hello ); 

4.1.2 - Library with prototype

  • The library
library.js
var Point = function(loc) {
   // The prototype creation is important to be recognized as an ''instanceof''
   var obj = Object.create(Point.prototype);
   obj.loc = loc;
   return obj;
}
 
// Prototype added after the var declaration otherwise it does not exist
Point.prototype.move = function(){
    this.loc++;
}
  • The main
main.js
var point1 = Point(1);
point1.move();
var point2 = Point(2);
point2.move();
 
 
console.log(Point.prototype.constructor);
console.log(point1.constructor);
 
console.log(point1 instanceof Point);

Advertising

4.2 - Constructor and prototype

A prototype can be added to a constructor.

// An object
var person = {
   name: "Nicolas", 
   length: 180
};
 
// A constructor
function ColoredPerson() {
    // Rode piet !
    this.color = "red";
}
 
// Set the prototype to be the person object (dynamic inheritance)
ColoredPerson.prototype = person;
 
// Create a new object
var coloredPerson = new ColoredPerson();
 
console.log ( "The object:")
console.log (coloredPerson);
 
console.log ( "The object prototype:")
console.log (coloredPerson.__proto__);
 
console.log ( "The object prototype can be directly accessed. Example with the name:")
console.log (coloredPerson.name);

5 - Management

5.1 - Source of a property (prototype or object)

Prototype inheritance works with a constructor (Always ??)

// An object
var person = {
   name: "Nicolas", 
   length: 180
};
 
// A constructor
function ColoredPerson() {
    // Rode piet !
    this.color = "red";
}
 
// Set the prototype to be the person object (dynamic inheritance)
// All new ColoredPerson must inherit its properties.
ColoredPerson.prototype = person;
 
// Create a new object
var coloredPerson = new ColoredPerson();
 
// Loop through the properties
var propSource;
for (var prop in coloredPerson) {
    if (coloredPerson.hasOwnProperty(prop)) {
        propSource = "object";
    } else {
        propSource = "prototype";
    }
    console.log("The property " + prop + " (value:" + coloredPerson[prop] + ") is a property from the " + propSource);
}

5.2 - Prototype Hierarchy

A function that prints the prototype of the prototype of the .. See Javascript - Prototype Chain - Hierarchy (Sort of Inheritance)

6 - Documentation / Reference

web/javascript/es/object/prototype.txt · Last modified: 2019/02/16 17:40 by gerardnico