This document discusses object-oriented programming in JavaScript. It covers built-in objects like Object, Function, and Array. It also discusses creating custom objects using constructor functions and prototypes. Constructor functions allow initializing object state, while prototypes allow defining shared object behavior. JavaScript uses prototypal inheritance, where an object inherits directly from another object instance.

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!

7. Constructor prototype
●
Schematically

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. JavaScript inheritance example

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. Prototypal inheritance example

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