Object Oriented
Programming in
JavaScript
Dr. Charles Severance
www.wa4e.com
ttp://www.wa4e.com/code/javascript-objects
ttp://www.wa4e.com/code/javascript-objects.zip
Definitions
• Class - a template - Dog
• Method or Message - A defined capability of a
class - bark()
• Attribute - A defined data item in a class - color
• Object or Instance - A particular instance of a
class - Lassie
Image CC-By 2.0: https://www.flickr.com/photos/dinnerseries/23570475099
Terminology: Class
Defines the abstract characteristics of a thing (object),
including the thing's characteristics (its attributes, fields,
or properties) and the thing’s behaviors (the things it can
do, or methods, operations, or features). One might say
that a class is a blueprint or factory that describes the
nature of something. For example, the class Dog would
consist of traits shared by all dogs, such as breed and fur
color (characteristics), and the ability to bark and sit
(behaviors).
http://en.wikipedia.org/wiki/Object-
oriented_programming
Terminology: Class
A pattern (exemplar) of a class. The
class of Dog defines all possible
dogs by listing the characteristics
and behaviors they can have; the
object Lassie is one particular dog,
with particular versions of the
characteristics. A Dog has fur;
Lassie has brown-and-white fur.
http://en.wikipedia.org/wiki/Object-
oriented_programming
Terminology: Instance
One can have an instance of a class or a particular object.
The instance is the actual object created at runtime. In
programmer jargon, the Lassie object is an instance of the
Dog class. The set of values of the attributes of a
particular object is called its state. The object consists of
state and the behavior that’s defined in the object’s class.
Object and Instance are often used
interchangeably.
http://en.wikipedia.org/wiki/Object-
oriented_programming
Terminology: Method
An object’s abilities. In language, methods are verbs.
Lassie, being a Dog, has the ability to bark. So bark() is
one of Lassie’s methods. She may have other methods as
well, for example sit() or eat() or walk() or save_timmy().
Within the program, using a method usually affects only
one particular object; all Dogs can bark, but you need only
oneMethod
particular dog toaredo
and Message theused
often barking
interchangeably.
http://en.wikipedia.org/wiki/Object-
oriented_programming
Objects in JavaScript
• The OO pattern in JavaScript is a little different.
• The function is indeed a store and reuse pattern.
• The function keyword returns a value which is the
function itself - it makes a function!
First-Class Functions
In computer science, a programming language is
said to have first-class functions if it treats
functions as first-class citizens. Specifically, this
means the language supports passing functions
as arguments to other functions, returning them
as the values from other functions, and assigning
them to variables or storing them in data
structures.
http://en.wikipedia.org/wiki/First-class_function
A Sample Class
This is the template
function PartyAnimal() {
for making
this.x = 0; PartyAnimal objects.
Each PartyAnimal
this.party = function () {
object has a bit of
this.x = this.x + 1;
console.log("So far "+this.x); data.
} Each PartyAnimal
} object has a bit of
code.
an = new PartyAnimal();
Create a PartyAnimal
an.party(); object
an.party();
an.party();
Tell the object to
run the party() js01.ht
code. m
function PartyAnimal() { an
this.x = 0;
this.party = function () {
x:
this.x = this.x + 1;
}
console.log("So far "+this.x);
party(
}
)
an = new PartyAnimal();
an.party();
an.party();
an.party(); js-
01.htm
Object Life Cycle
http://en.wikipedia.org/wiki/Constructor_(computer_science)
Object Life Cycle
• Objects are created, used, and discarded
• Constructors are implicit in JavaScript - natural
• A constructor in a class is a special block of
statements called when an object is created
• Destructors are not provided by JavaScript
http://en.wikipedia.org/wiki/
Constructor_(computer_science)
js03.ht
function PartyAnimal() { m
this.x = 0;
console.log("In the 'constructor'");
this.party = function () {
this.x = this.x + 1;
console.log("So far "+this.x);
}
}
an = new PartyAnimal();
an.party();
an.party();
an.party();
Many Instances
• We can create lots of objects - the class is the
template for the object.
• We can store each distinct object in its own variable.
• We call this having multiple instances of the same
class.
• Each instance has its own copy of the instance
variables.
Constructors can have
function PartyAnimal(nam) {
this.x = 0; additional parameters.
this.name = nam; These can be used to set
console.log("Built "+nam); up instance variables for
this.party = function () { the particular instance of
this.x = this.x + 1;
console.log(nam+"="+this.x); the class (i.e., for the
} particular object).
}
s = new PartyAnimal("Sally");
s.party();
j = new PartyAnimal("Jim");
j.party();
s.party();
js04.ht
m
s
function PartyAnimal(nam) { x:
this.x = 0;
this.name = nam; name:
console.log("Built "+nam);
this.party = function () {
this.x = this.x + 1; j
console.log(nam+"="+this.x); x:
}
} name:
s = new PartyAnimal("Sally");
s.party();
j = new PartyAnimal("Jim");
j.party();
s.party();
js04.ht
m
Definitions
• Class - a template - Dog
• Method or Message - A defined capability of a class
- bark()
• Object or Instance - A particular instance of a class
- Lassie
• Constructor - A method which is called when the
instance / object is created
Summary
• The key for this lecture is to understand how
to read OO documentation for JavaScript and
how to use objects.
• Building brand new complex objects is more
advanced.
• It is important to remember that JavaScript
uses objects as its “Associative Array”.
Acknowledgements / Contributions
These slides are Copyright 2010- Charles R. Severance Continue new Contributors and Translators here
(www.dr-chuck.com) as part of www.wa4e.com and made
available under a Creative Commons Attribution 4.0 License.
Please maintain this last slide in all copies of the document to
comply with the attribution requirements of the license. If you
make a change, feel free to add your name and organization
to the list of contributors on this page as you republish the
materials.
Initial Development: Charles Severance, University of
Michigan School of Information
Insert new Contributors and Translators here including names
and dates
Additional Source
Information
• “Snowman Cookie Cutter” by Didriks is licensed under CC BY
https://www.flickr.com/photos/dinnerseries/23570475099
• Photo from the television program Lassie. Lassie watches as Jeff (Tommy Rettig) works on his bike is
Public Domain
https://en.wikipedia.org/wiki/Lassie - /media/File:Lassie_and_Tommy_Rettig_1956.JPG
