Object Oriented Programming in JavaScript
Dr. Charles Severance
www.wa4e.com
http://www.wa4e.com/code/javascript-objects
http://www.wa4e.com/code/javascript-objects.zip
Definitions
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
http://en.wikipedia.org/wiki/Object-oriented_programming
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.
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 one particular dog to do the barking
Method and Message are often used interchangeably.
http://en.wikipedia.org/wiki/Object-oriented_programming
Objects in JavaScript
First-Class Functions
http://en.wikipedia.org/wiki/First-class_function
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.
A Sample Class
function PartyAnimal() {
this.x = 0;
this.party = function () {
this.x = this.x + 1;
console.log("So far "+this.x);
}
}
an = new PartyAnimal();
an.party();
an.party();
an.party();
This is the template for making PartyAnimal objects.
Each PartyAnimal object has a bit of data.
Each PartyAnimal object has a bit of code.
Create a PartyAnimal object
Tell the object to run the party() code.
js01.htm
an
x:
party()
function PartyAnimal() {
this.x = 0;
this.party = function () {
this.x = this.x + 1;
console.log("So far "+this.x);
}
}
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
http://en.wikipedia.org/wiki/Constructor_(computer_science)
js03.htm
function PartyAnimal() {
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
function PartyAnimal(nam) {
this.x = 0;
this.name = nam;
console.log("Built "+nam);
this.party = function () {
this.x = this.x + 1;
console.log(nam+"="+this.x);
}
}
s = new PartyAnimal("Sally");
s.party();
j = new PartyAnimal("Jim");
j.party();
s.party();
Constructors can have additional parameters. These can be used to set up instance variables for the particular instance of the class (i.e., for the particular object).
js04.htm
s
x:
name:
j
x:
name:
function PartyAnimal(nam) {
this.x = 0;
this.name = nam;
console.log("Built "+nam);
this.party = function () {
this.x = this.x + 1;
console.log(nam+"="+this.x);
}
}
s = new PartyAnimal("Sally");
s.party();
j = new PartyAnimal("Jim");
j.party();
s.party();
js04.htm
Definitions
Summary
Acknowledgements / Contributions
These slides are Copyright 2010- Charles R. Severance (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
Continue new Contributors and Translators here
Additional Source Information