Object-Oriented JavaScript

Document Sample
Object-Oriented JavaScript Powered By Docstoc
					Object-Oriented JavaScript




       Learn More @ http://www.learnnowonline.com
          Copyright © by Application Developers Training Company
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
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
   • Has distinct role or responsibility


              Learn More @ http://www.learnnowonline.com
                 Copyright © by Application Developers Training Company
Agenda
• Introduction to Object-Oriented JavaScript
• Creating JavaScript Objects
• Custom Object Constructors




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
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
• individualCustomer and corporateCustomer
  will inherit from customer

            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
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
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
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
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
Agenda
• Introduction to Object-Oriented JavaScript
• Creating JavaScript Objects
• Custom Object Constructors




           Learn More @ http://www.learnnowonline.com
              Copyright © by Application Developers Training Company
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
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
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
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
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

				
DOCUMENT INFO
Description: 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.