SlideShare a Scribd company logo
the prototype property
prototypal inheritance
ux.mercadolibre.com
references
JavaScript Enlightenment, Cody Lindley
Principles of Object-Oriented Programming in JavaScript, Nicholas C. Zakas
Programming JavaScript Applications, Eric Elliott
Object-Oriented JavaScript, Stoyan Stefanov
Object Oriented JavaScript
JavaScript has one of the most flexible and expressive
object systems available in any popular programming language.
All types of functions, arrays, key/value pairs, and data structures
in general are really objects.
JavaScript handles classical inheritance
with less code than most class-based languages.
Understanding how the prototype works is
an important part of learning the JavaScript language.
table of contents
1. functions
2. constructor functions
3. this keyword
4. instances
5. prototype
6. own properties
7. prototype properties
functions
1. functions are objects
2. create scope
3. have in mind the most important methods of the functions objects
1. call()
2. apply()
4. the most important property of a function is the prototype property
constructor functions
1. it is the pattern that JavaScript uses for native constructor functions
2. the role is to create objects that share certain qualities and behaviours
3. think it as template or cookie cutter for producing pre-defined objects
4. begin with a capital letter to distinguish from regular functions
5. the benefit is they accept parameters, used when creating new objects
6. using the new operator, we want an instance of the constructor function
7. omitting the new operator may not behave as you could expect
this keyword
1. this keyword is an object that will be returned by the constructor
2. this object is automatically created by new keyword
3. we can leverage the object via this before the object is actually created
4. it will be an instance of the constructor’s type
5. without new, the value of this is equal to the global object
instances
1. the returned object from the constructor function is an instance of that
2. If there are 100 instances, there are 100 copies of the exact same thing
3. there’s no reason that each instance needs to have its own properties
4. it contains a reference to the constructor function used to create it
5. the instanceof operator
1. determine if an object is an instance of a constructor function
2. it will return true any time you ask if an object is an instance of Object
3. only works with complex objects and instances from constructor
functions
prototype or Flyweight Pattern
The intent of this pattern is to use sharing
to support a large number of objects
that have part of their internal state in common
where the other part of state can vary.
prototype
1. you should care about the prototype property for four reasons
1. it is the mechanism that JavaScript itself uses
2. user-defined constructor functions can use inheritance the same way
native objects do
3. someday you might have to edit or manage someone else’s code
4. you can create efficient object instances that all leverage the same
methods
prototype
1. every function has a prototype property used in creation of instances
2. makes it ideal for methods
3. all built-in objects have a prototype that you can change
4. it's important to note that the prototype is "live"
5. it allows to alter properties and methods of existing objects at any time
6. you cannot assign a value to a prototype property from an instance
7. isPrototypeOf() method is used as a prototype of another object
8. augmenting built-in objects is a very powerful technique
9. when overwrite the prototype reset the constructor property
prototypal inheritance
It was conceived to allow inheritance chains that mimic the inheritance
patterns found in traditional object-oriented programming languages.
Inheritance is simply one object being given access to another object’s
properties.
This is done by instantiating an instance of the object you want to inherit
from as the value for the prototype property of the function that creates the
object that is doing the inheriting.
Hernán Mammana, @hmammana
Thanks

More Related Content

What's hot

Javascript design patterns
Javascript design patternsJavascript design patterns
Javascript design patterns
GomathiNayagam S
 
Mistakes made with string object in java
Mistakes made with string object in javaMistakes made with string object in java
Mistakes made with string object in java
Tutors On Net
 
Paca oops slid
Paca oops slidPaca oops slid
Paca oops slidpacatarpit
 
Introduction to Design Patterns and Singleton
Introduction to Design Patterns and SingletonIntroduction to Design Patterns and Singleton
Introduction to Design Patterns and Singleton
Jonathan Simon
 
Design pattern (Abstract Factory & Singleton)
Design pattern (Abstract Factory & Singleton)Design pattern (Abstract Factory & Singleton)
Design pattern (Abstract Factory & Singleton)
paramisoft
 
Ruby Interview Questions
Ruby Interview QuestionsRuby Interview Questions
Ruby Interview Questions
Sumanth krishna
 
The Awesome Python Class Part-4
The Awesome Python Class Part-4The Awesome Python Class Part-4
The Awesome Python Class Part-4
Binay Kumar Ray
 
Objects
ObjectsObjects
Objects
Chang John
 
Javascript classes and scoping
Javascript classes and scopingJavascript classes and scoping
Javascript classes and scoping
Patrick Sheridan
 
The Awesome Python Class Part-5
The Awesome Python Class Part-5The Awesome Python Class Part-5
The Awesome Python Class Part-5
Binay Kumar Ray
 
Basic concept of Object Oriented Programming
Basic concept of Object Oriented Programming Basic concept of Object Oriented Programming
Basic concept of Object Oriented Programming
Prognoz Technologies Pvt. Ltd.
 
JavaScript Beyond jQuery
JavaScript Beyond jQueryJavaScript Beyond jQuery
JavaScript Beyond jQuery
Bobby Bryant
 
JavaScripts internals #1
JavaScripts internals #1JavaScripts internals #1
JavaScripts internals #1
Martin Pernica
 

What's hot (14)

Javascript design patterns
Javascript design patternsJavascript design patterns
Javascript design patterns
 
Mistakes made with string object in java
Mistakes made with string object in javaMistakes made with string object in java
Mistakes made with string object in java
 
Paca oops slid
Paca oops slidPaca oops slid
Paca oops slid
 
Introduction to Design Patterns and Singleton
Introduction to Design Patterns and SingletonIntroduction to Design Patterns and Singleton
Introduction to Design Patterns and Singleton
 
Uml
UmlUml
Uml
 
Design pattern (Abstract Factory & Singleton)
Design pattern (Abstract Factory & Singleton)Design pattern (Abstract Factory & Singleton)
Design pattern (Abstract Factory & Singleton)
 
Ruby Interview Questions
Ruby Interview QuestionsRuby Interview Questions
Ruby Interview Questions
 
The Awesome Python Class Part-4
The Awesome Python Class Part-4The Awesome Python Class Part-4
The Awesome Python Class Part-4
 
Objects
ObjectsObjects
Objects
 
Javascript classes and scoping
Javascript classes and scopingJavascript classes and scoping
Javascript classes and scoping
 
The Awesome Python Class Part-5
The Awesome Python Class Part-5The Awesome Python Class Part-5
The Awesome Python Class Part-5
 
Basic concept of Object Oriented Programming
Basic concept of Object Oriented Programming Basic concept of Object Oriented Programming
Basic concept of Object Oriented Programming
 
JavaScript Beyond jQuery
JavaScript Beyond jQueryJavaScript Beyond jQuery
JavaScript Beyond jQuery
 
JavaScripts internals #1
JavaScripts internals #1JavaScripts internals #1
JavaScripts internals #1
 

Viewers also liked

Ee2 chapter13 counters
Ee2 chapter13 countersEe2 chapter13 counters
Ee2 chapter13 countersCK Yang
 
Semantic markup - Creating Outline
Semantic markup -  Creating OutlineSemantic markup -  Creating Outline
Semantic markup - Creating Outline
Hernan Mammana
 
Getting Started with DOM
Getting Started with DOMGetting Started with DOM
Getting Started with DOM
Hernan Mammana
 
Tipowebgrafía
TipowebgrafíaTipowebgrafía
Tipowebgrafía
Hernan Mammana
 
The html5 outline
The html5 outlineThe html5 outline
The html5 outline
Hernan Mammana
 
Layout
LayoutLayout
Javascript coding-and-design-patterns
Javascript coding-and-design-patternsJavascript coding-and-design-patterns
Javascript coding-and-design-patterns
Hernan Mammana
 
Front End Good Practices
Front End Good PracticesFront End Good Practices
Front End Good PracticesHernan Mammana
 
Ee2 chapter14 ic_counters
Ee2 chapter14 ic_countersEe2 chapter14 ic_counters
Ee2 chapter14 ic_countersCK Yang
 
Live streaming
Live streamingLive streaming
Live streaming
James VanDyke
 
HTML5 - Just the basics
HTML5 - Just the basicsHTML5 - Just the basics
HTML5 - Just the basics
James VanDyke
 
JavaScript regular expression
JavaScript regular expressionJavaScript regular expression
JavaScript regular expression
Hernan Mammana
 
Web topic 1 internet
Web topic 1  internetWeb topic 1  internet
Web topic 1 internetCK Yang
 
Preparing images for the Web
Preparing images for the WebPreparing images for the Web
Preparing images for the Websdireland
 
Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class testCK Yang
 
Web topic 31 setup remote site
Web topic 31  setup remote siteWeb topic 31  setup remote site
Web topic 31 setup remote siteCK Yang
 
Web topic 33 publish websites
Web topic 33  publish websitesWeb topic 33  publish websites
Web topic 33 publish websitesCK Yang
 
Web topic 11 importance of html validation
Web topic 11  importance of html validationWeb topic 11  importance of html validation
Web topic 11 importance of html validationCK Yang
 
Regular Expressions 101
Regular Expressions 101Regular Expressions 101
Regular Expressions 101Raj Rajandran
 

Viewers also liked (19)

Ee2 chapter13 counters
Ee2 chapter13 countersEe2 chapter13 counters
Ee2 chapter13 counters
 
Semantic markup - Creating Outline
Semantic markup -  Creating OutlineSemantic markup -  Creating Outline
Semantic markup - Creating Outline
 
Getting Started with DOM
Getting Started with DOMGetting Started with DOM
Getting Started with DOM
 
Tipowebgrafía
TipowebgrafíaTipowebgrafía
Tipowebgrafía
 
The html5 outline
The html5 outlineThe html5 outline
The html5 outline
 
Layout
LayoutLayout
Layout
 
Javascript coding-and-design-patterns
Javascript coding-and-design-patternsJavascript coding-and-design-patterns
Javascript coding-and-design-patterns
 
Front End Good Practices
Front End Good PracticesFront End Good Practices
Front End Good Practices
 
Ee2 chapter14 ic_counters
Ee2 chapter14 ic_countersEe2 chapter14 ic_counters
Ee2 chapter14 ic_counters
 
Live streaming
Live streamingLive streaming
Live streaming
 
HTML5 - Just the basics
HTML5 - Just the basicsHTML5 - Just the basics
HTML5 - Just the basics
 
JavaScript regular expression
JavaScript regular expressionJavaScript regular expression
JavaScript regular expression
 
Web topic 1 internet
Web topic 1  internetWeb topic 1  internet
Web topic 1 internet
 
Preparing images for the Web
Preparing images for the WebPreparing images for the Web
Preparing images for the Web
 
Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class test
 
Web topic 31 setup remote site
Web topic 31  setup remote siteWeb topic 31  setup remote site
Web topic 31 setup remote site
 
Web topic 33 publish websites
Web topic 33  publish websitesWeb topic 33  publish websites
Web topic 33 publish websites
 
Web topic 11 importance of html validation
Web topic 11  importance of html validationWeb topic 11  importance of html validation
Web topic 11 importance of html validation
 
Regular Expressions 101
Regular Expressions 101Regular Expressions 101
Regular Expressions 101
 

Similar to The prototype property

Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
Fu Cheng
 
Javascript Object Patterns.pptx
Javascript Object Patterns.pptxJavascript Object Patterns.pptx
Javascript Object Patterns.pptx
Alaref Abushaala
 
Ajaxworld
AjaxworldAjaxworld
Ajaxworld
deannalagason
 
Understanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG JuneUnderstanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG June
Deepu S Nath
 
Design patterns in javascript
Design patterns in javascriptDesign patterns in javascript
Design patterns in javascript
Ayush Sharma
 
Javascript Common Design Patterns
Javascript Common Design PatternsJavascript Common Design Patterns
Javascript Common Design Patterns
Pham Huy Tung
 
Jump Start To Ooad And Design Patterns
Jump Start To Ooad And Design PatternsJump Start To Ooad And Design Patterns
Jump Start To Ooad And Design Patterns
Lalit Kale
 
Jump start to OOP, OOAD, and Design Pattern
Jump start to OOP, OOAD, and Design PatternJump start to OOP, OOAD, and Design Pattern
Jump start to OOP, OOAD, and Design Pattern
Nishith Shukla
 
Understanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptxUnderstanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptx
MariaTrinidadTumanga
 
Object Oriented Prograring(OOP) java
Object Oriented Prograring(OOP) javaObject Oriented Prograring(OOP) java
Object Oriented Prograring(OOP) java
GaddafiAdamu1
 
Javascript closures
Javascript closures Javascript closures
Javascript closures
VNG
 
Understanding Creational Design Patterns in Python
Understanding Creational Design Patterns in PythonUnderstanding Creational Design Patterns in Python
Understanding Creational Design Patterns in Python
StudySection
 
Understanding Creational Design Patterns in Python.docx
Understanding Creational Design Patterns in Python.docxUnderstanding Creational Design Patterns in Python.docx
Understanding Creational Design Patterns in Python.docx
StudySection
 
Object Oriented Programming Tutorial.pptx
Object Oriented Programming Tutorial.pptxObject Oriented Programming Tutorial.pptx
Object Oriented Programming Tutorial.pptx
ethiouniverse
 
Jquery Plugin
Jquery PluginJquery Plugin
Jquery PluginRavi Mone
 
Automate Design Patterns
Automate Design PatternsAutomate Design Patterns
Automate Design Patterns
Iulian Ilie-Némedi
 
Design_Patterns_Dr.CM.ppt
Design_Patterns_Dr.CM.pptDesign_Patterns_Dr.CM.ppt
Design_Patterns_Dr.CM.ppt
C Meenakshi Meyyappan
 

Similar to The prototype property (20)

Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Javascript Object Patterns.pptx
Javascript Object Patterns.pptxJavascript Object Patterns.pptx
Javascript Object Patterns.pptx
 
Ajaxworld
AjaxworldAjaxworld
Ajaxworld
 
Understanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG JuneUnderstanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG June
 
Design patterns in javascript
Design patterns in javascriptDesign patterns in javascript
Design patterns in javascript
 
Javascript Common Design Patterns
Javascript Common Design PatternsJavascript Common Design Patterns
Javascript Common Design Patterns
 
Jump Start To Ooad And Design Patterns
Jump Start To Ooad And Design PatternsJump Start To Ooad And Design Patterns
Jump Start To Ooad And Design Patterns
 
Jump start to OOP, OOAD, and Design Pattern
Jump start to OOP, OOAD, and Design PatternJump start to OOP, OOAD, and Design Pattern
Jump start to OOP, OOAD, and Design Pattern
 
Understanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptxUnderstanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptx
 
Object Oriented Prograring(OOP) java
Object Oriented Prograring(OOP) javaObject Oriented Prograring(OOP) java
Object Oriented Prograring(OOP) java
 
Js tips & tricks
Js tips & tricksJs tips & tricks
Js tips & tricks
 
Javascript closures
Javascript closures Javascript closures
Javascript closures
 
About Python
About PythonAbout Python
About Python
 
Understanding Creational Design Patterns in Python
Understanding Creational Design Patterns in PythonUnderstanding Creational Design Patterns in Python
Understanding Creational Design Patterns in Python
 
Understanding Creational Design Patterns in Python.docx
Understanding Creational Design Patterns in Python.docxUnderstanding Creational Design Patterns in Python.docx
Understanding Creational Design Patterns in Python.docx
 
Lecture 5.pptx
Lecture 5.pptxLecture 5.pptx
Lecture 5.pptx
 
Object Oriented Programming Tutorial.pptx
Object Oriented Programming Tutorial.pptxObject Oriented Programming Tutorial.pptx
Object Oriented Programming Tutorial.pptx
 
Jquery Plugin
Jquery PluginJquery Plugin
Jquery Plugin
 
Automate Design Patterns
Automate Design PatternsAutomate Design Patterns
Automate Design Patterns
 
Design_Patterns_Dr.CM.ppt
Design_Patterns_Dr.CM.pptDesign_Patterns_Dr.CM.ppt
Design_Patterns_Dr.CM.ppt
 

Recently uploaded

Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
CatarinaPereira64715
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
Abida Shariff
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 

Recently uploaded (20)

Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 

The prototype property

  • 1. the prototype property prototypal inheritance ux.mercadolibre.com
  • 2. references JavaScript Enlightenment, Cody Lindley Principles of Object-Oriented Programming in JavaScript, Nicholas C. Zakas Programming JavaScript Applications, Eric Elliott Object-Oriented JavaScript, Stoyan Stefanov
  • 3. Object Oriented JavaScript JavaScript has one of the most flexible and expressive object systems available in any popular programming language. All types of functions, arrays, key/value pairs, and data structures in general are really objects. JavaScript handles classical inheritance with less code than most class-based languages. Understanding how the prototype works is an important part of learning the JavaScript language.
  • 4.
  • 5. table of contents 1. functions 2. constructor functions 3. this keyword 4. instances 5. prototype 6. own properties 7. prototype properties
  • 6. functions 1. functions are objects 2. create scope 3. have in mind the most important methods of the functions objects 1. call() 2. apply() 4. the most important property of a function is the prototype property
  • 7. constructor functions 1. it is the pattern that JavaScript uses for native constructor functions 2. the role is to create objects that share certain qualities and behaviours 3. think it as template or cookie cutter for producing pre-defined objects 4. begin with a capital letter to distinguish from regular functions 5. the benefit is they accept parameters, used when creating new objects 6. using the new operator, we want an instance of the constructor function 7. omitting the new operator may not behave as you could expect
  • 8. this keyword 1. this keyword is an object that will be returned by the constructor 2. this object is automatically created by new keyword 3. we can leverage the object via this before the object is actually created 4. it will be an instance of the constructor’s type 5. without new, the value of this is equal to the global object
  • 9. instances 1. the returned object from the constructor function is an instance of that 2. If there are 100 instances, there are 100 copies of the exact same thing 3. there’s no reason that each instance needs to have its own properties 4. it contains a reference to the constructor function used to create it 5. the instanceof operator 1. determine if an object is an instance of a constructor function 2. it will return true any time you ask if an object is an instance of Object 3. only works with complex objects and instances from constructor functions
  • 10. prototype or Flyweight Pattern The intent of this pattern is to use sharing to support a large number of objects that have part of their internal state in common where the other part of state can vary.
  • 11. prototype 1. you should care about the prototype property for four reasons 1. it is the mechanism that JavaScript itself uses 2. user-defined constructor functions can use inheritance the same way native objects do 3. someday you might have to edit or manage someone else’s code 4. you can create efficient object instances that all leverage the same methods
  • 12. prototype 1. every function has a prototype property used in creation of instances 2. makes it ideal for methods 3. all built-in objects have a prototype that you can change 4. it's important to note that the prototype is "live" 5. it allows to alter properties and methods of existing objects at any time 6. you cannot assign a value to a prototype property from an instance 7. isPrototypeOf() method is used as a prototype of another object 8. augmenting built-in objects is a very powerful technique 9. when overwrite the prototype reset the constructor property
  • 13. prototypal inheritance It was conceived to allow inheritance chains that mimic the inheritance patterns found in traditional object-oriented programming languages. Inheritance is simply one object being given access to another object’s properties. This is done by instantiating an instance of the object you want to inherit from as the value for the prototype property of the function that creates the object that is doing the inheriting.