Javascript prototype Revision

 1) Parameterised Constructor Function:

function Person(name, age, gender) {
this.name = name,
this.age = age,
this.gender = gender,
this.greet = function () {
console.log(`Hello ${this.name}`);
}
}
let person1 = new Person('Swati', 23, 'female');
let person2 = new Person('Ankit', 22, 'male');


console.log(Person.prototype);
console.log(person1.__proto__ === Person.prototype);

1) Here we are creating two instances/object of the function Person, and they are person1 & person2.

2) In the first console.log(Person.prototype), we are checking whether the function Person has any prototype property or not, and since the function Person doesn't have any prototype property associated with it, the answer is {}.

3) In the second console.log(person1.__proto__ === Person.prototype), we are checking whether function Person is the prototype of the instance/object person1.  And the answer is true. It is to be noted that .__proto__ , tells us which object/function is the prototype of current instance that we are searching for.






2) Prototypal Inheritance Example:
function Person(name, age, gender) {
this.name = name,
this.age = age,
this.gender = gender
}
let person1 = new Person('Swati', 23, 'female');

console.log(person1.hobby); // First Console.log

let person2 = new Person('Ankit', 22, 'male');

//person2.greet();
Person.prototype.hobby = 'tennis';
console.log(person1.hobby); // Second console.log

Person.prototype.greet = function () {
console.log(`Hello ${this.name}`); // Third console.log
}
person1.greet();
person2.greet();
console.log(Person.__proto__); // Fourth console.log

console.log(person1.__proto__); // Fifth console.log


1) In the first console.log(person1.hobby), we are trying to access the property of person1 which is not present in its' prototype function Person, and hence the answer will be undefined.

2) Before the Second console.log statement we are adding a new property "hobby" to the prototype property of function Person. Now the function Person will have the property "hobby" in it and all the instances/objects of function Person will be able to access the hobby property. Therefore in the second console.log(person1.hobby), we will get the value as "tennis".

3) Before the 3rd console.log statement we are adding a brand new method/function "greet()" to the prototype property of function Person. Now all the instances/objects of the function Person will be able to access the greet() method. Therefore in the 3rd console.log(`Hello ${this.name}`), we are getting the value "Hello Swati" when we are calling person1.greet() and "Hello Ankit" when we are calling person2.greet().

4) In the 4th console.log statement we are trying to access the prototype of the function Person and its prototype is the Function.prototype. And since function.prototype doesn't have any properties inside it therefore it is showing {}.

5) In the 5th console.log statement we are trying to access the prototype of the instance person1 and its prototype is the function Person, therefore in the console the function Person with all its prototype properties and methods that we added is getting printed.









3) EXAMPLE 2:

function Person() {
this.name = 'Swati';
}

Person.prototype.name = 'Avni'; // Line 1

Person.prototype.hobby = 'Tennis'; //Line 2

Person.__proto__.__proto__.age = 20; //Line 3 //Object.prototype.age

Person.__proto__.age = 21; //Line 4 //Function.prototype.age


let person1 = new Person(); //Line 5

console.log(person1.name); //Line 6

console.log(person1.age); //Line 7 // person1 is taking age from Object.prototype.age which is
the nearest prototype of the instance person1 since instance and function have different
prototypical chain.

console.log(person1.hobby); //Line 8

console.log(Person.age); //Line 9


console.log(Person.__proto__ === Function.prototype); //Line 10

console.log(Person.__proto__.__proto__ === Object.prototype); //Line 11
console.log(person1.__proto__ === Person.prototype); //Line 12

console.log(person1.__proto__.__proto__ === Object.prototype); //Line 13


Person.prototype.age = 25; //Line 14

console.log(person1.age); //Line 15


1) In line 1 (which I have written myself with grey colour), we are adding a new value to the property name of function Person, but we already have a name property with value ='Swati' in the Person function, therefore the new value will not get printed and hence in line 6 console.log(person1.name), gives us the already existing name value and not the new value.

2) In line 7 console.log(person1.age), will print the age value from its nearest prototype since it doesn't have its' own age property and the nearest prototype which have the age property is Object.prototype with the value of 20.

3) In line 8 console.log(person1.hobby) is getting its value "tennis" from its' nearest prototype function Person and we have set the hobby property of function Person in line no 2.

4) In line 9 console.log(Person.age) is getting the value of 21 from its' nearest prototype Function.prototype and we have set the age property of Function.prototype in line no 4.

5) from line no.10 to line no.13, we are just checking whether the RHS is the prototype of LHS or not and all are true.

6) In line 14 we are adding a new property age with the value 25 in the prototype property of function Person, now in line no 15 console.log(person1.age) will access the age from its' nearest prototype which is the function Person and hence 25 will be printed in the console.









4) EXAMPLE 3:
function Person(name) { // Line 1

this.name = name, // Line 2

this.getName = function () { // Line 3

console.log("In the constructor function GetName"); // Line 4

},

function getInfo() { // Line 5

console.log("In the constructor function"); // Line 6

}
}

let person1 = new Person('Swati'); // Line 7


Person.__proto__.getInfo = function () { // Line 8

console.log("In the first proto"); // Line 9
}


Person.__proto__.__proto__.getInfo = function () { // Line 10

console.log("In the last proto");
}


Person.__proto__.getName = function () { // Line 11

console.log("In the first proto GetName"); // Line 12
}


Person.__proto__.__proto__.getName = function () { // Line 13

console.log("In the last proto GetName"); // Line 14
}


person1.getName(); // Line 15
person1.getInfo(); // Line 16





Comments

Post a Comment

Popular posts from this blog

Object.getOwnPropertyDescriptor & Object.defineProperty Methods.

Image
  1)  Property Descriptor: When we create a JavaScript object, whether using object literal syntax or some other means and add some properties to it, each property (key) gets a default property descriptor. A property descriptor is a simple JavaScript object associated with each property of the object that contains information about that property such as its value and other meta-data. 2) Access Property Descriptor: We need to use a static method provided by the Object. The Object.getOwnPropertyDescriptor method returns the property descriptor of the "prop" which is the property name on the "obj" object. Object.getOwnPropertyDescriptor(obj, prop); Own here means return the property descriptor of prop property only if that property belongs to the object obj and not on its prototype chain. If the property prop doesn’t exist on obj, it returns undefined. The Object.getOwnPropertyDescriptor method returns an object with keys describing the setting and current value of th...
Read more

Scope and Closures / Callback Hell

Image
  1)  Scope: 1) Scope in JavaScript actually determines the accessibility of variables and functions at various parts in one’s own code or program. 2) Scope will help us to determine a given part of a code or a program, what variables or functions one could access and what variables or functions one cannot access. 3) Within a scope itself, a variable or a function, or a method could be accessed. Outside the specified scope of a variable or function, the data cannot be accessed. 4) There are three types of scopes available in JavaScript: Global Scope, Local / Function Scope, and Block Scope.  //global scope let global = "Swati" ; function func1 () { return global; } function func2 () { return func1 (); } console. log ( func2 ()); //local scope function func1 () { let a = 2 ; let multiply = function () { console. log (a * 5 ); } multiply (); } func1 (); //Block scope { let a = 5 ; } console. log (a); 2) Scope Nesting: //Bl...
Read more

DOM - Document Object Model (document.getElementById etc.)

Image
  1)  DOM: What is the DOM? The DOM stands for Document Object Model. It can simply be understood as a tree of nodes created by the browser. Each of these nodes has its own properties and methods which can be manipulated using JavaScript. The ability to manipulate the DOM is one of the most unique and useful abilities of JavaScript. ** A "node", in this context, is simply an HTML element. The "DOM" is a tree structure that represents the HTML of the website, and every HTML element is a "node".   “document” is an object of the Document interface in the browser's Document Object Model (DOM). The Document interface represents an HTML or XML document that can be loaded in a web browser or processed by JavaScript code running in the browser. The “document” object provides a way for JavaScript code to access and manipulate the contents of the web page represented by the Document interface. The document object has properties and methods that allow you to get ...
Read more