SlideShare uma empresa Scribd logo
1 de 77
Baixar para ler offline
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

Mais conteúdo relacionado

Destaque

2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance
pedro.carvalho
 

Destaque (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
 

Mais de Guillermo Paz

Chico UI - Retreat 2011
Chico UI - Retreat 2011Chico UI - Retreat 2011
Chico UI - Retreat 2011
Guillermo Paz
 

Mais 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
 

Último

Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
fonyou31
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
SoniaTolstoy
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 

Último (20)

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
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.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
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
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
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
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
 

JavaScript: The prototype Property