JavaScript Prototype and Module Pattern

1. Module Pattern, Prototype chainModule Pattern, Prototype chain
and Inheritance in JavaScriptand Inheritance in JavaScript
By - Narendra Sisodiya -
https://twitter.com/nsisodiya
narendra@narendrasisodiya.com

2. Module Pattern, Prototype chainModule Pattern, Prototype chain
and Inheritance in JavaScriptand Inheritance in JavaScript
By - Narendra Sisodiya -
https://twitter.com/nsisodiya
narendra@narendrasisodiya.com

3. 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") //false
narendra.hasOwnProperty("name") //true
narendra.hasOwnProperty("nature") //false

4. 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

5. 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

6. 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 different
Useful Only for Singleton

7. 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 different
Useful Only for Singleton

8. 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
givenName
function Object() {
[native code]
}
constructor
function Car() { }
var a = new Car("TATA")
var b = new Car("SUMO")

9. 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

10. 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

11. Constructors Without Prototypes Simple
function - Car
constructor
data
object - a
__proto__
Car.prototype
constructor
__proto__
Object.prototype
toString
__proto__
hasOwnProperty
null
:
:
constructor
drive
givenName
data
object - b
__proto__
constructor
drive
givenName
constructor
function Car() { }
var a = new Car("TATA")
var b = new Car("SUMO")

12. 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

13. Constructors With Prototypes
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;
}
};
(new Car("SUMO")).giveName().drive();
var a = new Car("TATA") ;
a.drive();
alert( a.data ) ; //

14. JS Variables

15. 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

16. 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 NEW
var 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
Window
object

17. 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

18. 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);
}

19. 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;

20. Advantage
Both syntax will work !
Car("TATA").giveName().drive();
(new Car("SUMO")).giveName().drive();

21. 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();

22. 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

23. 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

24. Inheritance in JavaScript
Object.prototype
toString
__proto__
hasOwnProperty
nu
:
:
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__
constructor
narendra
job_title
__proto__
constructor
Employee.prototype
__proto__
office

25. 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
:
:

26. Step by Step (Employee.inheritFrom(Person))
Object.prototype
toString
__proto__
hasOwnProperty
nu
:
:
Person
prototype
__proto__
constructor
Function.prototype
toString
__proto__
constructor
null
:
:
Person.prototype
eat
__proto__
drive
Employee
prototype
__proto__
constructor
Employee.prototype
__proto__
office
var F = function(){};
F.prototype = Base.prototype;
var old_prototype = this.prototype;
F
prototype
__proto__
constructor
old_prototype

27. Step by Step (Employee.inheritFrom(Person))
Object.prototype
toString
__proto__
hasOwnProperty
nu
:
:
Person
prototype
__proto__
constructor
Function.prototype
toString
__proto__
constructor
null
:
:
Person.prototype
eat
__proto__
drive
Employee
prototype
__proto__
constructor
Employee.prototype
__proto__
office
this.prototype = new F();
this.prototype.constructor = this;
F
prototype
__proto__
constructor
old_prototype
Employee.prototype
__proto__
constructor

28. Step by Step (Employee.inheritFrom(Person))
Object.prototype
toString
__proto__
hasOwnProperty
nu
:
:
Person
prototype
__proto__
constructor
Function.prototype
toString
__proto__
constructor
null
:
:
Person.prototype
eat
__proto__
drive
Employee
prototype
__proto__
constructor
Employee.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

29. Step by Step (Employee.inheritFrom(Person)) Final
Object.prototype
toString
__proto__
hasOwnProperty
nu
:
:
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_name
age