• Like
  • Save
Introduction to Object Oriented Javascript
Upcoming SlideShare
Loading in...5

Introduction to Object Oriented Javascript



Code camp presentation for OOJS introduction

Code camp presentation for OOJS introduction



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Introduction to Object Oriented Javascript Introduction to Object Oriented Javascript Presentation Transcript

    • Object Oriented JavaScript An Introduction Manoj Nama
    • Agenda ● ● ● ● ● ● Functions Objects Prototypal Inheritance Callbacks & Closures Async Programming Some Exercises
    • Functions ● ● Functions are first class members of JavaScript They can be used just like variables function someFunction(arg1, arg2) { return arg1 + arg2; }
    • Functions ● ● Example JavaScript has Function 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
    • Call & Apply ● Example 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]);
    • Objects ● ● Example In JavaScript almost everything is an Object Multiple ways to create an Object ○ ○ ○ ○ Object Constructor var Object Literal var Inbuilt Method var Constructor function var obj obj obj obj = = = = new Object() {} Object.create() new Person()
    • Constructor Function ● Constructor function is similar to the notation of a Class function Person(name, age) { this.name = name; this.age = age; } Example
    • Prototypes ● ● ● Objects inheriting from 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
    • Prototypal Chain ● ● o All Objects 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.prototype → … → Object.prototype → null
    • Inheritance ● ● ● Inheriting properties and methods Prototypes are used for inheritance Two ways ○ ○ Inherit from Constructor Functions (Class) Inherit from another Objects Example
    • Callbacks ● ● ● Example Callbacks are basically 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
    • Closures ● ● ● Example Very important due 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
    • Async Programming ● ● ● Callbacks really 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..
    • Callback Hell asyncOp1(function(result) { asyncOp2(function(result1) { asyncOp3(function(result2) { ... asyncOp1476(function(result3) { //phew! got my result }); }); }); });
    • 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
    • Async Flow Control async.parallel([ function(callback) { callback(null, “data”); }, function(callback) { callback(null, “data2”); } ], //optional callback function(err, results) { //results: [“data”, “data2”] }); Example async.waterfall([ function(callback) { callback(null, “data”); }, function(arg1, callback) { //arg1: “data” callback(null, “data2”); } ], //optional callback function(err, result) { //result: “data2” });
    • 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)
    • Exercises ● ● ● Add a loop() 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
    • 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/
    • Thank You ! Manoj Nama @manoj_nama