Javascript Objects Prototype

Protypical inheritance :

ES6, you can use a class to inherit from one class to other class but still it’s a syntactical sugar. It basically have prototypical inheritance on the base .

How to use inheritance without using the class you will see only function?

Example : Person “class” — Constructor function (No prototype)

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

Person.prototype.walk = function () {
console.log(this.name + " is walking");
}

var bob = new Person('bob');
var sam = new Person('sam');

bob.walk();
sam.walk();

//Output : 
bob is walking
sam is walking

Idea is inherit Lifeform to Animal, to achive that in javascirpt , i have to use prototype keyword in the function object.So that i can extend the Lifeform Class with Animal.Prototype is use to inherit one function to other function , that is the main use of prototype.

If you want to inherit one function(class) to other function(class) we use “Prototype” property.

Example 2 : Prototype Inheritance

//Lifeform “class” — Constructor function (No Prototype)


function Lifeform(){
	this.isLifeform = true;
}

//Animal "Class" -- Constructor function + prototype for inheritance
function Animal () {
	this.isAnimal = true;
}
Animal.prototype = new Lifeform();

//Mammal "Class" -- Constructor function + prototype for inheritance
function Mammal(){
	this.isMammal = true;
}
Mammal.prototype = new Animal();

//Cat "Class" -- Constructor function + prototype for inheritance
function Cat(species) {
	this.isCat = true;
	this.species = species;
}
Cat.prototype = new Mammal();

//Make an instance object of the last "Class"
Var tiger = new Cat("tiger")
console.log(tiger);

//{
isAnimal : true,
isCat: true,
isLifeform: true,
isMammal: true,
species: "tiger"
}

//console.log(tiger.isCat, tiger.isMammal, tiger.isAnimal, tiger.isLifeform);
true true true true

//console.log("tiger hasOwnProperty",
				tiger.hasOwnProperty("isLifeform"), //false
				tiger.hasOwnProperty("isAnimal"), //false
				tiger.hasOwnProperty("isMammal"), //false
				tiger.hasOwnProperty("isCat"), //true
				);
	tiger hasOwnProperty : false false false true

Prototype Chain :

var b = ['yo', 'whadup', '?']

//Arrays inherit from Array.prototype (Which has methods indexOf, forEach, etc...)
//the prorotype chain like : Array.prototype from Object.prototype
// b --> Array.prototype --> Object.prototype --> null

console.dir(b); 
b.length = 3;
b.push('tute');

//b.hasOwnProperty('push') //false
//b -> _proto_ (Array)-> _proto_(Object) 

Example 2 : 
var o = {a:1};

The newly created object O has Object.prototype as its [Portotype] o has no own property name 'hasOwnProperty' hasOwnProperty is an own property of Object.prototype. So o inhertis hasOwnProperty from Object.prototype Object.prototype has null as its prototype.
o --> Object.prototype --> null

Example 3 : function f() {
	return 3;
}

We can deep copy by any of the below method

Using while loop
JSON.Parse
Spread Operator
Small individual copy

let user1 = {
name: 'Azxy',
age : 26,
address : {
	no: 1,
	street: '7th'
}
};

Example 1 : Small individual copy


let user2 = {
name: user1.name,
age: user1.age,
address: user1.address
}

Example 2 : Using while loop – Deepcopy
//instead of above , we can do as below but “address” will be shallow copy in both methods


const user2 = {};

Object.keys(user1).forEach(a => {
	user2[a] = user1[a];
})

Example 3 : Spread Operator
Deepcopy using spread operator, it will create new instance but only for first level other levels will be passed as reference, if we want multiple level we need to create spread operator for multiple level


const user2 = {...user1, address: {...user1.address}};

Example 4 : JSON.Parse
Deepcopy //Create new memory for object


const user2 = JSON.parse(JSON.stringify(user1))
user1.name = 'test';
user1.address.no = 2;


console.log(user1);
console.log(user2)

ARRAY – Copy
============
1. Parse Method


let user1 = [1,2,3,4];

const user2 = JSON.parse(JSON.stringify(user1));

user1[0] = 23;

console.log(user1); //[23,3,3,4]
console.log(user2); //[1,2,3,4]

2. Shallow Copy:

let user1 = [1,2,3,4];

const user2 = user1

user1[0] = 23;

console.log(user1); //[23,3,3,4]
console.log(user2); //[23,2,3,4]

3. Deep Copy using spread operators:

let user1 = [1,2,3,4];

const user2 = [...user1]

user1[0] = 23;

console.log(user1); //[23,3,3,4]
console.log(user2); //[1,2,3,4]

Object Getter and Setter

var o = {
  a: 7,
  get b() { 
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2;
  }
};

console.log(o.a); // 7
console.log(o.b); // 8 <-- At this point the get b() method is initiated.
o.c = 50;         //   <-- At this point the set c(x) method is initiated
console.log(o.a); // 25

Reference

Post Views: 7

We can deep copy by any of the below method

Object Getter and Setter

Reference

Leave a Reply Cancel reply