Object Oriented Programming in JavaScript
Hans de Rooij hdr.is-a-geek.com
JavaScript object basics
In JavaScript an object is an (unordered) collection of name-value pairs Please note that in JavaScript values can be functions!
Built-in objects
Built-in objects ( ith constructor)
Object! "unction! #rra$! %ate! &eg'(p ) 'rror *lobal object! +ath ) JSO,
Built-in objects ( ithout constructor)
Primitive
rapper objects
String! ,umber ) Boolean
Built-in object creation
Objects are created using constructors in new e(pressions
#lternative s$nta( is the object literal
Objects ithout constructors can be used immediatel$- "or instance. x = Math.PI/ 0rapper objects are created automaticall$ hen needed
JavaScript built-in objects fiddle
1ustom object creation
1ustom objects can be created using a
2 regular JavaScript function that returns an object reference 2 constructor function invo3ed in the conte(t of a ne e(pression
Please note/
# constructor is a regular JavaScript function! In case no protot$pe functionalit$ is used all properties and methods ill be created on the object instance
JavaScript custom objects fiddle
1onstructor function ) protot$pe
4sing both the constructor function and protot$pe it5s possible to define
object state at the instance level and object behavior at the level of the shared protot$pe
0hen reading JavaScript properties the entire protot$pe chain is searched in case a propert$ cannot be located on an object instance Individual object instances can override inherited behavior
JavaScript constructor function and protot$pe fiddle
schema on next slide!
1onstructor protot$pe
Schematicall$
JavaScript inheritance
1ombination inheritance
is the most common a$ to implement inheritance in JavaScript has t o components
Protot$pe chaining for the implementation of (shared) base class behavior 1onstructor stealing for the initiali6ation of base class properties on derived object instances
JavaScript combination inheritance fiddle
schema on next slide!
JavaScript inheritance e(ample
Protot$pal inheritance
In protot$pal inheritance
a ne object instance inherits directl$ from another object instance there is no need to implement constructor functions
In '1+#Script (fifth edition) protot$pal inheritance is implemented as follo s.
var die_3 = Object.create(die_1);
JavaScript protot$pal inheritance fiddle
schema on next slide!
Protot$pal inheritance e(ample
1onclusion
JavaScript has strong capabilities in the area of Object Oriented Programming 7he implementation of OOP features differs greatl$ from class based languages In JavaScript it5s common for there to be several OOP implementation alternatives I had to invest a significant amount of time ) effort to come to grips ith all the intricacies of JavaScript OOP but! in the end! it proved to be a great learning e(perience for me
Hans de Rooij
