Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)

Object Oriented
JavaScript
By Kanakaraj Venkataswamy
28th & 29th November 2013

Who am i
Tech Lead
Hertz ( www.hertz247.com )
email: kanakarajv@techaspect.com
twitter: @rajakvk
Blog: www.vkanakaraj.wordpress.com

Who are you?

•
•
•
•

Name
Hobby
A secret about you
Within 2 minutes

Agenda

•
•
•
•
•

What is OO?
Why OOJS?
Important concepts
Design pattern
requirejs

What is OO?

•

Encapsulation

•

Inheritance

•

Polymorphism

•

etc.

Why OOJS?

•
•
•
•
•

Not only for form validation
Complex
Client side intensive
Need better organisation
Reuse

background

•
•
•
•
•
•

Interpreted, prototype based, dynamically
typed, has first-class functions by Brendan
Eich in 10 days for NetScape (now Mozilla)
on Sep „1995.
ECMA-262 (1-Jun„97, 2-Jun‟98, 3-Dec‟99, 4-x, 5-Dec‟09)
Mocha, LiveScript, JavaScript
V8, Chakra, Rhino, Carakan, Nitro, etc.
Hosts: Browser, Acrobat Reader, Tools in Creative suit, etc
Core, DOM, BOM

object
•
•
•
•
•
•
•
•
•
•

key value pair
key is string, value is „any‟ javascript value
var myObj = {}; // empty object
var myObj = new Object(); // empty object
var myObj = new Human(); // will be explained
myObj = { fname: „raja‟, lname: „kvk‟ };
console.log(myObj.fname); // raja
myObj.project = „hertz‟;
console.log( myObj[„project‟] ); // hertz
delete myObj.name

Important concepts
•
•
•
•
•
•
•
•
•
•

Data type
Scope
Falsy
IIF / Function as first class object
Hoisting
arguments
Call / Apply
Closure
Name spacing
Prototype

Data Types
•

Primitive types
o
o
o
o

•

o

Everything else is object
o
o
o

•

number
string
boolean
undefined
null

o

function
array
date
regex, etc.

Object is nothing but key/value pair

Scope
Scope in a programing language controls the
visibility and lifetimes of variables and
parameters.

•
•
•

Global scope
Function scope
this

Falsy
The following values are falsy
o
o
o
o
o
o

false
0 (zero)
“” (empty string”)
null
undefined
NaN (not a number)

Everything else is truthy

Function - first class
object
Function

•
•
•
•
•
•

is an instance of Object type
can have properties
can have methods
can be stored in a variable
can be passed as parameter

can be returned from a function

IFF
anonymous function
function(){
// code
}
Immediately invoked function
function(arg) {
alert(arg)
} (5)

hoisting

•

function declarations and variable
declarations are always moved (hoisted)
invisibly to the top of their containing scope
by the javascript interpreter.

•

one var statement per scope at the top

arguments

•
•
•
•
•

an object available within all functions
exists only inside function body
not an Array but similar
have length property
does not have Array methods like pop

call / apply

•
•

call is used when you want to control the
scope that will be used in the function called.
http://jsfiddle.net/rajakvk/3Yp6D/

closure
Definition: closure is the local variable for a
function - kept alive after the function has
returned

•
•

Garbage collection
Memory leak

name space

•
•
•

Name spacing is a technique employed to
avoid collisions with other objects or
variables in the global scope.
No built in support.
var AppSpace = AppSpace || {};
AppSpace.Mail = function(){};
AppSpace.Video = function(){};

prototype

•
•

prototype is an object from which other
objects inherit properties and methods
Every function has a prototype by default

Great power comes with
great responsibility

Take away
JavaScript is a flexible and expressive
language that should be written clearly and

concisely.

require.js
Asynchronous Module Definition (AMD)

The problem & solution

•
•
•
•
•

Solves dependency management problem
API: define(id, dependencies, factory)
Keep execution order
Loads text, CoffeeScript, template, etc.
Minify & Build capability (optimization)

Introduction

•

Patterns are proven solutions to software
development problems.

•
•

Patterns are reusable for similar problems.
Creational, Structural, Behavioural

What is covered here?
Singleton - Creational
Module - Structural
Decorator - Structural
Observer - Behavioural

Singleton Pattern

•
•
•
•

The singleton pattern is a design pattern that
is used to restrict instantiation of a class to
one object.
Namespacing, Grouping related methods
and attributes together.
Tightly coupled, Unit testing is difficult
http://jsfiddle.net/rajakvk/gv644/

Module Pattern

•
•

Loose definition: a way to provide both
private and public encapsulation for classes.
http://addyosmani.com/resources/essentialjs
designpatterns/book/#modulepatternjavascri
pt

Decorator

•
•

Decorators offered the ability to add
behaviour to existing classes in a system
dynamically.

http://jsfiddle.net/rajakvk/69EdP/

Observer Pattern

•

•

Define a one-to-many dependency between
objects so that when one object changes
state, all its dependents are notified and
updated automatically.
http://www.dofactory.com/javascriptobserver-pattern.aspx

Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns) (20)

Recently uploaded (20)

Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)