Javascript - (Prototype Model|Prototypical object)

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

Management

Chain

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

Get

To get the prototype of an object check the __proto__ attribute.

var element = document.querySelector("body");
console.log(element.__proto__.toString())

Example

Object.create

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 ); 

Library with prototype

See Javascript - How to create a library from a prototype

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);

Management

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);
}

Prototype Hierarchy

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

Documentation / Reference





Discover More
DOM - NodeList (Collection)

A nodelist is the result of a selection that returns more than one node (Generally an element) Nodelist: HTMLAllCollection, HTMLFormControlsCollection, HTMLOptionsCollection, interfaces are...
DOM - Selection of Node Element (querySelector)

This page shows you how to select node elemenst in the DOM tree This section shows you how to returns the first element within the document of a selection. In the below code: selector is a selector...
Javascript (Js|ECMAScript)

Javascript was born to run in the browser but may know with the advent of node run on the server side. See JavaScript is also known as: Mocha, LiveScript, JScript (Windows Implementation),...
Javascript - Object Constructor

in Javascript of an object Invoking a function with the new operator treats it as a constructor. Unlike function calls and method calls, a constructor call passes a brand-new object as the value of this,...
Javascript - (Object) Key

Object key management. A key is also known as a property name :) Check all properties (also the inherited one) check only the direct properties of the object and not the inherited one...
Javascript - (Object) Property

Property Management of an object A property has : a key and a value Property names can be Reference/Operators/Object_initializerdynamic Reference/Operators/delete A property may be...
Javascript Lexical Environment Scope Chaine
Javascript - (Variable) Scope (Namespace)

Variable scope in Javascript. variable scope is delimited by the function definition, not a the block level A block has the scope of its inner function. As a function is also an object, by generalization,...
Javascript - Class (ES6)

This article is Class in Javascript. Class was introduced in ECMAScript 2015. Before the module pattern was used to create a class-like behavior. Classes provide a simpler way to create objects and...
Javascript - How to create a library from a prototype

This page shows you how to create a library from a prototype The library The main
Javascript - Object

object in javascript An object is a data type in Javascript. An object follows a json data structure with key that holds property value. The value may be of a variable or a function In JavaScript, a...



Share this page:
Follow us:
Task Runner