Skip to content

Home

Jump to bottom
Akin C edited this page Mar 1, 2019 · 30 revisions

Welcome to the Javascript-prototype-and-instance- wiki!

This repository is part of a larger project!

◀️ PREVIOUS PROJECT| NEXT PROJECT ▶️

Javascript gives the option to inherit properties and methods by prototype. A simple example follows:

//Serves as "class" like known e.g. in C++ or Java
function myClass()
{}

//Now a property for "myClass" is defined 
//Name of property does not have to be "Property"
myClass.prototype.Property = "House";

//Now a method for "myClass" is defined
//Name of method does not have to be "Method"
myClass.prototype.Method = function()
{
	return "Blueprint for House";
}

//An instance of "myClass"
var Child = new myClass();


//Outputs string value "House"
console.log(Child.Property);

//Outputs string value "Blueprint for House"
console.log(Child.Method());

In the listing above an instance of myParent is done with the keyword new.

Every instance has its own properties and methods. A change from one instance should not influence the properties and methods from another instance. For clarification an example follows:

//Serves as "class" like in C++ or Java
function myClass()
{}

//Now a property for "myClass" is defined
myClass.prototype.Property = "House";


//Two Instances
var ChildOne = new myClass();
var ChildTwo = new myClass();

//Changing Property of "ChildOne"
ChildOne.Property = 42;

//Outputs 42
console.log(ChildOne.Property);

//Outputs the string value "House", 
//because the change is only done within instance "ChildOne"
console.log(ChildTwo.Property);

In the following table, there should be shown two ways of passing propertie(s) to an instance.

The following explanation should also work for passed method(s) to instances.

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 tool`s console (Press F12 in chrome to open it).

  • A row is a version how to pass propertie(s) to instances

Nr Code Console
01 
function myClass()
{
    this.name = "Gandalf";
}

//myClass.prototype.name = "Arwen"

var ChildOne = new myClass();
var ChildTwo = new myClass();

ChildTwo.name = "Bilbo";

console.log(ChildOne);
console.log(ChildTwo);
console.dir(myClass);

02 
function myClass()
{
    //this.name = "Gandalf";
}

myClass.prototype.name = "Arwen"

var ChildOne = new myClass();
var ChildTwo = new myClass();

ChildTwo.name = "Bilbo";

console.log(ChildOne);
console.log(ChildTwo);
console.dir(myClass);

01 - Description:

  • ❗️ The first version uses the keyword this within myClass to allow an inheritable property "name".
  • Two instances are created (ChildOne and ChildTwo).
  • In the column "Console" the blue letter A represents ChildOne, B represents ChildTwo and C represents the function myClass.
  • The two instances inherit the property "name" from myClass. That is why ChildOne has the string value "Gandalf".
  • ChildTwo has the string value "Bilbo", because its property "name" is changed afterwards.
  • ❗️ C shows that myClass has no defined "name" property within "prototype:{constructor: f}". This should mean that there is no parent property which could be accessed.

02 - Description:

  • ❗️ The second version uses the keyword prototype outside myClass to allow an inheritable property "name".
  • Two instances are created (ChildOne and ChildTwo).
  • In the column "Console" the blue letter A represents ChildOne, B represents ChildTwo and C represents the function myClass.
  • ❗️ In this case ChildOne has no independent property "name", but instead it uses the property "name" of myClass. This can be seen in C under "prototype: {name:"Arwen", constructor: f}". By outputing ChildOne.name the value should be Arwen.
  • ❗️ ChildTwo has an own property "name" with the string value "Bilbo" and should have access to the property "name" of myClass. If e.g. direct property "name" should be deleted then ChildTwo property "name" would have the value "Arwen".

📕 It seems that an instance would always look for properties and methods first in its own context. And if it doesn´t find it there, it would search for it in its prototype until it reaches the global Object. If it doesn´t find it there either then the property should be undefined.

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!

  • The checkboxes "Name, Haircolor and Size" should be needed to define what kind of attribute the child should have.

  • 🅱️ utton "MAKE" should create an instance Child which randomly generated attributes should be seen beneath the header "Explanation".

  • After making a "Child", the checkbox "Walk" and the button "Talk(tell real name)" should be visible.

  • "Walk" should be a "Child" only attribute and should have no connection to its "Parents".

  • 🅱️ utton "Talk(tell real name)" should show the context attribute Name of the "Child". The name shown in area "Explanation" should be the "Parents" name.

The colored areas are just for a better readability in the wiki and are not part of the content. To use the project just download the files and execute "index.html". Note that all files(folder "wiki_images" excluded) should be placed in the same folder so that the functionality of the code is guaranteed.

This knowledge was gained:

Sources:

Clone this wiki locally