An introduction to Object Oriented JavaScript

An introduction to Object Oriented JavaScript

• 1.
  Object Oriented JavaScript An Introduction -Manoj Nama
• 2.
  Object Oriented JavaScript An Introduction -Manoj Nama
• 3.
  Agenda ● Functions ● Objects ●Prototypal Inheritance ● Callbacks & Closures ● Async Programming ● Some Exercises
• 4.
  Functions ● Functions arefirst class members of JavaScript ● They can be used just like variables function someFunction(arg1, arg2) { return arg1 + arg2; }
• 5.
  Functions ● JavaScript hasFunction scope, i.e only Functions define the scope and nothing else ● A function has access to all the variables and methods in the scope in which it is defined Example
• 6.
  Call & Apply ●Call/Apply both are used to call a function with the ability to change the this reference ● Only difference between the two is syntax ○ Call takes arguments as a list functionName.call(obj, arg1, arg2); ○ Apply takes an array of Arguments functionName.apply(obj, [arg1, arg2]); Example
• 7.
  Objects ● In JavaScriptalmost everything is an Object ● Multiple ways to create an Object ○ Object Constructor var obj = new Object() ○ Object Literal var obj = {} ○ Inbuilt Method var obj = Object.create() ○ Constructor function var obj = new Person() Example
• 8.
  Constructor Function ● Constructorfunction is similar to the notation of a Class function Person(name, age) { this.name = name; this.age = age; } Example
• 9.
  Prototypes ● Objects inheritingfrom other Objects ● Prototype is an object used to construct new objects ● we can assign properties to prototypes to inherit them Prototypes are used with Constructor Functions
• 10.
  Prototypal Chain ● AllObjects inherit from Object class ● If certain property is not available on current object, it is looked on prototype, then Parent’s prototype and so on … until the property or null is found o → o.prototype → … → Object.prototype → null
• 11.
  Inheritance ● Inheriting propertiesand methods ● Prototypes are used for inheritance ● Two ways ○ Inherit from Constructor Functions (Class) ○ Inherit from another Objects Example
• 12.
  Callbacks ● Callbacks arebasically functions passed on as arguments to another operation ● This allows us to cope with Asynchronous nature of JavaScript ● We don’t have to block the browser for results Example
• 13.
  Closures ● Very importantdue to Async nature of JavaScript ● Closures are basically functions which capture the surrounding scope ● The variables remain bound to the scope even when the initiator returns Example
• 14.
  Async Programming ● Callbacksreally help in maintaining the sanity in Asynchronous operations ● But, what if there are huge no of async operations depending on each other, nested inside each other.. ● This is referred to as Callback hell..
• 15.
  Callback Hell asyncOp1(function(result) { asyncOp2(function(result1){ asyncOp3(function(result2) { ... asyncOp1476(function(result3) { //phew! got my result }); }); }); });
• 16.
  Async Flow Control ●Callback hell can be avoided by controlling the program flow ● Async.JS is an excellent library to control the callback flow ● Promises Pattern can be very useful with Async Operations
• 17.
  Async Flow ControlExample async.parallel([ function(callback) { callback(null, “data”); }, function(callback) { callback(null, “data2”); } ], //optional callback function(err, results) { //results: [“data”, “data2”] }); async.waterfall([ function(callback) { callback(null, “data”); }, function(arg1, callback) { //arg1: “data” callback(null, “data2”); } ], //optional callback function(err, result) { //result: “data2” });
• 18.
  Tips & Tricks ●use + to convert expressions to a number ○ +new Date() gives Timestamp ● use !! to convert any expression to a boolean ● Append array to another array ○ a = [1,2,3]; b= [4,5,6] ○ Array.prototype.push.apply(a,b)
• 19.
  Exercises • Add aloop() method to the Prototype of Array • Implement basic Inheritance with an example of Employee • print numbers 1..5, such that every number is printed after 500ms
• 20.
  Links to Examples •Functions: http://jsfiddle.net/manoj_nama/GE59y/ • Call & Apply: http://jsfiddle.net/manoj_nama/6tLx5/1/ • Objects: http://jsfiddle.net/manoj_nama/Ma9EQ/ • Constructor Function: http://jsfiddle.net/manoj_nama/3Ly4V/1/ • Inheritance: http://jsfiddle.net/manoj_nama/YLUHw/1/ • Callbacks: http://jsfiddle.net/manoj_nama/9vqEf/1/ • Closures: http://jsfiddle.net/manoj_nama/H6nE2/1/ • Promises: http://jsfiddle.net/manoj_nama/R6ZV2/