SlideShare ist ein Scribd-Unternehmen logo
1 von 74
Object-Oriented  JavaScript Stoyan Stefanov, Yahoo! Inc. Beijing, Dec 6 th , 2008
About the presenter ,[object Object],[object Object],[object Object],[object Object]
First off…  the Firebug console
Firebug console as a learning tool
Console features ,[object Object],[object Object],[object Object],[object Object]
Any page
Fiddle
Objects
JavaScript !== Java ,[object Object],[object Object]
Data types ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Objects ,[object Object],[object Object]
A simple object ,[object Object],[object Object],[object Object]
A simple object ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Methods ,[object Object]
Object literal notation ,[object Object],[object Object],[object Object],[object Object]
Arrays ,[object Object],[object Object],[object Object]
Arrays ,[object Object],[object Object],[object Object],[object Object],[object Object]
Array literal notation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JSON ,[object Object],[object Object],[object Object]
Constructors
Functions ,[object Object],[object Object],[object Object],[object Object],[object Object]
Function ,[object Object],[object Object],[object Object]
Function ,[object Object],[object Object],[object Object]
Function ,[object Object],[object Object],[object Object]
Functions are objects ,[object Object],[object Object],[object Object],[object Object]
Functions are objects ,[object Object],[object Object],[object Object],[object Object],[object Object]
Return values ,[object Object]
Return values ,[object Object]
Return values ,[object Object]
Constructors
Constructor functions ,[object Object],[object Object]
Constructor functions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Using the constructor ,[object Object],[object Object]
Constructors… ,[object Object]
A naming convention ,[object Object],[object Object]
constructor  property ,[object Object],[object Object],[object Object],[object Object]
constructor  property ,[object Object],[object Object],[object Object],[object Object],[object Object]
Built-in constructors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Use this Not that var o = {}; var o = new Object(); var a = []; var a = new Array(); var re = /[a-z]/gmi; var re = new RegExp( '[a-z]', 'gmi'); var fn = function(a, b){ return a + b; } var fn = new Function( 'a, b','return a+b');
Prototype
Prototype… ,[object Object]
Prototype ,[object Object],[object Object],[object Object]
Augmenting prototype ,[object Object],[object Object]
Overwriting the prototype ,[object Object],[object Object]
Use of the prototype ,[object Object]
Prototype usage ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Prototype usage ,[object Object],[object Object],[object Object],[object Object],[object Object]
Prototype usage ,[object Object],[object Object],[object Object]
Own properties vs. prototype’s ,[object Object],[object Object],[object Object],[object Object]
isPrototypeOf() ,[object Object],[object Object],[object Object],[object Object]
__proto__ ,[object Object],[object Object]
__proto__ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Prototype chain
It’s a live chain ,[object Object],[object Object],[object Object],[object Object],[object Object]
Inheritance
Parent constructor ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Child constructor ,[object Object],[object Object],[object Object],[object Object]
The inheritance ,[object Object],[object Object]
A child object ,[object Object],[object Object],[object Object],[object Object]
Inheritance by copying
Two objects ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
extend() ,[object Object],[object Object],[object Object],[object Object],[object Object]
Inheritance ,[object Object],[object Object]
Prototypal inheritance
Beget object ,[object Object],[object Object],[object Object],[object Object],[object Object]
Beget object ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Wrapping up…
Objects ,[object Object],[object Object],[object Object]
Functions ,[object Object],[object Object],[object Object],[object Object]
Prototype ,[object Object],[object Object],[object Object]
Constructor ,[object Object],[object Object]
Class ,[object Object]
Inheritance ,[object Object],[object Object],[object Object],[object Object]
Stoyan Stefanov, http://phpied.com [email_address]

Weitere ähnliche Inhalte

Was ist angesagt?

JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
David Padbury
 

Was ist angesagt? (20)

Java Script Best Practices
Java Script Best PracticesJava Script Best Practices
Java Script Best Practices
 
JavaScript Basics and Best Practices - CC FE & UX
JavaScript Basics and Best Practices - CC FE & UXJavaScript Basics and Best Practices - CC FE & UX
JavaScript Basics and Best Practices - CC FE & UX
 
JavaScript In Object Oriented Way
JavaScript In Object Oriented WayJavaScript In Object Oriented Way
JavaScript In Object Oriented Way
 
Advanced javascript
Advanced javascriptAdvanced javascript
Advanced javascript
 
JavaScript - From Birth To Closure
JavaScript - From Birth To ClosureJavaScript - From Birth To Closure
JavaScript - From Birth To Closure
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
 
JavaScript Basics
JavaScript BasicsJavaScript Basics
JavaScript Basics
 
Javascript basics for automation testing
Javascript  basics for automation testingJavascript  basics for automation testing
Javascript basics for automation testing
 
A Deeper look into Javascript Basics
A Deeper look into Javascript BasicsA Deeper look into Javascript Basics
A Deeper look into Javascript Basics
 
Powerful JavaScript Tips and Best Practices
Powerful JavaScript Tips and Best PracticesPowerful JavaScript Tips and Best Practices
Powerful JavaScript Tips and Best Practices
 
Prototype
PrototypePrototype
Prototype
 
Core concepts-javascript
Core concepts-javascriptCore concepts-javascript
Core concepts-javascript
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
Javascript
JavascriptJavascript
Javascript
 
JavaScript Patterns
JavaScript PatternsJavaScript Patterns
JavaScript Patterns
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
 
Ten useful JavaScript tips & best practices
Ten useful JavaScript tips & best practicesTen useful JavaScript tips & best practices
Ten useful JavaScript tips & best practices
 

Andere mochten auch

Object oriented javascript
Object oriented javascriptObject oriented javascript
Object oriented javascript
Garrison Locke
 
Turning to the client side
Turning to the client sideTurning to the client side
Turning to the client side
Lea Verou
 
The Wearable Machine
The Wearable MachineThe Wearable Machine
The Wearable Machine
Steven Casey
 
Making Beer Money from your Travel Blog
Making Beer Money from your Travel BlogMaking Beer Money from your Travel Blog
Making Beer Money from your Travel Blog
Heartwood Digital
 
طباعة التقرير - إختبر درجة إبداعك احمد الذهب
طباعة التقرير - إختبر درجة إبداعك احمد الذهبطباعة التقرير - إختبر درجة إبداعك احمد الذهب
طباعة التقرير - إختبر درجة إبداعك احمد الذهب
Ahmed Dahab
 
Mapa conceptual. GESTIÓN DE PROYECTO
Mapa conceptual. GESTIÓN DE PROYECTOMapa conceptual. GESTIÓN DE PROYECTO
Mapa conceptual. GESTIÓN DE PROYECTO
Marcela Leon
 

Andere mochten auch (18)

Javascript Best Practices
Javascript Best PracticesJavascript Best Practices
Javascript Best Practices
 
Object oriented javascript
Object oriented javascriptObject oriented javascript
Object oriented javascript
 
ООП в JavaScript
ООП в JavaScriptООП в JavaScript
ООП в JavaScript
 
Turning to the client side
Turning to the client sideTurning to the client side
Turning to the client side
 
JavaScript global object, execution contexts & closures
JavaScript global object, execution contexts & closuresJavaScript global object, execution contexts & closures
JavaScript global object, execution contexts & closures
 
Grunt
GruntGrunt
Grunt
 
Untitled 1
Untitled 1Untitled 1
Untitled 1
 
The Wearable Machine
The Wearable MachineThe Wearable Machine
The Wearable Machine
 
These companies are very good eficientando their innovation processes
These companies are very good eficientando their innovation processesThese companies are very good eficientando their innovation processes
These companies are very good eficientando their innovation processes
 
Making Beer Money from your Travel Blog
Making Beer Money from your Travel BlogMaking Beer Money from your Travel Blog
Making Beer Money from your Travel Blog
 
طباعة التقرير - إختبر درجة إبداعك احمد الذهب
طباعة التقرير - إختبر درجة إبداعك احمد الذهبطباعة التقرير - إختبر درجة إبداعك احمد الذهب
طباعة التقرير - إختبر درجة إبداعك احمد الذهب
 
Grandmas Recipes by Wendy Pang
Grandmas Recipes by Wendy PangGrandmas Recipes by Wendy Pang
Grandmas Recipes by Wendy Pang
 
Matriz de valoracion pid y aamtic
Matriz de valoracion pid y aamticMatriz de valoracion pid y aamtic
Matriz de valoracion pid y aamtic
 
Hakukoneet ja mittaristo #digisawotta
Hakukoneet ja mittaristo #digisawottaHakukoneet ja mittaristo #digisawotta
Hakukoneet ja mittaristo #digisawotta
 
Mapa conceptual. GESTIÓN DE PROYECTO
Mapa conceptual. GESTIÓN DE PROYECTOMapa conceptual. GESTIÓN DE PROYECTO
Mapa conceptual. GESTIÓN DE PROYECTO
 
Plan lector 4 todos somos iguales
Plan lector  4  todos somos igualesPlan lector  4  todos somos iguales
Plan lector 4 todos somos iguales
 
5 pen pc tecnology
5 pen pc tecnology5 pen pc tecnology
5 pen pc tecnology
 
How can communities shape economic development and create quality jobs
How can communities shape economic development and create quality jobsHow can communities shape economic development and create quality jobs
How can communities shape economic development and create quality jobs
 

Ähnlich wie Beginning Object-Oriented JavaScript

JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
Stoyan Stefanov
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02
Seri Moth
 

Ähnlich wie Beginning Object-Oriented JavaScript (20)

Javascript Primer
Javascript PrimerJavascript Primer
Javascript Primer
 
JavaScript Needn't Hurt!
JavaScript Needn't Hurt!JavaScript Needn't Hurt!
JavaScript Needn't Hurt!
 
jQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journey
 
JavaScript Bootcamp
JavaScript BootcampJavaScript Bootcamp
JavaScript Bootcamp
 
Web Optimization Summit: Coding for Performance
Web Optimization Summit: Coding for PerformanceWeb Optimization Summit: Coding for Performance
Web Optimization Summit: Coding for Performance
 
Presentation
PresentationPresentation
Presentation
 
OO in JavaScript
OO in JavaScriptOO in JavaScript
OO in JavaScript
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
Javascript Experiment
Javascript ExperimentJavascript Experiment
Javascript Experiment
 
JavaScript Inheritance
JavaScript InheritanceJavaScript Inheritance
JavaScript Inheritance
 
JSConf: All You Can Leet
JSConf: All You Can LeetJSConf: All You Can Leet
JSConf: All You Can Leet
 
Object-oriented Javascript
Object-oriented JavascriptObject-oriented Javascript
Object-oriented Javascript
 
Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2
 
Java Script Workshop
Java Script WorkshopJava Script Workshop
Java Script Workshop
 
Zend framework 05 - ajax, json and j query
Zend framework 05 - ajax, json and j queryZend framework 05 - ajax, json and j query
Zend framework 05 - ajax, json and j query
 
JavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM ManipulationJavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM Manipulation
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02
 
04 Advanced Javascript
04 Advanced Javascript04 Advanced Javascript
04 Advanced Javascript
 
Javascript Templating
Javascript TemplatingJavascript Templating
Javascript Templating
 
Sencha Touch Intro
Sencha Touch IntroSencha Touch Intro
Sencha Touch Intro
 

Mehr von Stoyan Stefanov

JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
Stoyan Stefanov
 

Mehr von Stoyan Stefanov (20)

Reactive JavaScript
Reactive JavaScriptReactive JavaScript
Reactive JavaScript
 
YSlow hacking
YSlow hackingYSlow hacking
YSlow hacking
 
Liking performance
Liking performanceLiking performance
Liking performance
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social Plugins
 
Social Button BFFs
Social Button BFFsSocial Button BFFs
Social Button BFFs
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъде
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
 
WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
Performance patterns
Performance patternsPerformance patterns
Performance patterns
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performance
 
3-in-1 YSlow
3-in-1 YSlow3-in-1 YSlow
3-in-1 YSlow
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scripting
 
The business of performance
The business of performanceThe business of performance
The business of performance
 

Kürzlich hochgeladen

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Kürzlich hochgeladen (20)

08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 

Beginning Object-Oriented JavaScript