Many developers cast off JS as a suitable OOP language because they are so used to the class style of C# and Java. Many people don't realize that JavaScript supports inheritance. When you write object-oriented code it instantly gives you power; you can write code that can be re-used and that is encapsulated. It includes functions and objects, prototype based programming, class based-prototype based, some hacks and exercises. The tutorial begins with a section about function and objects which includes a simple JS function, closures as one of the most powerful weapons for JS ninja, object as it is almost everything for a JS ninja, call and apply methods defined under functions. The function section is followed by the prototype section which includes a brief on class based vs prototype based. After this comes the hack section. It includes some hacks like appending new array to another array, swap variable values and many more. The last section of this tutorial is on exercises which includes some basic exercises like implementing basic inheritance, add forEach method, implement a function.

2. BEING A JS NINJA:
Object Oriented
JavaScript

3. Agenda
1. Functions & Objects
2. Prototype Based Programming
3. Class Based -Prototype Based
4. Method Overloading ?
5. Some hacks
6. Questions
7. Exercises!

4. Functions ( )
• A SimpleJS 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!

5. Functions ( )
• JavaScript only has Scope.
• A function has access to all the variables and functions in the scope in
which it isdefined.
• Lets see an example!
• http://jsfiddle.net/suroorwijdan/dr3Bb/2/

6. this & undefined
“JavaScript has two errors, thisand undefined and whenthisis undefined,
Oh Boy!” - Mikael Rogers
• http://jsfiddle.net/suroorwijdan/6gHjH/4/

7. 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 an
exported innerfunction
• http://jsfiddle.net/suroorwijdan/nz9bM/9/

8. 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/

9. Call and apply
• call() and apply() methods defined on functions allows a Ninja to
change the context in which the function is executed
http://jsfiddle.net/suroorwijdan/XzzU8/

10. Prototype {} - {} - {}
“Most Confused Upon Part for budding Ninjas”
http://jsfiddle.net/suroorwijdan/h74gd/

11. Class vs Prototype Based
Class Based(Java) PrototypeBased (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 atrun 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

12. Method Overloading ?
Can weimplementmethod overloading inJavaScript,
ifYes, thenHow?? :|
http://jsfiddle.net/suroorwijdan/3xLtY/

13. 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 mytrick”;
• a[0] ==‘T’ //true;

14. 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

15. Some More Concepts
• Memoization: “DIY”
• A memorize function is a higher order function which caches the result
returned by the function passed to it

16. 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

17. 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