The document provides an overview of object-oriented programming concepts in JavaScript, including: - JavaScript uses prototype-based inheritance rather than classes, with functions serving as constructors. - Objects inherit properties and methods from other objects via their prototype chain. - Custom objects are defined with constructor functions that set properties and methods. - Inheritance allows creating subclasses that inherit from superclasses. Methods can be overridden. - Encapsulation involves exposing an object's data through getter/setter methods rather than direct access. - Superclass members can be accessed in subclasses through calling the superclass constructor or methods. - Constructor arguments are passed to subclasses by applying the superclass constructor.

1. Object-­‐‑Oriented
Programming
in
JavaScript
Zander Magtipon
May 25, 2015

2. OOP in JavaScript
• Overview
• Prototype Chain
• Custom Objects
o The class
o The constructor
o The object (class instance)
o The property
o The method
o Static members
o Private and privileged members
• Inheritance
• Encapsulation
• Accessing Superclass Members
• Passing Constructor Arguments

3. Overview
• JavaScript is designed on a simple object-based
paradigm. An object is a collection of properties,
and a property is an association between a name
and a value. A property's value can be a function,
in which case the property is known as a method.
• One of the key differences of JavaScript from other
OOP languages is that it does not have classes.
Instead, JavaScript uses functions as classes.
• The class functionality is accomplished by object
prototypes where object inherits from another
object.

4. Overview
• JavaScript functions are objects, giving functions the
capacity to hold executable code and be passed
around like any other object.
• All objects in JavaScript are descended from Object
object.
• All objects inherit methods and properties from
Object.prototype.
• All object properties/methods are public.

5. Prototype Chain
• A prototype chain is a finite chain of objects which is used
to implement inheritance and shared properties.
• Every object in JavaScript has an internal link to another
object called prototype. That prototype object has a
prototype of its own, and so on until an object is reached
with null as its prototype.
• __proto__ is the actual object that is used in the lookup
chain to resolve methods, etc.
• prototype is the object that is used to build __proto__ when
you create an object.

6. Prototype Chain
var b = new Foo(20);
var c = new Foo(30);

7. Custom Objects
• Defining a class is as easy as defining a function.
function Person() {
}
The class

8. Custom Objects
• In JavaScript the function serves as the constructor
of the object.
• The constructor is used to set the object's properties
or to call methods to prepare the object for use.
function Person () {
console.log('instance created');
}
The constructor

9. Custom Objects
• An instance of an object can be created by
executing the constructor function using the new
operator.
var person1 = new Person();
var person2 = new Person();
The object (class instance)

10. Custom Objects
• Properties are set in the constructor of the class so
that they are created on each instance.
• The keyword this, which refers to the current object,
lets you work with properties from within the class.
The property (object attribute)

11. Custom Objects
function Person(firstName) {
this.firstName = firstName;
console.log('Person instantiated');
}
var person1 = new Person('Alice');
var person2 = new Person('Bob');
// Show the firstName properties of the objects
console.log('person1 is ' + person1.firstName); // logs "person1 is Alice"
console.log('person2 is ' + person2.firstName); // logs "person2 is Bob"
The property (object attribute)

12. Custom Objects
• Methods are functions that follow the same logic as
properties. Calling a method is similar to accessing a
property, but you add () at the end of the method
name, possibly with arguments.
• To define a method, assign a function to a named
property of the class's prototype property.
The method

13. Custom Objects
function Person(firstName) {
this.firstName = firstName;
}
Person.prototype.sayHello = function() {
console.log("Hello, I'm " + this.firstName);
};
var person1 = new Person("Alice");
var person2 = new Person("Bob");
// call the Person sayHello method.
person1.sayHello(); // logs "Hello, I'm Alice"
person2.sayHello(); // logs "Hello, I'm Bob"
The method

14. Custom Objects
• Static members (properties/methods) or class
members only exist on the class and doesn't exist on
child objects.
Static members

15. Custom Objects
function Person(firstName) {
this.firstName = firstName;
}
Person.prototype.sayName = function() {
console.log("instance:", this.firstName);
};
Person.firstName = "anybody";
Person.sayName = function() {
console.log("static:", this.firstName);
};
var person1 = new Person("Alice");
person1.sayName(); // logs "instance: Alice"
Person.sayName(); // logs "static: anybody"
Static members

16. Custom Objects
• Private members are made by the constructor. Local
vars and parameters of the constructor becomes
the private members.
• A privileged method is able to access the private
variables and methods, and is itself accessible to the
public methods and the outside.
Private and privileged members

17. Custom Objects
function Person(firstName) {
//-- private
var _firstName = firstName;
function _getMessage() {
return "Hello my name is " + _firstName;
}
//-- privileged
this.sayHello = function() {
console.log(_getMessage());
}
}
var person1 = new Person("Alice");
person1. sayHello(); // logs "Hello my name is Alice"
Private and privileged members

18. Inheritance
• Inheritance is a way to create a class as a specialized
version of another class.
• JavaScript only supports single inheritance.
• When trying to access a property of an object, the
property will not only be sought on the object but on the
prototype of the object, the prototype of the prototype,
and so on until either a property with a matching name is
found or the end of the prototype chain is reached.
• When an inherited function is executed, the value of this
points to the inheriting object, not to the prototype
object where the function is an own property.

19. Inheritance
function Photo(name) {
this.name = name || "photo";
}
Photo.prototype.upload = function() {
console.log("Photo.upload:", this.name);
};
ProfilePhoto.prototype = Object.create(Photo.prototype);
function ProfilePhoto(name) {
Photo.call(this, name || "profile-photo");
}
var photo = new Photo();
photo.upload(); // logs "Photo.upload: photo"
var profilePhoto = new ProfilePhoto();
profilePhoto.upload(); // logs "Photo.upload: profile-photo"

20. Inheritance
function Photo(name) {
this.name = name || "photo";
}
Photo.prototype.upload = function() {
console.log("Photo.upload:", this.name);
};
ProfilePhoto.prototype = Object.create(Photo.prototype);
function ProfilePhoto(name) {
Photo.call(this, name || "profile-photo");
}
//-- method override
ProfilePhoto.prototype.upload = function() {
console.log("ProfilePhoto.upload:", this.name);
};
var photo = new Photo();
photo.upload(); // logs "Photo.upload: photo"
var profilePhoto = new ProfilePhoto();
profilePhoto.upload(); // logs "ProfilePhoto.upload: profile-photo"

21. Encapsulation
• Encapsulation includes the idea that the data of an
object should not be directly exposed.
• Instead, callers that want to achieve a given result
are coaxed into proper usage by invoking methods
(rather than accessing the data directly).

22. Encapsulation
function Photo(name) {
this.name = name || "photo";
}
Photo.prototype.setName = function(name) {
this.name = name;
};
Photo.prototype.getName = function() {
return this.name;
};
var photo = new Photo();
photo.setName("picture"); // sets photo name to "picture"
photo.getName(); // returns "picture"

23. Encapsulation
function Photo(name) {
var _name = name || "photo";
Object.defineProperty(this, "name", {
get: function() {
return _name;
},
set: function(name) {
_name = name;
}
});
}
var photo = new Photo();
photo.name = "picture"; // sets photo name to "picture"
photo.name; // returns “picture”

24. Accessing Superclass
Members
• One of the big differences between Classical
(Object-Oriented) and Prototypal inheritance is that
the former has an elegant mechanism for referring
to the parent class (usually using the super keyword).
It's often used in constructors to initialize the parent
class with the supplied input parameters. Another
common usage is to extend parent functionality in
the child class.

25. Accessing Superclass
Members
function Photo(name) {
var _name = name || "photo";
Object.defineProperty(this, "name", {
get: function() {
return _name;
}
});
}
Photo.prototype.upload = function() {
console.log("Photo.upload:", this.name);
};

26. Accessing Superclass
Members
ProfilePhoto.prototype = Object.create(Photo.prototype);
function ProfilePhoto(name) {
Photo.call(this, name || "profile-photo");
}
//-- method override
ProfilePhoto.prototype.upload = function() {
Photo.prototype.upload.call(this);
console.log(”ProfilePhoto.upload:", this.name);
};
var profilePhoto = new ProfilePhoto();
profilePhoto.upload();
// logs "Photo.upload: profile-photo"
// logs "ProfilePhoto.upload: profile-photo"

27. Accessing Superclass
Members
ProfilePhoto.prototype = Object.create(Photo.prototype);
function ProfilePhoto(name) {
Object.defineProperty(this, "parent", {
get: function() {
return Photo;
}
});
this.parent.call(this, name || "profile-photo");
}
//-- method override
ProfilePhoto.prototype.upload = function() {
this.parent.prototype.upload.call(this);
console.log(”ProfilePhoto.upload:", this.name);
};
var profilePhoto = new ProfilePhoto();
profilePhoto.upload();
// logs "Photo.upload: profile-photo"
// logs "ProfilePhoto.upload: profile-photo"

28. Passing Constructor
Arguments
function Photo(name) {
var _name = name || "photo";
Object.defineProperty(this, "name", {
get: function() {
return _name;
}
});
}
ProfilePhoto.prototype = Object.create(Photo.prototype);
function ProfilePhoto() {
Photo.apply(this, Array.prototype.slice.call(arguments));
}
var profilePhoto = new ProfilePhoto("avatar"); // sets the name to "avatar"

29. Questions?

30. Thank You!