Object oriented javascript

Object-Oriented JavaScript (OOP-JS)

Presented By Md.Shah Jalal
Software Engineer @ EVOKNOW
jalalbd@mail.com
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.
Polymorphism 3
Different Classes might define the same method or property.

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

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

7

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

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

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
genderTeller.call(person1); //alerts 'Male'
12

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
console.log(person); 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

Object oriented javascript

More Related Content

What's hot

Viewers also liked

Similar to Object oriented javascript

Recently uploaded

Object oriented javascript