Introduction to Object Oriented Javascript

796 views

Published on

Code camp presentation for OOJS introduction

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
796
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to Object Oriented Javascript

  1. 1. Object Oriented JavaScript An Introduction Manoj Nama
  2. 2. Agenda ● ● ● ● ● ● Functions Objects Prototypal Inheritance Callbacks & Closures Async Programming Some Exercises
  3. 3. Functions ● ● Functions are first class members of JavaScript They can be used just like variables function someFunction(arg1, arg2) { return arg1 + arg2; }
  4. 4. 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
  5. 5. 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]);
  6. 6. 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()
  7. 7. Constructor Function ● Constructor function is similar to the notation of a Class function Person(name, age) { this.name = name; this.age = age; } Example
  8. 8. 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
  9. 9. 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
  10. 10. Inheritance ● ● ● Inheriting properties and methods Prototypes are used for inheritance Two ways ○ ○ Inherit from Constructor Functions (Class) Inherit from another Objects Example
  11. 11. 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
  12. 12. 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
  13. 13. 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..
  14. 14. Callback Hell asyncOp1(function(result) { asyncOp2(function(result1) { asyncOp3(function(result2) { ... asyncOp1476(function(result3) { //phew! got my result }); }); }); });
  15. 15. 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
  16. 16. 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” });
  17. 17. 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)
  18. 18. 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
  19. 19. 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/
  20. 20. Thank You ! Manoj Nama @manoj_nama

×