An introduction to Object Oriented JavaScript - II

  • 619 views
Uploaded on

Over recent years, JavaScript has increasingly gained popularity, partly due to libraries that are developed to make JavaScript apps/effects easier to create for those who may not have fully grasped …

Over recent years, JavaScript has increasingly gained popularity, partly due to libraries that are developed to make JavaScript apps/effects easier to create for those who may not have fully grasped the core language yet.
While in the past it was a common argument that JavaScript was a basic language and was very ‘slap dash’ with no real foundation; this is no longer the case, especially with the introduction of high scale web applications and ‘adaptations’ such as JSON (JavaScript Object Notation).

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
619
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Object Oriented JavaScript An Introduction - Manoj Nama
  • 2. Agenda ● ● ● ● ● ● Functions Objects Prototypal Inheritance Callbacks & Closures Async Programming Some Exercises
  • 3. Functions ● ● Functions are first class members of JavaScript They can be used just like variables function someFunction(arg1, arg2) { return arg1 + arg2; }
  • 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. 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. Objects ● ● Example In JavaScript almost everything is an Object Multiple ways to create an Object ○ Object Constructor var obj = new Object() ○ Object Literal var obj = {} ○ Inbuilt Method ○ Constructor function var obj = new Person() var obj = Object.create()
  • 7. Constructor Function ● Example Constructor function is similar to the notation of a Class function Person(name, age) { this.name = name; this.age = age; }
  • 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. Prototypal Chain ● ● 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 → o.prototype → … → Object.prototype → null
  • 10. Inheritance ● ● ● Example Inheriting properties and methods Prototypes are used for inheritance Two ways ○ ○ Inherit from Constructor Functions (Class) Inherit from another Objects
  • 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. 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. 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. Callback Hell asyncOp1(function(result) { asyncOp2(function(result1) { asyncOp3(function(result2) { ... asyncOp1476(function(result3) { //phew! got my result }); }); }); });
  • 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. 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. 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. 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. 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. Let’s Connect IntelliGrape Software (P) Ltd SDF L-6, NSEZ, Noida Phase 2, India Phone : +91-120-6493668 Fax : +91-120-4207689 Email : query@intelligrape.com /company/intelligrape /intelligrape.software /IntelliGrape