Skip to content

Home

Jump to bottom
Akin C edited this page Aug 13, 2019 · 40 revisions

Welcome to the Javascript-getPrototypeOf-proto-and-prototype-hierarchy wiki!

This repository is part of a larger project!

◀️ PREVIOUS PROJECT| NEXT PROJECT ▶️

getPrototypeOf vs __proto__

getPrototypeOf vs __proto__ methods should have the same functionality. They should get the prototype of an instance. The use within a code could look like as follows:

//Class
var Human = function()
{}

//Instance of class "Human"
var Alex = new Human(); 

//Outputs the directory: Object
console.dir(Object.getPrototypeOf(Alex));
console.dir(Alex.__proto__);

The output of both cases is the Object directory which can be analyzed by pressing F12 (google chrome). Object should be the global inheritable class in this and most cases.

📕 The main difference of getPrototypeOf and __proto__ is that __proto__ seems not to be supported in every Javascript environments. Because of this, the use of __proto__ is not recommended.

📕 Also it would be not recommended to modify __proto__ for the following reasons:

  1. It seems it is not always portable
  2. Performance issues - changing it could change the systems inheritance structure itself
  3. Its functionality could not be foreseeable any more

Prototype Hierarchy

To realize a subclass realtionship, prototype could be an option.

The visualized hierarchy in the following picture should serve as an example for further explanation.

ERROR: No Image found

  • MyMainClass = Parent class
  • MySubClass = Child class which inherits from parent class
  • MySubClassInstance = An instance from the child class

Connecting Classes

Table Structure Explanation:

  • The first column describes the identification number of an example.

  • The second column describes an example code.

  • The third column describes with the help of images how the code behaves within the debugger tools console (Press F12 in chrome to open it).

Nr Code Console
01 
function MyMainClass()
{
    this.fromParentClass = "Parent Class";
}

function MySubClass()
{
    //Connection for inhertiance
    MyMainClass.call(this);
    
    this.fromChildClass = "Child Class";
}

//Instance
var MySubClassInstance = new MySubClass();

console.log(MySubClassInstance);

Nr.1:

  • MyMainClass.call(this) should establish an inheritance connection to MyMainClass.
  • The successful inheritance from MyMainClass should be seen by accessing the properties fromChildClass and fromParentClass of MySubClassInstance (see the column Console).
  • The area A within the column Console should show the inherited attributes of MySubClassInstance

Connecting Prototypes

Nr Code
02 
function MyMainClass()
{
    this.fromParentClass = "Parent Class";
}

function MySubClass()
{
    //Connection for inhertiance
    MyMainClass.call(this);
    this.fromChildClass = "Child Class";
}

//Connection to prototype defined methods
//and member-variables of MyMainClass
MySubClass.prototype = Object.create(MyMainClass.prototype);

//This line is not always needed
MySubClass.prototype.constructor = MySubClass;


//Main class Method
MyMainClass.prototype.myMethod = function()
{
    return "Main class method";
}

//Sub class method
MySubClass.prototype.myMethod = function()
{
    return "Sub class method";
}


//Instance
var MySubClassInstance = new MySubClass();

console.log(MySubClassInstance);

//Outputs: Sub class method
console.log(MySubClassInstance.myMethod());


delete MySubClass.prototype.myMethod

//Outputs: Main class method
console.log(MySubClassInstance.myMethod());
Console

Nr.2:

  • The line MySubClass.prototype = Object.create(MyMainClass.prototype) should have the purpose to establish a prototype chain
  • Now MySubClassInstance should have access to the prototype properties of MyMainClass and MySubClass
  • By implementing and afterwards deleting MySubClass.prototype.myMethod the prototype chain should be visible within the console. By calling the method myMethod, the system will first look up within the context of the instance then within MySubClass.prototype and finally within MyMainClass.prototype.
  • A should show the prototype attribute MyMethod of MySubClass and B the prototype attribute of MyMainClass
  • The line MySubClass.prototype.constructor = MySubClass; adds a constructor of MySubClass to MySubClass prototype. This should not always be needed, unless e.g. a copy instance is done. An example from a such copy method could be found within the file vs.js (God.prototype.createsClone = function()).

Content

The user interaction part could look like the content as seen below by starting "index.html" in a web browser and interacting with its features.

ERROR: No image found!

  • In Diagram the classes God, Angel, Devil, GoodHuman and BadHuman should be clickable
  • After clicking these classes their color should change and also by that the colors of related ties and classes should change.
  • The green area should contain various information about the clicked class instance.
  • By pressing the 🅱️utton <---BUFFER---> the information within the green area should be buffered within the brown area.
  • By pressing the 🅱️utton <---COPY---> the instance will be copied and all the information should be stored within the brown area.
  • Detailed information about the instances, e.g. for comparing, could also be found within the debuggers console (by pressing F12)

To use the project just download the files and execute "index.html". Note that all files(folders "wiki_images" and "PaintNET" excluded) should be placed in the same folder so that the functionality of the code is guaranteed.

The "PaintNet" folder contains .pdn files which can be opened and altered with PaintNET for simple picture editing.

This knowledge was gained:

Sources:

Clone this wiki locally