Javascript Prototype

1) JavaScript Prototype:

Pre-requisites:

1. Javascript Objects

2. Javascript Constructor Functions

Javascript Objects: JavaScript object is a non-primitive data-type that allows you to store multiple collections of data. You do not need to create classes in order to create objects.

The syntax to declare an object is:

const object_name = {

key1: value1, //---> properties

key2: value2

}

Example of javascript objects

let animal = {

legs: 4,

eyes: 2,

food: {

herbivore: true,

carnivore: true

greet: function() {

console.log('Hi');

}

console.log(animal.legs);

console.log(animal.food.carnivore);

animal.legs = 6;

console.log(animal["legs"]);//animal.legs

animal.tail = 1;

console.log(animal);

animal.greet();

JavaScript Constructor Function: used to create objects. Constructor function is written in pascal case (i.e., the first letter of every word is Capital in letter)

2)Create Objects: Constructor Function Vs Object Literal

1. Object Literal is generally used to create a single object. The constructor function

is useful if you want to create multiple objects.

2. Each object created from the constructor function is unique. You can have the same properties as the constructor function or add a new property to one particular object.

Constructor function is written in pascal case, which is , 1st letter will be capital letter.

Here we have given a new property hobby to the object 1 in line no.15, that's the output is showing tennis.

But for the object person2 we haven't given any property called hobby, that's why the output is showing undefined.

3)JavaScript Prototype:

Every function and object has a property named prototype by default.

An object can inherit properties of another object.

The object from which the properties are inherited is named prototype.

Every function and object has its own hidden, internal property, [[Prototype]].

We can access that [[Prototype]] using the __proto__ property. ( it is to note that there are 2 underscore in both sides of the proto)

1) Prototype is the property inside a function or javascript Object, it is not inside object literal or instances of a constructor function.

2) So for console.log(student.prototype) we get undefined as the answer, because student is an object literal and object literal doesn't have any properties inside it.

3) The prototype of object literal is the javascript Object with capital "O". That Object has the methods like tostring() etc.

4) So for the line no.6 console.log(student.__proto__) , the output will be javascipt Object, because the prototype of object literal is the javascript Object. __proto__ is an internal property of an object, pointing to its prototype.

1) Prototype is a property of a function object. It is the prototype of objects constructed by that function. Here object person1 is created by function Person. So Person will have prototype property not person1.

2) So in line no.7 console.log(person1.prototype) will give undefined.

3) __proto__ is an internal property of an object, pointing to its' prototype.

4) So in line no.8 console.log(person1.__proto__) will access the prototype property of Person. There is nothing in the prototype property of Person so in the console {} is being printed.

5) Line no.9 console.log(person1) print person1 instance/object in the console.

4)Prototype Inheritance:

prototypical inheritance refers to the ability to access object

properties from another object. We use a JavaScript prototype to add new properties and

methods to an existing object constructor. We can then essentially tell our JS code to

inherit properties from a prototype. Prototypical inheritance allows us to reuse the

properties or methods from one JavaScript object to another through a reference pointer

Function.

Prototype Object

1) Here by using __proto__: animal to the object dog in line no.7 , we are setting the prototype of dog as animal. So now dog can access all the property and methods of the animal object. Same with object cat and object lion in line no's.8 & 9 respectively . We are setting their prototype as animal too.

2) Therefore in line no.10 console.log(dogs.legs) will print 4, as dog is getting property legs from its prototype animal.

3) In line no.11 console.log(dog.sound) will print 'bark' as the value as dog object have the property value pair of " sound: 'bark' ".

4) line no.12 dog.greet() will access the greet() method/function from its prototype animal and print the value 'Hi'.

Difference between Own Property and Inherited Property

1) Here in line no.8 we are setting the prototype of object dog as animal. The object dog has the property legs with value 2 and animal also has the property legs with the value 4. Since the object dog already have legs property in itself, therefore whenever dog.leg is accessed the value which is present in the dog object will get printed (i.e., 2).

2) So in line no.16 console.log(dog.legs) = 2.

3) Line no.17 console.log(dog.sound) = 'bark'

4) Line no.18 dog.greet() will invoke/call the greet() function/method inside the dog object and print 'Hi Dog'.

5) What is prototypical inheritance

All JavaScript objects inherit properties and methods from a prototype:

Date objects inherit from Date.prototype.

Array objects inherit from Array.prototype.

Player objects inherit from Player.prototype.

The Object.prototype is on top of the prototype inheritance chain. 

Date objects, Array objects, and Player objects all inherit from Object.prototype.

1) the prototype of str is String, so line no.2 will print 'true'.

2) the prototype of String is Function, so line no.3 will print 'true'.

3) the prototype of Object is Function, so line no.4 will print 'true'.

(All these concepts will be clear by seeing the chaining diagram.

4) Objects' prototype = Function, Functions' prototype = javascript Object, javascript Objects' prototype = null. Therefore in line no.5 output will be null.

5) Same for the output and process in line no.6

6) str prototype = String, Strings' prototype = javascript Object (this is different from the built in String) , javascript Objects' prototype = null. Therefore the output in line no.7 will be null.

6)Prototype Chaining:

Prototypal inheritance uses the concept of prototype chaining.

Every object created contains [[Prototype]], which points either to another object or null.

Envision an object C with a [[Prototype]] property that points to object B. Object B’s

[[Prototype]] property points to prototype object A. This continues onward, forming a kind of chain called the prototype chain. This concept is used when searching our code. When we need to find a property in an object, it is first searched for in the object, and if not found, it is searched for on that object’s prototype, and so on. Thus, the entire prototype chain is traversed until the

property is found or null is reached.