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
ā¢ Deļ¬ning 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 modiļ¬ed 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 modiļ¬ed 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 modiļ¬ed 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 modiļ¬ed 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 modiļ¬ed 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
ā¢ Beneļ¬t 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
ā¢ Beneļ¬t 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
ā¢ Beneļ¬t 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
ā¢ Beneļ¬t 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 ļ¬rst 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 ļ¬rst 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