Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Object-Oriented JavaScript

723 views

Published on

Learn about the various ways to create new objects with JavaScript and explore how you can create custom constructors to instantiate multiple objects of the same class.

Published in: Technology
  • Writing a good research paper isn't easy and it's the fruit of hard work. For help you can check writing expert. Check out, please ⇒ www.WritePaper.info ⇐ I think they are the best
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Object-Oriented JavaScript

  1. 1. Object-OrientedJavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  2. 2. Objectives Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  3. 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. 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
  5. 5. Introduction toObject-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  6. 6. Introduction toObject-Oriented JavaScript• Possible to build sophisticated frameworks Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  7. 7. Introduction toObject-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. 8. Introduction toObject-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. 9. Introduction toObject-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. 10. Introduction toObject-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. 11. Introduction toObject-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. 12. Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  13. 13. Agenda• Introduction to Object-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  14. 14. Agenda• Introduction to Object-Oriented JavaScript• Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  15. 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
  16. 16. Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  17. 17. Creating JavaScript Objects• Number of ways to create custom objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  18. 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. 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. 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. 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. 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. 23. Using the Object Constructor Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  24. 24. Using the Object Constructor• Use Object constructor with new keyword Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  25. 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. 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. 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. 28. Using an Object Literal Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  29. 29. Using an Object Literal• Notable differences from Object constructor technique: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  30. 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. 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. 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. 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. 34. Creating an Object Hierarchywith Prototypes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  35. 35. Creating an Object Hierarchywith Prototypes• Can use customer as a prototype for other objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  36. 36. Creating an Object Hierarchywith 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. 37. Creating an Object Hierarchywith 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. 38. Creating an Object Hierarchywith 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. 39. Object Identity Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  40. 40. Object Identity• Can use the isPrototypeOf method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  41. 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. 42. Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  43. 43. Agenda• Introduction to Object-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  44. 44. Agenda• Introduction to Object-Oriented JavaScript• Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  45. 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
  46. 46. Custom Object Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  47. 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. 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. 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. 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. 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. 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. 53. Creating a New ConstructorPrototype Object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  54. 54. Creating a New ConstructorPrototype Object• Sample modified constructor’s default prototype object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  55. 55. Creating a New ConstructorPrototype 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. 56. Creating a New ConstructorPrototype 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. 57. Creating a New ConstructorPrototype 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. 58. Creating a New ConstructorPrototype 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. 59. Dynamically Changing the Prototypeof a Class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  60. 60. Dynamically Changing the Prototypeof 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. 61. Dynamically Changing the Prototypeof 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. 62. Dynamically Changing the Prototypeof 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. 63. Dynamically Changing the Prototypeof 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
  64. 64. Object Identity withConstructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  65. 65. Object Identity withConstructors • instanceof operator Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  66. 66. Object Identity withConstructors • 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. 67. Object Identity withConstructors • 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. 68. Object Identity withConstructors • 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. 69. Object Identity withConstructors • 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. 70. Object Identity withConstructors • 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. 71. Object Identity withConstructors • 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. 72. Learn More! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  73. 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

×