JavaScript Object Oriented Programming Cheat Sheet
- 1. Object Oriented Programming in JavaScript © Hans de Rooij hdr.is-a-geek.com
- 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. 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. 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. 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. 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!
- 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!
- 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!
- 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
Editor's Notes
- #5: //Declaration object references var obj_inst_1, obj_inst_2; //Use the Object constructor in conjunction with the new operator to //instantiate a new object and assign the reference to obj_inst_1 obj_inst_1 = new Object(); //In JavaScript object properties and methods can be added on the fly obj_inst_1.prop = "Added on the fly"; obj_inst_1.func = function() {return this.prop + "!";}; toFiddleResult(obj_inst_1.func()); //Object literal, an alternative way to instantiate Javascript objects obj_inst_2 = { prop: "Added as part of the object literal", func: function() {return this.prop + "!";} }; toFiddleResult(obj_inst_2.func()); //There is no need to instantiate objects without constructors, i.e. //the global object, Math & JSON var global = this; //In top level code this refers to the global object toFiddleResult("Is 42 a finite number? " + global.isFinite(42)); toFiddleResult("The number u03c0 = " + Math.PI); //Primitive wrapper objects are created automatically when needed var str = "u00a9 Hans de Rooij"; toFiddleResult(str.substring(2, 6) + " wrote this code"); //Function for displaying code results in the JSFiddle results pane function toFiddleResult(str) { //Reference to document node containing fiddle results var result_div = document.getElementById("fiddle_result"); //Fiddle results are listed in pre tags var add_pre = document.createElement("pre"); add_pre.appendChild(document.createTextNode(str)); result_div.appendChild(add_pre); }