javascript prototype and module pattern
DESCRIPTION
JavaScript Prototype and Module PatternTRANSCRIPT
Module Pattern, Prototype chain Module Pattern, Prototype chain and Inheritance in JavaScriptand Inheritance in JavaScript
By - Narendra Sisodiya - https://twitter.com/nsisodiya
Module Pattern, Prototype chain Module Pattern, Prototype chain and Inheritance in JavaScriptand Inheritance in JavaScript
By - Narendra Sisodiya - https://twitter.com/nsisodiya
Object.create & prototype chain
//var a = Object.create(Object.prototype); is Same as//var a = {};var person = {
name : "Child of earth",age : 0,nature: "cool",eat: function (){
alert(this.name +" is eating");}
}
var narendra = Object.create(person);narendra.name = "Narendra Sisodiya";narendra.age = 29;narendra.eat(); //"Narendra Sisodiya is eating";
narendra.hasOwnProperty("eat") //falsenarendra.hasOwnProperty("name") //truenarendra.hasOwnProperty("nature") //false
Object.create & prototype chain
person
nature
eat
name
age
__proto__
constructor
Object.prototype
toString
__proto__
hasOwnProperty
null
::function Object() {
[native code]
}
narendra
name
age
__proto__
constructor
a property, it will look into object, if unable to find, it will look into object.__proto__ , if unable to find, it will look into object.__proto__.proto__ and so on, until it find null. This is call Prototype Chaining
Longer the prototype chain, more the access time
Function at prototype chain & context
eat: function (){alert(this.name +" is eating");
}
function eat is not part of object “narendra”, this.name When you run, narendra.eat(), eat() function of prototype chain will be executed with Execution Context == narendra,
Every function executed with a context, narendra.eat() will be executed with context as “narendra” so inside eat function, value of this will be narendra
narendra === this //true
person.eat(); // Child of earth is eating person.eat.call(narendra); // Narendra Sisodiya is eating
Constructors Without Prototypes
var Car = function(data) {this.data = data;
this.drive = function() {alert("Car is running");return this;
};this.giveName = function(){
alert("The car name is " + this.data);return this;
}};
(new Car("SUMO")).giveName().drive();var a = new Car("TATA") ;a.drive();alert( a.data ) ; //
Problem - Every Object contains same
Functions, They are not shared,Sharing is possible using
Prototypes
a.drive & b.drive give same result,but they are differentUseful Only for Singleton
Constructors Without Prototypes
var Car = function(data) {this.data = data;
this.drive = function() {alert("Car is running");return this;
};this.giveName = function(){
alert("The car name is " + this.data);return this;
}};
(new Car("SUMO")).giveName().drive();var a = new Car("TATA") ;a.drive();alert( a.data ) ; //
Problem - Every Object contains same
Functions, They are not shared,Sharing is possible using
Prototypes
a.drive & b.drive give same result,but they are differentUseful Only for Singleton
Constructors Without Prototypes
function - Car
constructor
data
object - a
__proto__
Car.prototype
constructor
__proto__
Object.prototype
toString
__proto__
hasOwnProperty
null
::
constructor
function Function() {
[native code]
}
drive
givenName
data
object - b
__proto__
constructor
drive
givenNamefunction Object() {
[native code]
}
constructor
function Car() { }var a = new Car("TATA")var b = new Car("SUMO")
Constructors With Prototypes
function - Car
constructor
data
object - a
__proto__
Car.prototype
constructor
__proto__
Object.prototype
toString
__proto__
hasOwnProperty
null
::
constructor
function Function() {
[native code]
}
data
object - b
__proto__
constructor
function Object() {
[native code]
}
constructor
function Car() { }Car.prototype = { ... }var a = new Car("TATA")var b = new Car("SUMO")
drive
giveName
Constructors With Prototypes
function - Car
constructor
data
object - a
__proto__
Car.prototype
constructor
__proto__
Object.prototype
toString
__proto__
hasOwnProperty
null
::
constructor
function Function() {
[native code]
}
data
object - b
__proto__
constructor
function Object() {
[native code]
}
constructor
function Car() { }Car.prototype = { ... }var a = new Car("TATA")var b = new Car("SUMO")
drive
giveName
Constructors Without Prototypes Simple
function - Car
constructor
data
object - a
__proto__
Car.prototype
constructor
__proto__
Object.prototype
toString
__proto__
hasOwnProperty
null
::
constructordrive
givenName
data
object - b
__proto__
constructor
drive
givenName
constructor
function Car() { }var a = new Car("TATA")var b = new Car("SUMO")
Constructors With Prototypes Simple
function - Car
constructor
data
object - a
__proto__
Car.prototype
constructor
__proto__
Object.prototype
toString
__proto__
hasOwnProperty
null
::
constructor
data
object - b
__proto__
constructor
constructor
function Car() { }Car.prototype = { ... }var a = new Car("TATA")var b = new Car("SUMO")
drive
giveName
Constructors With Prototypesvar Car = function(data) {
this.data = data;}
Car.prototype = {drive: function() {
alert("Car is running");return this;
},giveName: function(){
alert("The car name is " + this.data);return this;
}};
(new Car("SUMO")).giveName().drive();var a = new Car("TATA") ;a.drive();alert( a.data ) ; //
JS Variables
JS Variables
function - Car
prototype
constructor
data
object - a
__proto__
Car.prototype
a.__proto__ === b.__proto__ === Car.prototype // true
givenName
data
object - b
__proto__
constructor
constructor
__proto__
drive
Object.prototype
toString
__proto__
hasOwnProperty
null
::constructor
Every Object Share Common Prototype Object
What happen If I do not use “new” ?
var Car = function(data){console.dir(this);this.data = data;
}var a = new Car();var b = Car();
WITH NEWvar Car = function(data){
//var this = new Object.create(Car.prototype);console.dir(this);this.data = data;// return this
}
Without new – value of this will be
Windowobject
What happen If I do not use “new” ?
var a = new Car();
var b = Car();
When you invoke constructor with new operator, function will be passed with a THIS variable which inherit from function.prototype
Module Pattern without new Operator (1st way)
var Car = function(data) {this.data = data;
}
Car.prototype = {drive: function() {
alert("Car is running");return this;
},giveName: function(){
alert("The car name is " + this.data);return this;
}};
var CarFactory = function(data){return new Car(data);
}
Module Pattern without new Operator (2nd way)
var Car = function(data) {return new Car.prototype.init(data);
}
Car.prototype = {init : function(data){
this.data = data;},drive: function() {
alert("Car is running");return this;
},giveName: function(){
alert("The car name is " + this.data);return this;
}};Car.prototype.init.prototype = Car.prototype;
Advantage
Both syntax will work !
Car("TATA").giveName().drive();(new Car("SUMO")).giveName().drive();
Inheritance in JavaScript
var Person = function(full_name, age) {this.full_name = full_name;this.age = age;
}
Person.prototype = {drive: function() {
if(this.age >= 18){console.log(this.full_name + " is driving");
}else{console.log(this.full_name + " is not eligible for driving");
}
return this;},eat: function(){
console.log(this.full_name + " is eating");return this;
}};
var chotu = new Person("Chotu", 7, "Student");chotu.eat().drive();
Inheritance in JavaScript
Object.prototype
toString
__proto__
hasOwnProperty
null::
Person
prototype__proto__
constructor
Function.prototype
toString
__proto__
hasOwnProperty
::
chotu
full_name
__proto__
constructor
Person.prototype
eat
__proto__
drive
::
age
function Function() {
[native code] }prototype
Inheritance in JavaScript
var Employee = function(full_name, age, job_title){//Employee.parent.call(this,full_name, age);this.job_title = job_title;
};
Employee.prototype = {office: function(){
console.log(this.full_name + " is a "+ this.job_title + " and he is going to Office");return this;
}};
var narendra = new Employee("Narendra", 30, "Engineer");narendra.eat().drive().office();
// Note – eat() & drive() will not work at this time.. we need inheritance for this
Inheritance in JavaScript
Object.prototype
toString
__proto__
hasOwnProperty
null::
Person
prototype__proto__
constructor
Function.prototype
toString
__proto__
constructor
null
::
chotu
full_name
__proto__
constructor
Person.prototype
eat__proto__
drive
age
function Function() {
[native code] }prototype
Employee
prototype__proto__
constructornarendra
job_title__proto__
constructor
Employee.prototype
__proto__office
Goal is to understand this function
Function.prototype.inheritFrom = function (Base){var F = function(){};F.prototype = Base.prototype;var old_prototype = this.prototype;this.prototype = new F();this.prototype.constructor = this;for (i in old_prototype) {
this.prototype[i] = old_prototype[i];}this. parent = Base;
} &
Employee.parent.call(this,full_name, age);
&Employee.inheritFrom(Person);
Function.prototype
inheritFrom
__proto__
constructor
null
::
Step by Step (Employee.inheritFrom(Person))
Object.prototype
toString
__proto__
hasOwnProperty
null::
Person
prototype__proto__
constructor
Function.prototype
toString
__proto__
constructor
null
::
Person.prototype
eat__proto__
drive
Employee
prototype__proto__
constructorEmployee.prototype
__proto__office
var F = function(){};F.prototype = Base.prototype;var old_prototype = this.prototype;
F
prototype__proto__
constructor
old_prototype
Step by Step (Employee.inheritFrom(Person))
Object.prototype
toString
__proto__
hasOwnProperty
null::
Person
prototype__proto__
constructor
Function.prototype
toString
__proto__
constructor
null
::
Person.prototype
eat__proto__
drive
Employee
prototype__proto__
constructorEmployee.prototype
__proto__office
this.prototype = new F();this.prototype.constructor = this;
F
prototype__proto__
constructor
old_prototype
Employee.prototype
__proto__constructor
Step by Step (Employee.inheritFrom(Person))
Object.prototype
toString
__proto__
hasOwnProperty
null::
Person
prototype__proto__
constructor
Function.prototype
toString
__proto__
constructor
null
::
Person.prototype
eat__proto__
drive
Employee
prototype__proto__
constructorEmployee.prototype
__proto__office
for (i in old_prototype) {this.prototype[i] = old_prototype[i];
}this. parent = Base;
F
prototype__proto__
constructor
old_prototype
Employee.prototype
__proto__constructor
parent
office
Step by Step (Employee.inheritFrom(Person)) Final
Object.prototype
toString
__proto__
hasOwnProperty
null::
Person
prototype__proto__
constructor
Function.prototype
toString
__proto__
constructor
null
::
Person.prototype
eat__proto__
drive
Employee
prototype__proto__
constructor Employee.prototype
__proto__constructorparent
office
chotu
full_name
__proto__
constructor
age
narendra
job_title__proto__
constructor
full_nameage