Object-Oriented Programming in Javascript Guy Wiener Ben-Gurion University
14/11/2010
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
1 / 21
Objects in Javascript
Outline
1
Objects in Javascript
2
Classless Object Systems
3
The Prototypes System
4
Example
5
Summary
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
2 / 21
Objects in Javascript
Object and Methods A Javascript object obj = { firstName: "John", lastName: "Doe", show: function() { alert(this.firstName + " " + this.lastName); } } obj.show();
Details this refers to the surrounding object
Objects are not associated with classes Guy Wiener (BGU)
OOP in Javascript
14/11/2010
3 / 21
Objects in Javascript
Functions are Contructors Creating persons Person = function(first, last) { this.firstName = first; this.lastName = last; this.show = function() { alert(this.firstName + " " + this.lastName); }; } john = new Person("John", "Doe"); john.show();
Details The new operator returns this from a function. Guy Wiener (BGU)
OOP in Javascript
14/11/2010
4 / 21
Classless Object Systems
Outline
1
Objects in Javascript
2
Classless Object Systems
3
The Prototypes System
4
Example
5
Summary
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
5 / 21
Classless Object Systems
Classless Objects Systems Classless (1-level) Objects Systems Object systems without classes Based on prototypes and clone operations Require very basic facilities
Implemented on top of Graphical engines (Lua) GUI scripting (Morphic) Cellular phones (Self variant) Browsers (Javascript)
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
6 / 21
Classless Object Systems
How to Implement a Classless Object System Required facilities Atomic data types: Numbers, string, etc. Functions as values A data holder (usually a hash table) Reference semantics (not mandatory)
Facilities to implement Clone (shallow/deep copy) Lookup operation Dot operator
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
7 / 21
Classless Object Systems
Classless Object System in Javascript Required facilities Atomic data types: Numbers, string, etc. Functions as values
"
"
A data holder { ... } Reference semantics
"
Implemented facilities Shallow copy using new Lookup operation obj[key] Dot operator obj.attr ⇒ obj[’attr’]
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
8 / 21
The Prototypes System
Outline
1
Objects in Javascript
2
Classless Object Systems
3
The Prototypes System
4
Example
5
Summary
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
9 / 21
The Prototypes System
Prototypes Creating persons, improved Person = function(first, last) { this.firstName = first; this.lastName = last; } Person.prototype.show = function() { alert(this.firstName + " " + this.lastName); }; john = new Person("John", "Doe"); john.show();
Details The content of the prototype is shallow-copied to instances. Guy Wiener (BGU)
OOP in Javascript
14/11/2010
10 / 21
The Prototypes System
Prototype-Based Object System
Class Prototype instance Clone the prototype Subclass Clone the prototype into a new prototype Subclass instance Clone the new prototype
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
11 / 21
The Prototypes System
Prototype-Based Object System — Example Object prototype id print
??? func1
clone
Instance of Book
Book prototype id print title author
??? func2 ??? ???
id print title author
clone
1 func2 "1984" "Orwell"
clone
Series prototype id print title author volumes Guy Wiener (BGU)
??? func3 ??? ??? ???
Instance of Series clone
id 2 print func3 title "Lord of the Rings" author "J.R.R Tolkien" volumes 3
OOP in Javascript
14/11/2010
12 / 21
The Prototypes System
Extending a Class — Example Driver = function(first, last, car) { Person.call(this, first, last); // invoke explicitly this.car = car; } Driver.prototype = new Person(); Driver.prototype.drive = function() { alert(this.car + " vrroooom!"); }; jane = new Driver("Jane", "Doe", "Chevy"); jane.show(); // Jane Doe jane.drive(); // Chevy vrrooom!
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
13 / 21
Example
Outline
1
Objects in Javascript
2
Classless Object Systems
3
The Prototypes System
4
Example
5
Summary
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
14 / 21
Example
New Objects
Creating an object function this.x this.y this.r } var c1 =
Circle(x, y, r) { = x; = y; = r; new Circle(3, 3, 1);
The constructor function is the class.
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
15 / 21
Example
Prototypes
Using the prototype attribute Circle.prototype.color = "black"; var c2 = new Circle(2, 3, 1); alert(c2.color); // black
Prototype attributes are shared by all instances.
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
16 / 21
Example
Methods Methods should be shared by all instances, so it is best to assign them as attributes to the prototype.
A class example Circle.prototype.getArea = function() { return (Math.PI * this.r * this.r); } Circle.prototype.move = function(w, h) { this.x += w; this.y += h; } c2.move(1, 1); // c2 moves to (3, 4)
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
17 / 21
Example
Inheritance To extend a class, clone the prototype by using a new object.
Sub-classing function Sphere(x, y, z, r) { Circle.call(this, x, y, r); this.z = z; } Sphere.prototype = new Circle();
The sub-class (Sphere) inherits all the method in the prototype of the super-class (Circle)
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
18 / 21
Example
Adding and Overriding Methods Add new methods to the sub-class prototype Override methods by replacing them in the new prototype
New methods in Sphere // New method Sphere.prototype.getVolume = function() { return (4/3) * Math.PI * Math.pow(this.r, 3); } // Overridden method Sphere.prototype.move = function(w, h, d) { // move the sphere on x, y and z }
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
19 / 21
Summary
Outline
1
Objects in Javascript
2
Classless Object Systems
3
The Prototypes System
4
Example
5
Summary
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
20 / 21
Summary
Summary
Javascript is an object-oriented programming language with classes and inheritance I I
Just without saying so explicitly And it’s also a functional programming language
Browser-based client-side scripting contributes to the application no less than the server-side I
Java’s dream comes true
There is no excuse for undesigned, unstructured, client-side code!
Guy Wiener (BGU)
OOP in Javascript
14/11/2010
21 / 21
