SlideShare a Scribd company logo
7
Constructor prototype
●

Schematically
Most read
9
JavaScript inheritance example
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
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
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
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
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
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

More Related Content

What's hot (20)

A story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEMA story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEM
Frans Rosén
 
Laravel
LaravelLaravel
Laravel
tanveerkhan62
 
Webservices
WebservicesWebservices
Webservices
Gerard Sylvester
 
TypeScript
TypeScriptTypeScript
TypeScript
Saray Chak
 
REPORT ON ASP.NET
REPORT ON ASP.NETREPORT ON ASP.NET
REPORT ON ASP.NET
LOKESH
 
Full stack development
Full stack developmentFull stack development
Full stack development
Arnav Gupta
 
Php Tutorials for Beginners
Php Tutorials for BeginnersPhp Tutorials for Beginners
Php Tutorials for Beginners
Vineet Kumar Saini
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
Bethmi Gunasekara
 
Backend Programming
Backend ProgrammingBackend Programming
Backend Programming
Ruwandi Madhunamali
 
Php
PhpPhp
Php
Shagufta shaheen
 
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
NexThoughts Technologies
 
Rest api with Python
Rest api with PythonRest api with Python
Rest api with Python
Santosh Ghimire
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
Apaichon Punopas
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
Vikash Singh
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
Crampete
 
laravel.pptx
laravel.pptxlaravel.pptx
laravel.pptx
asif290119
 
20160331_Automate the boring stuff with python
20160331_Automate the boring stuff with python20160331_Automate the boring stuff with python
20160331_Automate the boring stuff with python
Sungman Jang
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 
React js
React jsReact js
React js
Jai Santhosh
 
Introduction to Server-Side Development with PHP.ppt
Introduction to Server-Side Development with PHP.pptIntroduction to Server-Side Development with PHP.ppt
Introduction to Server-Side Development with PHP.ppt
DestaBelayneh1
 
A story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEMA story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEM
Frans Rosén
 
REPORT ON ASP.NET
REPORT ON ASP.NETREPORT ON ASP.NET
REPORT ON ASP.NET
LOKESH
 
Full stack development
Full stack developmentFull stack development
Full stack development
Arnav Gupta
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
Vikash Singh
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
Crampete
 
20160331_Automate the boring stuff with python
20160331_Automate the boring stuff with python20160331_Automate the boring stuff with python
20160331_Automate the boring stuff with python
Sungman Jang
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 
Introduction to Server-Side Development with PHP.ppt
Introduction to Server-Side Development with PHP.pptIntroduction to Server-Side Development with PHP.ppt
Introduction to Server-Side Development with PHP.ppt
DestaBelayneh1
 

Viewers also liked (7)

Javascript cheat-sheet-v1
Javascript cheat-sheet-v1Javascript cheat-sheet-v1
Javascript cheat-sheet-v1
hccit
 
Object Oriented Programming in JavaScript
Object Oriented Programming in JavaScriptObject Oriented Programming in JavaScript
Object Oriented Programming in JavaScript
zand3rs
 
Introduction to Object Oriented Javascript
Introduction to Object Oriented JavascriptIntroduction to Object Oriented Javascript
Introduction to Object Oriented Javascript
nodeninjas
 
JavaScript global object, execution contexts & closures
JavaScript global object, execution contexts & closuresJavaScript global object, execution contexts & closures
JavaScript global object, execution contexts & closures
HDR1001
 
Grunt
GruntGrunt
Grunt
Dohoon Kim
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized
军 沈
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
 
Javascript cheat-sheet-v1
Javascript cheat-sheet-v1Javascript cheat-sheet-v1
Javascript cheat-sheet-v1
hccit
 
Object Oriented Programming in JavaScript
Object Oriented Programming in JavaScriptObject Oriented Programming in JavaScript
Object Oriented Programming in JavaScript
zand3rs
 
Introduction to Object Oriented Javascript
Introduction to Object Oriented JavascriptIntroduction to Object Oriented Javascript
Introduction to Object Oriented Javascript
nodeninjas
 
JavaScript global object, execution contexts & closures
JavaScript global object, execution contexts & closuresJavaScript global object, execution contexts & closures
JavaScript global object, execution contexts & closures
HDR1001
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized
军 沈
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
 
Ad

Similar to JavaScript Object Oriented Programming Cheat Sheet (20)

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

Recently uploaded (20)

Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementaryMurdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME FlowProviding an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdfWar_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdfCrypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptxFIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdfvertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FMEEnabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureNo-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy SurveyTrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdfHigh Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...
Matsushita Laboratory
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FMESupporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfcnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent IntegrationPyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementaryMurdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME FlowProviding an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdfWar_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdfCrypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptxFIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdfvertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FMEEnabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureNo-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy SurveyTrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdfHigh Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...
Matsushita Laboratory
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FMESupporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfcnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent IntegrationPyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 

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