SlideShare a Scribd company logo
2
Most read
9
Most read
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 (with constructor)
–

●

Built-in objects (without constructor)
–

●

Object, Function, Array, Date, RegExp & Error
Global object, Math & JSON

Primitive wrapper objects
–

String, Number & Boolean
Ad
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
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
Ad
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!
Constructor prototype
●

Schematically
Ad
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!
JavaScript inheritance example
Ad
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!
Prototypal inheritance example
Ad
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
Ad

More Related Content

What's hot (20)

PDF
JavaScript - Chapter 10 - Strings and Arrays
WebStackAcademy
62 slides2.6K views
PPTX
Introduction to HTML5 Canvas
Mindy McAdams
37 slides9.1K views
PPT
Programming Paradigms
Directi Group
47 slides16.5K views
PPTX
Introduction to ASP.NET
Rajkumarsoy
21 slides20.2K views
PPTX
Asynchronous programming
Filip Ekberg
59 slides48K views
PPT
JavaScript: Events Handling
Yuriy Bezgachnyuk
19 slides5.6K views
PPTX
Introduction to Node.js
Vikash Singh
21 slides76.3K views
PDF
javascript objects
Vijay Kalyan
48 slides6.1K views
PDF
JavaScript - Chapter 8 - Objects
WebStackAcademy
37 slides3K views
PPTX
Looping statement
ilakkiya
22 slides4.8K views
PDF
Angular Project Report
Kodexhub
13 slides1.8K views
PPTX
Master page in Asp.net
RupinderjitKaur9
18 slides3.9K views
PPT
JavaScript JQUERY AJAX
Makarand Bhatambarekar
12 slides2.5K views
PPTX
Ajax presentation
Bharat_Kumawat
 
PDF
Angular js
Knoldus Inc.
 
PPTX
Express js
Manav Prasad
 
PPTX
Dom(document object model)
Partnered Health
 
PPTX
Nodejs buffers
monikadeshmane
 
PDF
Java collections
Hamid Ghorbani
 
PPT
Css advanced – session 4
Dr. Ramkumar Lakshminarayanan
 
JavaScript - Chapter 10 - Strings and Arrays
WebStackAcademy
 
Introduction to HTML5 Canvas
Mindy McAdams
 
Programming Paradigms
Directi Group
 
Introduction to ASP.NET
Rajkumarsoy
 
Asynchronous programming
Filip Ekberg
 
JavaScript: Events Handling
Yuriy Bezgachnyuk
 
Introduction to Node.js
Vikash Singh
 
javascript objects
Vijay Kalyan
 
JavaScript - Chapter 8 - Objects
WebStackAcademy
 
Looping statement
ilakkiya
 
Angular Project Report
Kodexhub
 
Master page in Asp.net
RupinderjitKaur9
 
JavaScript JQUERY AJAX
Makarand Bhatambarekar
 
Ajax presentation
Bharat_Kumawat
 
Angular js
Knoldus Inc.
 
Express js
Manav Prasad
 
Dom(document object model)
Partnered Health
 
Nodejs buffers
monikadeshmane
 
Java collections
Hamid Ghorbani
 
Css advanced – session 4
Dr. Ramkumar Lakshminarayanan
 

Viewers also liked (6)

PDF
Javascript cheat-sheet-v1
hccit
 
PDF
Object Oriented Programming in JavaScript
zand3rs
 
PDF
Introduction to Object Oriented Javascript
nodeninjas
 
ODP
JavaScript global object, execution contexts & closures
HDR1001
 
PPTX
Grunt
Dohoon Kim
 
PPTX
Javascript Prototype Visualized
军 沈
 
Javascript cheat-sheet-v1
hccit
 
Object Oriented Programming in JavaScript
zand3rs
 
Introduction to Object Oriented Javascript
nodeninjas
 
JavaScript global object, execution contexts & closures
HDR1001
 
Grunt
Dohoon Kim
 
Javascript Prototype Visualized
军 沈
 
Ad

Similar to JavaScript Object Oriented Programming Cheat Sheet (20)

PPTX
JavaScript in Object-Oriented Way
Chamnap Chhorn
 
PDF
Design patterns in javascript
Ayush Sharma
 
PPTX
Javascript omg!
bwullems
 
PPTX
Javascriptinobject orientedway-090512225827-phpapp02
Sopheak Sem
 
ODP
Javascript
theacadian
 
PDF
Post-graduate course: Object technology: Prototype-based object-oriented prog...
Baltasar García Perez-Schofield
 
PPTX
Java scriptforjavadev part2a
Makarand Bhatambarekar
 
PPTX
Ajaxworld
deannalagason
 
PDF
New c sharp4_features_part_v
Nico Ludwig
 
PDF
Post-graduate course: Object technology: Implementation of object-oriented pr...
Baltasar García Perez-Schofield
 
PPTX
Prototype Object.pptx
Steins18
 
PPTX
Javascript Prototypal Inheritance - Big Picture
Manish Jangir
 
PDF
Extending Node.js using C++
Kenneth Geisshirt
 
PPTX
Lecture 4- Javascript Function presentation
GomathiUdai
 
PPTX
Js: master prototypes
Barak Drechsler
 
PPT
Chapter 1- Introduction.ppt
TigistTilahun1
 
PDF
Object Oriented Javascript
Thennarasan Shanmugam
 
PPTX
JavaScript OOPS Implimentation
Usman Mehmood
 
KEY
Exciting JavaScript - Part I
Eugene Lazutkin
 
PPTX
Object oriented javascript
Usman Mehmood
 
JavaScript in Object-Oriented Way
Chamnap Chhorn
 
Design patterns in javascript
Ayush Sharma
 
Javascript omg!
bwullems
 
Javascriptinobject orientedway-090512225827-phpapp02
Sopheak Sem
 
Javascript
theacadian
 
Post-graduate course: Object technology: Prototype-based object-oriented prog...
Baltasar García Perez-Schofield
 
Java scriptforjavadev part2a
Makarand Bhatambarekar
 
Ajaxworld
deannalagason
 
New c sharp4_features_part_v
Nico Ludwig
 
Post-graduate course: Object technology: Implementation of object-oriented pr...
Baltasar García Perez-Schofield
 
Prototype Object.pptx
Steins18
 
Javascript Prototypal Inheritance - Big Picture
Manish Jangir
 
Extending Node.js using C++
Kenneth Geisshirt
 
Lecture 4- Javascript Function presentation
GomathiUdai
 
Js: master prototypes
Barak Drechsler
 
Chapter 1- Introduction.ppt
TigistTilahun1
 
Object Oriented Javascript
Thennarasan Shanmugam
 
JavaScript OOPS Implimentation
Usman Mehmood
 
Exciting JavaScript - Part I
Eugene Lazutkin
 
Object oriented javascript
Usman Mehmood
 
Ad

Recently uploaded (20)

PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PPTX
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
PDF
Brief History of Internet - Early Days of Internet
sutharharshit158
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
PDF
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
PDF
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
PDF
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
PPTX
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
PDF
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
PPTX
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
PPTX
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
PDF
This slide provides an overview Technology
mineshkharadi333
 
PDF
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
PPTX
Coupa-Overview _Assumptions presentation
annapureddyn
 
PDF
Architecture of the Future (09152021)
EdwardMeyman
 
PDF
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PDF
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
Brief History of Internet - Early Days of Internet
sutharharshit158
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
This slide provides an overview Technology
mineshkharadi333
 
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
Coupa-Overview _Assumptions presentation
annapureddyn
 
Architecture of the Future (09152021)
EdwardMeyman
 
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 

JavaScript Object Oriented Programming Cheat Sheet

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); }