BEING A JS NINJA:Object Oriented JavaScript

Agenda

1. Functions & Objects

2. Prototype Based Programming

3. Class Based - Prototype Based

4. Method Overloading ?

5. Some hacks

6. Questions

7. Exercises!

Functions ( )

• A Simple JS function:

• function multiply(a, b){• return a * b;• };

• A simple assert function

• Note: A method is a function defined inside an object as its property!

Functions ( )

• JavaScript only has Scope.

• A function has access to all the variables and functions in the scope in which it is defined.

• Lets see an example!

• http://jsfiddle.net/suroorwijdan/dr3Bb/2/

this & undefined

“JavaScript has two errors, this and undefined and when this is undefined,

Oh Boy!” - Mikael Rogers

• http://jsfiddle.net/suroorwijdan/6gHjH/4/

Functions ( )

• Closures

• Closures are one of the most powerful weapons for a JS Ninja

• Closures allow a ninja to have access to a function scope with anexported inner function

• http://jsfiddle.net/suroorwijdan/nz9bM/9/

Objects { }

• For a ninja almost everything is an object

• Creating an object:• Using a Constructor - var obj = new

Car();• Using object initializer - var obj = {};• Using Object.create()

• http://jsfiddle.net/suroorwijdan/p5x2G/

Call and apply

• call() and apply() methods defined on functions allows aNinja tochange the context in which the function is executed

http://jsfiddle.net/suroorwijdan/XzzU8/

Prototype {} - {} - {}

“Most Confused Upon Part for budding Ninjas”

http://jsfiddle.net/suroorwijdan/h74gd/

Class vs Prototype Based

Class Based (Java) Prototype Based (JavaScript)

Class and instance are distinct entities All objects are instances

Define a class with a class definition; instantiate a class with constructor methods

Define and create a set of objects with constructor functions

Create a single object with the new operator Same

Construct an object hierarchy by using class definitions to define subclasses of

existing classes

Construct an object hierarchy by assigning an object as the prototype

associated with a constructor function.

Inherit properties by following the class chain. Inherit properties by following the prototype chain

Class definition specifies all properties of all instances of a class. Cannot add properties dynamically at run time

Constructor function or prototype specifies an initial set of properties. Can add or remove properties dynamically to individual objects or to the entire set

of objects

Method Overloading ?

Can we implement method overloading in JavaScript, if Yes, then How?? :|

http://jsfiddle.net/suroorwijdan/3xLtY/

Some Hacks!

• Append new array to another array:

• var a = [4,5,6];• var b = [7,8,9];• Array.prototype.push.apply(a, b);

• Get TimeStamp with +• +new Date();

• Access Strings with [] just like charAt()• var a = “This is my trick”;• a[0] == ‘T’ //true;

Some Hacks!

• Swap variable values:• var a = 10;• var b = 20;• [a,b] = [b,a]

And many more : http://code.google.com/p/jslibs/wiki/JavascriptTips

Some More Concepts

• Memoization: “DIY”

• A memorize function is a higher order function which caches the result returned by the function passed to it

Exercises

• Implement Basic Inheritance with the example of Employee

• Add a forEach method in the prototype of Array

• Implement a function which multiplies the largest number with the first argument

Contact us

Our Office

Client Location

We are experts in MEAN stack framework to build scalable web apps

Click Here To Know More!

Have more queries related to MEAN?

Talk To Our Experts