Javasrcipt Object Creation Pattern

 Factory Pattern

var peopleFactory = function(name,age,state){
var temp ={}

temp.age=age;
temp.name=name;
temp.state=state;

temp.printPerson = function(){
console.log(this.name+","+this.age + ","+ this.state)
}
return temp;
}

var person1 = peopleFactory('john',23,'CA');
var person2 = peopleFactory('himanshu',23,'CA');

person1.printPerson();
person2.printPerson();

 Cosntructor Pattern

var peopleConstructor = function(name,age,state){


this.age=age;
this.name=name;
this.state=state;

this.printPerson = function(){
console.log(this.name+","+this.age + ","+ this.state)
}

}

var person1 = new peopleConstructor('john',23,'CA');
var person2 = new peopleConstructor('himanshu',23,'CA');

person1.printPerson();
person2.printPerson();

 

Everything is good with constructor patter the only problem is that if we create 1000 objects with it than I have to still write this.printPerson which is not good. So the next pattern which is prototype pattern claims to fix this

 

Few Properties 

 Evert element has a constructor by default and it is assigned by javascript. So if we console.log person1.constructor we will get back the original cosntructor which is

 function(name,age,state){ this.age=age; this.name=name; this.state=state;

this.printPerson = function(){ console.log(this.name+","+this.age + ","+ this.state) }

 } 

 Similarly we will get Object Array Function if we assign them emptly and try to extract their constrcutor

 

prototype Pattern

 Here instead of creating a function with all propertty we will be creating first a empty function.It doesnt't directly reside in it but has access to it.

The main use case of the prototype is that lets suppose we have to create 100000 copy of the object and if it has the same function which is same than it is just a waste of memory so we will use prototype instead of it. So what is prototype-

Every class/constructor has a protottpe property that is shared by every instance of the constructor/class. So it can be accessed by anybody. In the constructor above the printPerson is common for all


var peopleConstructor = function(name,age,state){


this.age=age;
this.name=name;
this.state=state;


peopleConstrcutor.prototype.country = "india

peopleConstructor.prototype.printPerson = function(){
console.log(this.name+","+this.age + ","+ this.state)
}

var person1 = new peopleConstructor('john',23,'CA');
var person2 = new peopleConstructor('himanshu',23,'CA');

person1.printPerson();
person2.printPerson();

 

Properties

 First it will check in instance and if it is not there than it will check it in prototype

Also all array or string has prototype which are the methods of them and all has the construtor function



Comments

Post a Comment

Popular posts from this blog

Form Part 2

App.jsx import React , { useState } from 'react' ; const App = () => { const [ Name , setName ] = useState (); const [ Pass , setPass ] = useState (); const [ seename , seename1 ] = useState (); const [ seepass , seepass1 ] = useState (); const inputEvent = ( event ) => { setName ( event . target . value ); }; const inputEvent1 = ( event ) => { setPass ( event . target . value ); }; const onSubmit = ( event ) => { event . preventDefault (); seename1 ( Name ); seepass1 ( Pass ); } return ( < > < div > < form onSubmit = { onSubmit } > < h1 > Hello { seename } { seepass } </ h1 > < input type = "text" placeholder = "Enter your Name" value = { Name } ...
Read more

Event mini project by Thapa#33

 Index.jsx import React from 'react' import ReactDOM from 'react-dom' ; import "./index.css" ; import App from "./App" ; ReactDOM . render ( < App /> , document . getElementById ( "root" )); index.css * { margin : 0 ; padding : 0 ; } div { width : 100% ; height : 100vh ; background : rgb ( 221 , 39 , 221 ); display : flex ; flex-direction : column ; justify-content : center ; align-items : center ; } button { padding : 12px 20px ; background : #9b59b6 ; color : white ; border : 2px solid #ecf0f1 ; outline : none ; border-radius : 5px ; text-transform : uppercase ; cursor : pointer ; } app.jsx import React , { useState } from 'react' ; const App =() => { const Purple = "yellow" ; const Old = "Click Me" const [ bg , setBg ] = useState ( Purple ); const [ name , newName ] = useState ( Old ); const bgChange =() => { let ...
Read more

De-mystifying 'this' keyword of Javascript

 Hello today I will be talking about 'this' keyword of javascript.It is one of the most confusing term of javascript. Since it is quite a confusion thing I will be compiling stuffs based on the materials I have learnt from the internet so as to help myself in the future. 'this' keyword can be considered quite the literal this word is English alphabet atleast for the initial understanding. Let's consider a main table of a house. It will be termed in js langauge as this.table = "main table" If we console log window.table or this.table than we will be considering the main house's table console.log(window.table) //main table Now let consider the dinning table of the house. It will be  this.dinning={ table:"dinning table"} If we want to call it will be  this.dinning.table // dinning table   Now let consider a private room and in this case it will be a function and if we want to use there we can use as mentioned below let johnsroom = { table:'j...
Read more