level
Object Oriented JavaScript
Is JavaScript an object oriented language or not ?
Our Map !
Key Concepts
OOJS
Helper Methods
OO Concepts
Key Concepts
Key Concepts | Primitive vs Object
var str = ‘ahmed’; //str is primitive
var len = [Link]; //str is now an object
Open Source Department – ITI
Key Concepts | Closures
function personName (firstName) {
var nameIntro = "This person name is ";
function addLastName (lastName) {
return nameIntro + firstName + " " + lastName;
}
return addLastName;
}
var addName = personName(“Ibrahim”); //firstName = Ibrahim
addName(“Mohsen”);
//This person name is Ibrahim Mohsen
Open Source Department – ITI
Key Concepts | Lexical Scope
var name = “Ahmed”
Global Scope
function outerFn(){ name
name = “Ahmed”
var name = “Ali” ???
function innerFn(){
[Link](name) outerFn Scope
} name
name = “Ali”
???
innerFn()
innerFn Scope
}
outerFn()
[Link](name) name
???
Output:
Ali
Ahmed
Open Source Department – ITI
Key Concepts | this keyword
var employee = {
employee = {
var person
‘myName’: “Ahmed”,
‘myName’: “Ahmed”,
‘getName’: function(){
‘getName’: function(){
[Link]( this .myName);
[Link]([Link]);
}};
}};
[Link]();
[Link]();
[Link]();
[Link]();
[Link]();
[Link]();
Output
> “Ahmed”
> person is undefined
> “Ahmed”
Open Source Department – ITI
Key Concepts | this keyword .
[Link] = “Ahmed”;
[Link] = function(){ [Link]([Link]);}
var person = {
‘myName’: “Mohamed”,
‘getName’:
‘getName’: [Link]
[Link]
};
[Link]();
[Link]();
[Link]();
Output
> undefined
> “Mohamed”
Open Source Department – ITI
Key Concepts | context
var myName = “Ahmed”;
window
var getMyName = function(){ [Link]([Link]);}
var Person = {‘myName’: “Mohamed”,
‘getMyName’: function(){
window. getMyName()
}
};
[Link]();
Output
Window context
> “Ahmed”
myName = “Ahmed”
Person context
And That is a problem,
But We will solve it later. myName = “Mohamed”
Open Source Department – ITI
Helper Methods | call
[Link](thisArg [, arg1[, arg2[, ...]]])
Example
var name = “Ahmed”;
function getMyData (age , job){
[Link]([Link]+” is”+ job);
}
var Person = {
name : “Mohamed”
}
getMyData(14, “a student”);
Ahmed is a student
[Link](Person,24, “an engineer”);
Mohamed is an engineer
Open Source Department – ITI
Key Concepts | context problem solving
var myName = “Ahmed”;
person
var getMyName = function(){ [Link]([Link]);}
var Person = {‘myName’: “Mohamed”,
‘getMyName’: function(){
window. [Link](this)
}
};
[Link]();
Output
Window context
> “Mohamed”
myName = “Ahmed”
Person context
Problem solved myName = “Mohamed”
Open Source Department – ITI
Helper Methods | apply
[Link](thisArg [, [arg1,arg2,…] ])
Example
var name = “Ahmed”;
function getMyData (age , job){
[Link]([Link]+” is”+ job);
}
var Person = {
name : “Mohamed”
}
getMyData(14, “a student”);
Ahmed is a student
[Link](Person,[24, “an engineer”]);
Mohamed is an engineer
Open Source Department – ITI
Helper Methods | bind
[Link](thisArg [, arg1[, arg2[, ...]]])
Example
var age = 11;
function getAge (){
[Link](“My Age is ”+ [Link]);
}
var Person = { age : 14}
var getPersonAge = [Link](Person);
getAge();
My Age is 11
getPersonAge();
My Age is 14
Open Source Department – ITI
Key Concepts | prototype property
Every Object Has a prototype property
&
Every instance instance use the Object prototype property .
Example
- Create a new instance of String Object.
var str = new String(“ITI”);
- Use a method that existed in the inherited prototype property of String Object.
[Link]();
Open Source Department – ITI
Object Oriented Keywords (OOJS)
OOJS | Class
A class is a template definition of an object's properties and methods.
Class
Object B
Properties Methods Object A
Object C
JavaScript Implementation
var Animal = function () {};
var Animal = function () {};
var penguin = new Animal();
var elephant = new Animal(); penguin elephant
Open Source Department – ITI
OOJS | Constructor
A method called at the moment an object is instantiated.
JavaScript Implementation
Amigos
var Animal = function (name) {
[Link] = name;
}; penguin
Dumbo
var penguin = new Animal(‘amigos’);
var elephant = new Animal(‘Dumbo’);
elephant
Open Source Department – ITI
OOJS | Object Properties & Methods
Object Property is an object characteristic, such as name.
Object Method is an object capability, such as walk.
JavaScript Implementation
var Animal = function (name) {
[Link] = name;
[Link] =
function(){
[Link](“My Name is ”+[Link]);
};
};
var penguin = new Animal(‘Amigos’);
My Name is Amigos
[Link]();
penguin
Open Source Department – ITI
Object Oriented Concepts
Inheritance
OO Concepts | Inheritance .
A class can inherit characteristics and capabilities from another class.
JavaScript Implementation
1 Create Parent Class:
var Animal = function (name) {
[Link] = name;
};
Object class Animal class
prototype prototype
constructor constructor
Open Source Department – ITI
OO Concepts | Inheritance . .
2 Use prototype property to define properties and methods:
[Link] = function(){
[Link](“My Name is ”+[Link]);
}
Animal class
prototype
Object Prototype Animal Prototype
sayMyName
constructor
Open Source Department – ITI
OO Concepts | Inheritance . . .
3 Create Child Class:
var Bird = function (name, canFly) {
[Link](this,name);
[Link] = canFly;
};
Object class Bird class
prototype prototype
constructor constructor
Open Source Department – ITI
OO Concepts | Inheritance . . .
3 Create Child Class:
var Bird = function (name, canFly) {
[Link](this,name);
[Link] = canFly;
};
Object class Bird class
prototype prototype
constructor constructor
But we want Bird class to inherit from Animal class not Object class
???
Open Source Department – ITI
Helper Methods | [Link]
[Link](proto [,properties])
Example
var Person = function(pname){
[Link] = pname;
}
var Student = [Link]([Link]);
//OR
var Student = new Person(“islam”);
//So, What’s the difference between new or [Link]
Open Source Department – ITI
Fight No#1
new [Link]
It creates a new instance of the class method creates a new object with
the specified prototype object.
Example: Example:
var Person = function(pname){ var Person = function(pname){
[Link] = pname; [Link] = pname;
} }
var Student = new Person(“Ali”); var Student =
//Student is an instance of [Link]([Link]);
Person So It take the prototype //Student is a customized object
of it. with prototype of Person.
OO Concepts | Inheritance . . . .
4 Create Child Prototype that inherit from Parent prototype:
Object class Animal class Bird class
prototype prototype prototype
constructor constructor constructor
Open Source Department – ITI
OO Concepts | Inheritance . . . .
4 Create Child Prototype that inherit from Parent prototype:
[Link] = [Link]([Link]);
Object class Animal class Bird class
prototype prototype prototype
constructor constructor constructor
Open Source Department – ITI
OO Concepts | Inheritance . . . .
4 Create Child Prototype that inherit from Parent prototype:
[Link] = [Link]([Link]);
5 Create child constructor:
[Link] = Bird;
Object class Animal class Bird class
prototype prototype prototype
constructor constructor constructor
Open Source Department – ITI
OO Concepts | Inheritance . . . . .
6 Add Child Own Properties and Methods:
[Link] = function(){
if([Link]) { [Link]( “I fly :D” ); }
else { [Link]( “I can’t fly :( ” ); }
};
Animal class
prototype
Animal Prototype Bird Prototype
fly
constructor
Open Source Department – ITI
OO Concepts | Inheritance . . . . . .
7 Let’s Try:
var penguin = new Bird(‘amigos’,false);
[Link]();
[Link]();
I can’t fly
Amigos
Open Source Department – ITI
OO Concepts | Inheritance | prototype chain
Animal class Bird class WildBird class
name = “dido” name = “rio” canFly = true
isExisted = true
sayMyName() fly() hunt()
var Eagle = new WildBird(true);
[Link]([Link]); // Rio
[Link]([Link]); // true
[Link](); //Hunt!!;
Open Source Department – ITI
Encapsulation
OO Concepts| encapsulation
Encapsulation is the packing of data and functions into one component
(for example, a class) and then controlling access to that component .
getName()
Class
amigos
Open Source Department – ITI
Helper Methods | defineProperty
??!
[Link](obj, prop, descriptor)
Descriptor is an object that describe the characteristics of the property.
Descriptor consists of:
configurable true if the descriptor may be changed.
enumerable true if and only if this property shows up during enumeration.
writable true if the prop’s value may be changed using =.
value The value associated with the property.
get A function which serves as a getter for the property.
set A function which serves as a setter for the property.
Open Source Department – ITI
Helper Methods | defineProperty
[Link](obj, prop, descriptor)
Example
var obj = {};
[Link](obj, ‘id’,{
enumerable: false,
writable:false,
configurable:false,
value: “my-id”
});
[Link](obj, ‘id’,{
get: function(){return id},
set: function(newVal){id = newVal},
configurable:true,
});
Open Source Department – ITI
Polymorphism
OO Concepts | Polymorphism
Poly means "many" and morphism means "forms". Different classes might
define the same method or property.
Eagle Fly()
Bird class Dove Fly()
Fly()
Penguin Fly()
Open Source Department – ITI
OO Concepts | Polymorphism
Poly means "many" and morphism means "forms". Different classes might
define the same method or property.
Eagle Fly() I fly very fast
Bird class Dove Fly() I fly for long distances
Fly()
I fly Penguin Fly() I can’t fly
Open Source Department – ITI
OO Concepts | Polymorphism | overriding
1 Overriding the parent method and don’t implement it:
[Link] = function(){
[Link]( “Hi everyone, My Name is”+[Link] );
};
2 Overriding the parent method with implementing it inside the new one:
[Link] = function(){
[Link](this);
[Link]( “Hi everyone, My Name is”+[Link] );
};
Open Source Department – ITI
OO Concepts | Polymorphism | overloading
Report
Can we do overloading in JavaScript ?
If Yes, Tell me How??
If No, Tell me Why??
Note:
Support Your Answer by Examples.
Open Source Department – ITI
