Object-Oriented JavaScript

Object-Oriented
JavaScript

Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

Objectives


Objectives
• Learn about the various ways to create
new objects with JavaScript


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


Introduction to
Object-Oriented JavaScript


Introduction to
• Possible to build sophisticated
frameworks


Introduction to
frameworks
• jQuery for general Web development


Introduction to
frameworks
• OOP uses abstraction to create models
of real objects


Introduction to
frameworks
of real objects
• Store own data and state


Introduction to
frameworks
of real objects
• Receive messages


Introduction to
frameworks
of real objects
• Receive messages
• Interact with other objects


Agenda


Agenda
• Introduction to Object-Oriented
JavaScript


Agenda
JavaScript
• Creating JavaScript Objects


Agenda
JavaScript
• Creating JavaScript Objects
• Custom Object Constructors


Creating JavaScript Objects


• Number of ways to create custom
objects


objects
• Customer object


objects
• Customer object
• Properties to record data like ID, name,
location


objects
• Customer object
location
• Some direct properties, others getter/setters


objects
• Customer object
location
• Override Object.toString


objects
• Customer object
location
• Override Object.toString
• Method to record sales


Using the Object Constructor


• Use Object constructor with new
keyword


keyword
• Creates a new object that inherits from
Object


keyword
Object
• No arguments: new object


keyword
Object
• No arguments: new object
• Primitive type argument: create new
Number, Boolean, or String object


Using an Object Literal


• Notable differences from Object
constructor technique:


• Single statement


var customer = { };


var customer = { };
• Adding properties


var customer = { };
• Adding properties
• Deﬁning getters and setters


Creating an Object Hierarchy
with Prototypes


with Prototypes
• Can use customer as a prototype for
other objects


with Prototypes
other objects
• New objects inherit properties of the base
object


with Prototypes
other objects
object
• Called the prototype of the new objects


with Prototypes
other objects
object
• Called the prototype of the new objects
• Set of objects with same prototype is a
class


Object Identity


Object Identity
• Can use the isPrototypeOf method


Object Identity
• Can use the isPrototypeOf method
• See whether one object has another as its
prototype


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 objects created with the constructor
share prototypes
• So all are members of the same class


Creating a New Constructor
Prototype Object


Prototype Object
• Sample modiﬁed constructor’s default
prototype object


Prototype Object
prototype object
• Alternatively, can create a whole new
object


Prototype Object
prototype object
object
• Slightly cleaner code


Prototype Object
prototype object
object
• Implement as single statement


Prototype Object
prototype object
object
• Implement as single statement
• Cleaner syntax


Dynamically Changing the Prototype
of a Class


of a Class
• Beneﬁt of using a prototype is you can
dynamically change it


of a Class
• Automatically changes all objects in the
class


of a Class
class
• Object inherits from prototype even when
prototype subsequently changes


of a Class
class
• Object inherits from prototype even when
prototype subsequently changes
• Can even modify prototypes of built-in
objects


Object Identity with
Constructors


Constructors
• instanceof operator


Constructors
• Determine whether an object is an instance
created by a constructor


Constructors
• Operands


Constructors
• Operands
• Object to test


Constructors
• Operands
• Object to test
• Constructor object to test against


Constructors
• Operands
• Object to test
• Pass anything as ﬁrst operand, but second
must be a function object


Constructors
• Operands
• Object to test
• 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!


Learn More!
• This is an excerpt from a larger course. Visit
www.learnnowonline.com for the full details!


Object-Oriented JavaScript

Recommended

More Related Content

Similar to Object-Oriented JavaScript (20)

More from LearnNowOnline (8)

Recently uploaded (20)

Object-Oriented JavaScript

Editor's Notes