SlideShare une entreprise Scribd logo
1  sur  77
Télécharger pour lire hors ligne
JavaScript
                           The prototype Property




Thursday, November 1, 12
Brief


                           What’s OOP?

                           JavaScript OOP

                           Prototype

                           Inheritance




Thursday, November 1, 12
What’s OOP?
                              Introducir a OOP
                           Presentar el vocabulario




Thursday, November 1, 12
Object Oriented Programming




Thursday, November 1, 12
Programming paradigm




Thursday, November 1, 12
Data abstraction

                           Encapsulation

                           Messaging

                           Modularity

                           Polymorphism

                           Inheritance


Thursday, November 1, 12
Use object based on the real
                        world




Thursday, November 1, 12
Class vs Object




Thursday, November 1, 12
Class

                           A Class defines Objects

                           Properties
                               An object characteristic, such as color


                           Methods
                               An object capability, such as walk




Thursday, November 1, 12
Objects

                           A instance of a Class

                           Share properties and behavior

                           Unique




Thursday, November 1, 12
Class




Thursday, November 1, 12
Class




                Object1

Thursday, November 1, 12
Class




                Object1    Object2

Thursday, November 1, 12
Class




                Object1    Object2   Object3

Thursday, November 1, 12
Exercise




Thursday, November 1, 12
JavaScript OOP
                            Aplicar JavaScript OOP




Thursday, November 1, 12
JavaScript is a
                           prototypal language



Thursday, November 1, 12
Prototype-based
                                 programming
                           Class free

                           Classes are not present

                           Not Object Oriented

                           Everything is public

                           Objects inherits from another objects



Thursday, November 1, 12
Objects in JavaScript




Thursday, November 1, 12
Everything is an object




Thursday, November 1, 12
Arrays




                    Everything is an object




Thursday, November 1, 12
Arrays
                                    Dates


                    Everything is an object




Thursday, November 1, 12
Arrays
                                    Dates


                    Everything is an object

                                    Objects



Thursday, November 1, 12
Arrays
                                          Dates


                    Everything is an object

                                          Objects

                                Strings
Thursday, November 1, 12
Arrays
                                          Dates


                    Everything is an object

               Numbers                    Objects

                                Strings
Thursday, November 1, 12
They have methods and
                          properties



Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Custom Objects




Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Not reuse




Thursday, November 1, 12
Not reuse




                            Unique




Thursday, November 1, 12
Not reuse

                           Singleton
                            Pattern

                                 Unique




Thursday, November 1, 12
Exercise




Thursday, November 1, 12
Constructors




Thursday, November 1, 12
Constructor
                           Functions

                           Classes

                           Create diferents instances ==> Objects

                           Use new operator

                           Accepts parameters

                           Returns an instance ==> Object


Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Constructor
                           Has properties and methods

                             length

                             constructor

                             apply()

                             call()

                             prototype


Thursday, November 1, 12
Thursday, November 1, 12
Prototype




Thursday, November 1, 12
Prototype

                           A property

                           Defines properties and methods to all
                           instances

                           Works with new operator

                           Stored in the memory once

                           Contain an Object

                             initial value === empty Object === {}
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Inheritance




Thursday, November 1, 12
Inheritance
                           A new “class” is created from another “class”

                           Extends functionality

                           Defines new attributes and methods

                           A way to reuse code

                           All Object inherit from Object.prototype

                           12+ ways to inherits in JS


Thursday, November 1, 12
Prototype Chaining
                                Pseudo-clasical




Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Thursday, November 1, 12
Inherited




Thursday, November 1, 12
Inherited




Thursday, November 1, 12
Own




Thursday, November 1, 12
The End




Thursday, November 1, 12

Contenu connexe

En vedette

2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritancepedro.carvalho
 
Javascript foundations: Inheritance
Javascript foundations: InheritanceJavascript foundations: Inheritance
Javascript foundations: InheritanceJohn Hunter
 
Basic inheritance in JavaScript
Basic inheritance in JavaScriptBasic inheritance in JavaScript
Basic inheritance in JavaScriptBrian Moschel
 
03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQueryDanae Aguilar Guzmán
 
JavaScript and Internet Controlled Hardware Prototyping
JavaScript and Internet Controlled Hardware PrototypingJavaScript and Internet Controlled Hardware Prototyping
JavaScript and Internet Controlled Hardware PrototypingJonathan LeBlanc
 
libGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferenceslibGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferencesJussi Pohjolainen
 
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)raja kvk
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized军 沈
 
Modern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design PatternsModern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design PatternsVolodymyr Voytyshyn
 

En vedette (13)

JavaScript Inheritence
JavaScript  InheritenceJavaScript  Inheritence
JavaScript Inheritence
 
New ES6 Hotness
New ES6 HotnessNew ES6 Hotness
New ES6 Hotness
 
2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance
 
Javascript foundations: Inheritance
Javascript foundations: InheritanceJavascript foundations: Inheritance
Javascript foundations: Inheritance
 
JavaScript Inheritance
JavaScript InheritanceJavaScript Inheritance
JavaScript Inheritance
 
Basic inheritance in JavaScript
Basic inheritance in JavaScriptBasic inheritance in JavaScript
Basic inheritance in JavaScript
 
03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery
 
JavaScript and Internet Controlled Hardware Prototyping
JavaScript and Internet Controlled Hardware PrototypingJavaScript and Internet Controlled Hardware Prototyping
JavaScript and Internet Controlled Hardware Prototyping
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
libGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferenceslibGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and Preferences
 
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)
Advanced Object Oriented JavaScript (prototype, closure, scope, design patterns)
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized
 
Modern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design PatternsModern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design Patterns
 

Plus de Guillermo Paz

ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]Guillermo Paz
 
Decoupling your JavaScript
Decoupling your JavaScriptDecoupling your JavaScript
Decoupling your JavaScriptGuillermo Paz
 
Estándares Web con Chico UI
Estándares Web con Chico UIEstándares Web con Chico UI
Estándares Web con Chico UIGuillermo Paz
 
Chico UI - Retreat 2011
Chico UI - Retreat 2011Chico UI - Retreat 2011
Chico UI - Retreat 2011Guillermo Paz
 
Weat - Presentación
Weat - PresentaciónWeat - Presentación
Weat - PresentaciónGuillermo Paz
 

Plus de Guillermo Paz (7)

User First
User FirstUser First
User First
 
ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]
 
Decoupling your JavaScript
Decoupling your JavaScriptDecoupling your JavaScript
Decoupling your JavaScript
 
HTML5: Introduction
HTML5: IntroductionHTML5: Introduction
HTML5: Introduction
 
Estándares Web con Chico UI
Estándares Web con Chico UIEstándares Web con Chico UI
Estándares Web con Chico UI
 
Chico UI - Retreat 2011
Chico UI - Retreat 2011Chico UI - Retreat 2011
Chico UI - Retreat 2011
 
Weat - Presentación
Weat - PresentaciónWeat - Presentación
Weat - Presentación
 

Dernier

18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppCeline George
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionSafetyChain Software
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3JemimahLaneBuaron
 
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...RKavithamani
 

Dernier (20)

18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 

JavaScript: The prototype Property