Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Object Oriented Programming Cheat Sheet

3,093 views

Published on

JavaScript Object Oriented Programming Cheat Sheet

Published in: Technology
  • Be the first to comment

JavaScript Object Oriented Programming Cheat Sheet

  1. 1. Object Oriented Programming in JavaScript © Hans de Rooij hdr.is-a-geek.com
  2. 2. JavaScript object basics ● ● In JavaScript an object is an (unordered) collection of name-value pairs Please note that in JavaScript values can be functions!
  3. 3. Built-in objects ● Built-in objects (with constructor) – ● Built-in objects (without constructor) – ● Object, Function, Array, Date, RegExp & Error Global object, Math & JSON Primitive wrapper objects – String, Number & Boolean
  4. 4. Built-in object creation ● Objects are created using constructors in new expressions – ● ● Alternative syntax is the object literal Objects without constructors can be used immediately. For instance: x = Math.PI; Wrapper objects are created automatically when needed JavaScript built-in objects fiddle
  5. 5. Custom object creation Custom objects can be created using a ● ● … regular JavaScript function that returns an object reference … constructor function invoked in the context of a new expression Please note; – A constructor is a regular JavaScript function! – In case no prototype functionality is used all properties and methods will be created on the object instance JavaScript custom objects fiddle
  6. 6. Constructor function & prototype ● Using both the constructor function and prototype it's possible to define – – ● ● object state at the instance level and object behavior at the level of the shared prototype When reading JavaScript properties the entire prototype chain is searched in case a property cannot be located on an object instance Individual object instances can override inherited behavior JavaScript constructor function and prototype fiddle schema on next slide!
  7. 7. Constructor prototype ● Schematically
  8. 8. JavaScript inheritance ● Combination inheritance – is the most common way to implement inheritance in JavaScript – has two components ● ● Prototype chaining for the implementation of (shared) base class behavior Constructor stealing for the initialization of base class properties on derived object instances JavaScript combination inheritance fiddle schema on next slide!
  9. 9. JavaScript inheritance example
  10. 10. Prototypal inheritance ● In prototypal inheritance – – ● a new object instance inherits directly from another object instance there is no need to implement constructor functions In ECMAScript (fifth edition) prototypal inheritance is implemented as follows: var die_3 = Object.create(die_1); JavaScript prototypal inheritance fiddle schema on next slide!
  11. 11. Prototypal inheritance example
  12. 12. Conclusion ● ● ● ● JavaScript has strong capabilities in the area of Object Oriented Programming The implementation of OOP features differs greatly from class based languages In JavaScript it's common for there to be several OOP implementation alternatives I had to invest a significant amount of time & effort to come to grips with all the intricacies of JavaScript OOP but, in the end, it proved to be a great learning experience for me © Hans de Rooij hdr.is-a-geek.com

×