More Related Content Similar to Object-Oriented JavaScript (20) More from LearnNowOnline (8) Object-Oriented JavaScript2. Objectives
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
3. Objectives
• Learn about the various ways to create
new objects with JavaScript
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
4. Objectives
• Learn about the various ways to create
new objects with JavaScript
• Explore how you can create custom
constructors to instantiate multiple
objects of the same class
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
7. Introduction to
Object-Oriented JavaScript
• Possible to build sophisticated
frameworks
• jQuery for general Web development
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
8. Introduction to
Object-Oriented JavaScript
• Possible to build sophisticated
frameworks
• jQuery for general Web development
• OOP uses abstraction to create models
of real objects
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
9. Introduction to
Object-Oriented JavaScript
• Possible to build sophisticated
frameworks
• jQuery for general Web development
• OOP uses abstraction to create models
of real objects
• Store own data and state
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
10. Introduction to
Object-Oriented JavaScript
• Possible to build sophisticated
frameworks
• jQuery for general Web development
• OOP uses abstraction to create models
of real objects
• Store own data and state
• Receive messages
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
11. Introduction to
Object-Oriented JavaScript
• Possible to build sophisticated
frameworks
• jQuery for general Web development
• OOP uses abstraction to create models
of real objects
• Store own data and state
• Receive messages
• Interact with other objects
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
12. Agenda
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
13. Agenda
• Introduction to Object-Oriented
JavaScript
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
14. Agenda
• Introduction to Object-Oriented
JavaScript
• Creating JavaScript Objects
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
15. Agenda
• Introduction to Object-Oriented
JavaScript
• Creating JavaScript Objects
• Custom Object Constructors
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
17. Creating JavaScript Objects
• Number of ways to create custom
objects
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
18. Creating JavaScript Objects
• Number of ways to create custom
objects
• Customer object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
19. Creating JavaScript Objects
• Number of ways to create custom
objects
• Customer object
• Properties to record data like ID, name,
location
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
20. Creating JavaScript Objects
• Number of ways to create custom
objects
• Customer object
• Properties to record data like ID, name,
location
• Some direct properties, others getter/setters
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
21. Creating JavaScript Objects
• Number of ways to create custom
objects
• Customer object
• Properties to record data like ID, name,
location
• Some direct properties, others getter/setters
• Override Object.toString
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
22. Creating JavaScript Objects
• Number of ways to create custom
objects
• Customer object
• Properties to record data like ID, name,
location
• Some direct properties, others getter/setters
• Override Object.toString
• Method to record sales
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
23. Using the Object Constructor
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
24. Using the Object Constructor
• Use Object constructor with new
keyword
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
25. Using the Object Constructor
• Use Object constructor with new
keyword
• Creates a new object that inherits from
Object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
26. Using the Object Constructor
• Use Object constructor with new
keyword
• Creates a new object that inherits from
Object
• No arguments: new object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
27. Using the Object Constructor
• Use Object constructor with new
keyword
• Creates a new object that inherits from
Object
• No arguments: new object
• Primitive type argument: create new
Number, Boolean, or String object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
28. Using an Object Literal
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
29. Using an Object Literal
• Notable differences from Object
constructor technique:
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
30. Using an Object Literal
• Notable differences from Object
constructor technique:
• Single statement
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
31. Using an Object Literal
• Notable differences from Object
constructor technique:
• Single statement
var customer = { };
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
32. Using an Object Literal
• Notable differences from Object
constructor technique:
• Single statement
var customer = { };
• Adding properties
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
33. Using an Object Literal
• Notable differences from Object
constructor technique:
• Single statement
var customer = { };
• Adding properties
• Defining getters and setters
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
34. Creating an Object Hierarchy
with Prototypes
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
35. Creating an Object Hierarchy
with Prototypes
• Can use customer as a prototype for
other objects
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
36. Creating an Object Hierarchy
with Prototypes
• Can use customer as a prototype for
other objects
• New objects inherit properties of the base
object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
37. Creating an Object Hierarchy
with Prototypes
• Can use customer as a prototype for
other objects
• New objects inherit properties of the base
object
• Called the prototype of the new objects
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
38. Creating an Object Hierarchy
with Prototypes
• Can use customer as a prototype for
other objects
• New objects inherit properties of the base
object
• Called the prototype of the new objects
• Set of objects with same prototype is a
class
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
39. Object Identity
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
40. Object Identity
• Can use the isPrototypeOf method
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
41. Object Identity
• Can use the isPrototypeOf method
• See whether one object has another as its
prototype
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
42. Agenda
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
43. Agenda
• Introduction to Object-Oriented
JavaScript
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
44. Agenda
• Introduction to Object-Oriented
JavaScript
• Creating JavaScript Objects
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
45. Agenda
• Introduction to Object-Oriented
JavaScript
• Creating JavaScript Objects
• Custom Object Constructors
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
47. Custom Object Constructors
• Constructor is a function that
initializes an object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
48. Custom Object Constructors
• Constructor is a function that
initializes an object
• Used with the new keyword
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
49. Custom Object Constructors
• Constructor is a function that
initializes an object
• Used with the new keyword
• This actually creates the object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
50. Custom Object Constructors
• Constructor is a function that
initializes an object
• Used with the new keyword
• This actually creates the object
• Constructor’s prototype object
becomes prototype of new object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
51. Custom Object Constructors
• Constructor is a function that
initializes an object
• Used with the new keyword
• This actually creates the object
• Constructor’s prototype object
becomes prototype of new object
• So all objects created with the constructor
share prototypes
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
52. Custom Object Constructors
• Constructor is a function that
initializes an object
• Used with the new keyword
• This actually creates the object
• Constructor’s prototype object
becomes prototype of new object
• So all objects created with the constructor
share prototypes
• So all are members of the same class
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
53. Creating a New Constructor
Prototype Object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
54. Creating a New Constructor
Prototype Object
• Sample modified constructor’s default
prototype object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
55. Creating a New Constructor
Prototype Object
• Sample modified constructor’s default
prototype object
• Alternatively, can create a whole new
object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
56. Creating a New Constructor
Prototype Object
• Sample modified constructor’s default
prototype object
• Alternatively, can create a whole new
object
• Slightly cleaner code
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
57. Creating a New Constructor
Prototype Object
• Sample modified constructor’s default
prototype object
• Alternatively, can create a whole new
object
• Slightly cleaner code
• Implement as single statement
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
58. Creating a New Constructor
Prototype Object
• Sample modified constructor’s default
prototype object
• Alternatively, can create a whole new
object
• Slightly cleaner code
• Implement as single statement
• Cleaner syntax
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
59. Dynamically Changing the Prototype
of a Class
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
60. Dynamically Changing the Prototype
of a Class
• Benefit of using a prototype is you can
dynamically change it
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
61. Dynamically Changing the Prototype
of a Class
• Benefit of using a prototype is you can
dynamically change it
• Automatically changes all objects in the
class
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
62. Dynamically Changing the Prototype
of a Class
• Benefit of using a prototype is you can
dynamically change it
• Automatically changes all objects in the
class
• Object inherits from prototype even when
prototype subsequently changes
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
63. Dynamically Changing the Prototype
of a Class
• Benefit of using a prototype is you can
dynamically change it
• Automatically changes all objects in the
class
• Object inherits from prototype even when
prototype subsequently changes
• Can even modify prototypes of built-in
objects
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
66. Object Identity with
Constructors
• instanceof operator
• Determine whether an object is an instance
created by a constructor
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
67. Object Identity with
Constructors
• instanceof operator
• Determine whether an object is an instance
created by a constructor
• Operands
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
68. Object Identity with
Constructors
• instanceof operator
• Determine whether an object is an instance
created by a constructor
• Operands
• Object to test
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
69. Object Identity with
Constructors
• instanceof operator
• Determine whether an object is an instance
created by a constructor
• Operands
• Object to test
• Constructor object to test against
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
70. Object Identity with
Constructors
• instanceof operator
• Determine whether an object is an instance
created by a constructor
• Operands
• Object to test
• Constructor object to test against
• Pass anything as first operand, but second
must be a function object
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
71. Object Identity with
Constructors
• instanceof operator
• Determine whether an object is an instance
created by a constructor
• Operands
• Object to test
• Constructor object to test against
• Pass anything as first operand, but second
must be a function object
• Reinforce the idea that constructors are
the public identity of a class of objects
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
72. Learn More!
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
73. Learn More!
• This is an excerpt from a larger course. Visit
www.learnnowonline.com for the full details!
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
Editor's Notes \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n \n \n \n \n \n DEMO – Creating an Object Constructor section\n DEMO – Creating an Object Constructor section\n DEMO – Creating an Object Constructor section\n DEMO – Creating an Object Constructor section\n DEMO – Creating an Object Constructor section\n DEMO – Creating an Object Constructor section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO – rest of section\n DEMO: rest of section\n