Object-Oriented JavaScript (OOP-JS)

Presented By Md.Shah Jalal

Software Engineer @ EVOKNOW
[email protected]
jalalbd.wordpress.com
1
 Presentation GOAL

JavaScript has strong object-oriented programming

capabilities, even though some debates have taken place
due to the differences in object-oriented JavaScript
compared to other languages.

This presentation will starts with an Introduction to

object-oriented programming. And presentation main
objective is to create object and parse it in different way.

2
 Terminology
Class
Defines the characteristics of the Object.

Object
An Instance of a Class.

Property
An Object characteristic, such as color.

Method
An Object capability, such as walk.

Constructor
A method called at the moment of instantiation.

Inheritance
A Class can inherit characteristics from another Class.

Encapsulation
A Class defines only the characteristics of the Object, a method defines only how the method
executes.

Abstraction
The conjunction of complex inheritance, methods, properties of an Object must be able to simulate
a reality model.
3
Polymorphism
 JavaScript is an object oriented language, but JavaScript does not
use classes.
JavaScript is prototype based, not class based.

?
Prototype-based programming
Prototype-based programming is a style of object-oriented programming in
which classes are not present, and behavior reuse (known as inheritance in
class-based languages) is accomplished through a process of decorating existing
objects which serve as prototypes. This model is also known as class-less,
prototype-oriented, or instance-based programming.

4
 Core Objects

JavaScript has several objects included in its core;

for example, there are objects like Math, Object,
Array, and String. The example below shows how
to use the Math object to get a random number
by using its random() method.

alert(Math.random());
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects

5
 Accessing Object Properties
objectName.propertyName
var message = "Hello World!"; //string Object
var x = message.length; // 12

Accessing Objects Methods

objectName.methodName()
var message = " Hello world!";
var x = message.toUpperCase(); //HELLO WORLD!

6
 Creating a Direct Instance
var person = Object.create(null);

Object.defineProperty(person, 'name', { value: 'Mikhail'

, writable: true
, configurable: true
, enumerable: true })

Object.defineProperty(person, 'age', { value: 19

, writable: true
, configurable: true
, enumerable: true })

Object.defineProperty(person, 'gender', { value: 'Male'

, writable: true
, configurable: true
, enumerable: true }) 7
 Creating a Direct Instance
var person = Object.create(null);
person['name'] = 'Jyoti';
person['age'] = 25;
person ['gender'] = 'Male';
alert("Name : "+ person.name+" Age : "+person.age+" Gender : "+person.gender);
person.name = 'Jalal';
person.age = 26;
person.gender = 'Male';
alert("Name : "+ person.name+" Age : "+person.age+" Gender : "+person.gender);
alert(Object.getOwnPropertyNames(person)); // name,age,gender // array
alert(Object.getOwnPropertyNames(person).length);// 3

8
 Creating a Direct Instance
person = new Object();
person.firstname = "John";
person.lastname = "Doe";
person.age = 50;
person.eyecolor = "blue";

Alternative syntax (using object literals):

person = { firstname :"John",
lastname : "Doe",
age : 50,
eyecolor : "blue“
};
alert(person.firstname + " is " + person.age + " years old.");

9
 Creating a Direct Instance
var person = {
first_name : 'Shah'
, last_name : 'Jalal'
, age : 19
, gender : 'Male'
, get name() {
return this.first_name + ' ' + this.last_name }
, set name(new_name) { var names
names = new_name.trim().split(/\s+/)
this.first_name = names['0'] || ''
this.last_name = names['1'] || '' }
}

alert(person.name);
person.name = 'Rushow Khan';
alert(person.name); 10
 Custom Objects
function Person(gender)
{
this.gender = gender;
alert('Person instantiated');
}
var person1 = new Person('Male');
var person2 = new Person('Female');
//display the person1 gender
alert('person1 is a ' + person1.gender); // person1 is a Male
alert('person2 is a ' + person2.gender); // person1 is a Female

11
 Use The Method sayHello() for the Person Class

function Person(gender)
{
this.gender = gender;
}
Person.prototype.sayGender = function()
{
alert(this.gender);
};

var person1 = new Person('Male');

var genderTeller = person1.sayGender;
person1.sayGender(); // alerts 'Male'
genderTeller(); // alerts undefined
alert(genderTeller === person1.sayGender); // alerts true
alert(genderTeller === Person.prototype.sayGender); // alerts true
12
genderTeller.call(person1); //alerts 'Male'
 Object.create method
create a foo object that has a name property and a
sayHello function:

var foo = {
name: "foo",
sayHello: function()
{
alert("hello from " + this.name);
}
};
foo.sayHello(); // hello from foo

13
 Use Object.create to make a bar object that has foo as its
prototype, and add a sayGoodbye function to it:

Object.create method
var bar = Object.create(foo);
bar.sayGoodbye = function()
{
alert("goodbye from " + this.name);
}
bar.sayHello(); // hello from foo
bar.sayGoodbye(); // goodbye from foo

14
 Using an Object Constructor
function person(firstname,lastname,age,eyecolor)
{
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.eyecolor = eyecolor;
}
myFather = new person("John","Doe",50,"blue");
alert(myFather.firstname + " is " + myFather.age + " years old.");

15
 JavaScript for...in Loop
function myFunction()
{
var x;
var txt="";
var person = {fname:"John",lname:"Doe",age:25};

for (x in person)
{
txt=txt + person[x];
alert(txt);
}
}
myFunction(); 16
 Multi dimensional
person = {
firstname:"John",
business:{
a:{
s:"software",
h:"hardware",
e:"electronics"
},
b:"garments"
c: ["A", "B", 2, 3]

}
};
alert(person.firstname); // Jhon
alert(person.business.a.s); // software
alert(person.business.b); // garments
alert(person.business.c[2]); // 2 17
 Summary

Javascript object is nothing but a special type of

data which have property and method where
property can be a special type of data who can hold
object/array etc.

18
Reference:
http://www.w3schools.com/js/js_objects.asp
https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects
https://developer.mozilla.org/en-US/docs/JavaScript/A_re-introduction_to_JavaScript
http://www.adobe.com/devnet/html5/articles/javascript-object-creation.html
http://killdream.github.com/blog/2011/10/understanding-javascript-oop/

19