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

Constructors 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 constructors 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