SlideShare a Scribd company logo
Object-­‐‑Oriented  
Programming

  in

  JavaScript
Zander Magtipon
May 25, 2015
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
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.
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.
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.
Prototype  Chain
var b = new Foo(20);
var c = new Foo(30);
Custom  Objects
• Defining a class is as easy as defining a function.
function Person() {
}
The class
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
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)
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)
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)
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
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
Custom  Objects
• Static members (properties/methods) or class
members only exist on the class and doesn't exist on
child objects.
Static members
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
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
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
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.
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"
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"
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).
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"
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”
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.
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);
};
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"
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"
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"
Questions?
Thank  You!

More Related Content

PPT
Advanced JavaScript
Stoyan Stefanov
 
PPT
Advanced JavaScript
Fu Cheng
 
PPTX
Java script arrays
Frayosh Wadia
 
PPTX
Javascript functions
Alaref Abushaala
 
PPT
Javascript arrays
Hassan Dar
 
PPTX
Javascript Prototypal Inheritance - Big Picture
Manish Jangir
 
PPTX
TypeScript VS JavaScript.pptx
Albiorix Technology
 
PDF
Chapter 02: Classes Objects and Methods Java by Tushar B Kute
Tushar B Kute
 
Advanced JavaScript
Stoyan Stefanov
 
Advanced JavaScript
Fu Cheng
 
Java script arrays
Frayosh Wadia
 
Javascript functions
Alaref Abushaala
 
Javascript arrays
Hassan Dar
 
Javascript Prototypal Inheritance - Big Picture
Manish Jangir
 
TypeScript VS JavaScript.pptx
Albiorix Technology
 
Chapter 02: Classes Objects and Methods Java by Tushar B Kute
Tushar B Kute
 

What's hot (20)

PDF
02 JavaScript Syntax
Ynon Perek
 
PDF
Advanced javascript
Doeun KOCH
 
PDF
CSS3 Media Queries
Russ Weakley
 
PPTX
Java script
Shyam Khant
 
PPTX
Js: master prototypes
Barak Drechsler
 
PPTX
Lab #2: Introduction to Javascript
Walid Ashraf
 
PPTX
Object Oriented Programming In JavaScript
Forziatech
 
PDF
javascript objects
Vijay Kalyan
 
PPT
Java And Multithreading
Shraddha
 
PPT
Ajax presentation
engcs2008
 
PPT
Java script
vishal choudhary
 
PPSX
Javascript variables and datatypes
Varun C M
 
PPT
CSS
Sunil OS
 
PDF
JavaScript - Chapter 8 - Objects
WebStackAcademy
 
PPT
9. Input Output in java
Nilesh Dalvi
 
PPTX
State management in react applications (Statecharts)
Tomáš Drenčák
 
PPT
Javascript
guest03a6e6
 
PDF
3. Java Script
Jalpesh Vasa
 
PPT
Advanced Javascript
Adieu
 
PDF
Demystifying Prototypes
Dmitry Baranovskiy
 
02 JavaScript Syntax
Ynon Perek
 
Advanced javascript
Doeun KOCH
 
CSS3 Media Queries
Russ Weakley
 
Java script
Shyam Khant
 
Js: master prototypes
Barak Drechsler
 
Lab #2: Introduction to Javascript
Walid Ashraf
 
Object Oriented Programming In JavaScript
Forziatech
 
javascript objects
Vijay Kalyan
 
Java And Multithreading
Shraddha
 
Ajax presentation
engcs2008
 
Java script
vishal choudhary
 
Javascript variables and datatypes
Varun C M
 
CSS
Sunil OS
 
JavaScript - Chapter 8 - Objects
WebStackAcademy
 
9. Input Output in java
Nilesh Dalvi
 
State management in react applications (Statecharts)
Tomáš Drenčák
 
Javascript
guest03a6e6
 
3. Java Script
Jalpesh Vasa
 
Advanced Javascript
Adieu
 
Demystifying Prototypes
Dmitry Baranovskiy
 
Ad

Viewers also liked (20)

ODP
JavaScript Object Oriented Programming Cheat Sheet
HDR1001
 
PDF
Javascript cheat-sheet-v1
hccit
 
PDF
Prototype
Aditya Gaur
 
PPTX
Javascript Prototype Visualized
军 沈
 
PDF
Prototype-based Programming with JavaScript
lienhard
 
ODP
JavaScript global object, execution contexts & closures
HDR1001
 
PPTX
Grunt
Dohoon Kim
 
PDF
JavaScript Prototype and Module Pattern
Narendra Sisodiya
 
PDF
Introduction to Object Oriented Javascript
nodeninjas
 
PPT
Object Oriented JavaScript
Donald Sipe
 
PPTX
Workshop 1: Good practices in JavaScript
Visual Engineering
 
PDF
CSS Sanity with Sass: The Inverted Triangle Approach
Julie Kuehl
 
PPTX
JavaScript in Object-Oriented Way
Chamnap Chhorn
 
PPTX
SASS - CSS with Superpower
Kanchha kaji Prajapati
 
KEY
Advanced sass/compass
Nick Cooley
 
PPTX
View, Act, and React: Shaping Business Activity with Analytics, BigData Queri...
Srinath Perera
 
PDF
Smart CSS theming with Sass and Compass
Mihaela
 
PPTX
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
 
PDF
JavaScript OOPs
Johnson Chou
 
PPTX
Ipsec 2
Sourabh Badve
 
JavaScript Object Oriented Programming Cheat Sheet
HDR1001
 
Javascript cheat-sheet-v1
hccit
 
Prototype
Aditya Gaur
 
Javascript Prototype Visualized
军 沈
 
Prototype-based Programming with JavaScript
lienhard
 
JavaScript global object, execution contexts & closures
HDR1001
 
Grunt
Dohoon Kim
 
JavaScript Prototype and Module Pattern
Narendra Sisodiya
 
Introduction to Object Oriented Javascript
nodeninjas
 
Object Oriented JavaScript
Donald Sipe
 
Workshop 1: Good practices in JavaScript
Visual Engineering
 
CSS Sanity with Sass: The Inverted Triangle Approach
Julie Kuehl
 
JavaScript in Object-Oriented Way
Chamnap Chhorn
 
SASS - CSS with Superpower
Kanchha kaji Prajapati
 
Advanced sass/compass
Nick Cooley
 
View, Act, and React: Shaping Business Activity with Analytics, BigData Queri...
Srinath Perera
 
Smart CSS theming with Sass and Compass
Mihaela
 
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
 
JavaScript OOPs
Johnson Chou
 
Ipsec 2
Sourabh Badve
 
Ad

Similar to Object Oriented Programming in JavaScript (20)

PPTX
JavsScript OOP
LearningTech
 
PPTX
Object Oriented Javascript part2
Usman Mehmood
 
PPTX
JavaScript OOPS Implimentation
Usman Mehmood
 
PPTX
Object oriented javascript
Usman Mehmood
 
PPT
Javascript Object Oriented Programming
Bunlong Van
 
KEY
Javascript tid-bits
David Atchley
 
PPTX
pert.3&4.pptx
lukman682971
 
PPT
Beginning Object-Oriented JavaScript
Stoyan Stefanov
 
PPT
Advanced Javascript
Manikanda kumar
 
PPT
Advanced Javascript
relay12
 
PPTX
Understanding-Objects-in-Javascript.pptx
MariaTrinidadTumanga
 
PPTX
Framework prototype
DevMix
 
PPTX
Framework prototype
DevMix
 
PPTX
Framework prototype
DevMix
 
PPTX
Ajaxworld
deannalagason
 
PPTX
Object oriented javascript
Shah Jalal
 
PPT
JavaScript In Object Oriented Way
Borey Lim
 
PDF
JS Level Up: Prototypes
Vernon Kesner
 
PPTX
Object oriented programming in JavaScript
Aditya Majety
 
PPTX
ECMA5 approach to building JavaScript frameworks with Anzor Bashkhaz
FITC
 
JavsScript OOP
LearningTech
 
Object Oriented Javascript part2
Usman Mehmood
 
JavaScript OOPS Implimentation
Usman Mehmood
 
Object oriented javascript
Usman Mehmood
 
Javascript Object Oriented Programming
Bunlong Van
 
Javascript tid-bits
David Atchley
 
pert.3&4.pptx
lukman682971
 
Beginning Object-Oriented JavaScript
Stoyan Stefanov
 
Advanced Javascript
Manikanda kumar
 
Advanced Javascript
relay12
 
Understanding-Objects-in-Javascript.pptx
MariaTrinidadTumanga
 
Framework prototype
DevMix
 
Framework prototype
DevMix
 
Framework prototype
DevMix
 
Ajaxworld
deannalagason
 
Object oriented javascript
Shah Jalal
 
JavaScript In Object Oriented Way
Borey Lim
 
JS Level Up: Prototypes
Vernon Kesner
 
Object oriented programming in JavaScript
Aditya Majety
 
ECMA5 approach to building JavaScript frameworks with Anzor Bashkhaz
FITC
 

Recently uploaded (20)

PPTX
Explanation about Structures in C language.pptx
Veeral Rathod
 
PDF
Bandai Playdia The Book - David Glotz
BluePanther6
 
PPT
Activate_Methodology_Summary presentatio
annapureddyn
 
PDF
ShowUs: Pharo Stream Deck (ESUG 2025, Gdansk)
ESUG
 
PDF
Appium Automation Testing Tutorial PDF: Learn Mobile Testing in 7 Days
jamescantor38
 
PPTX
slidesgo-unlocking-the-code-the-dynamic-dance-of-variables-and-constants-2024...
kr2589474
 
PDF
Jenkins: An open-source automation server powering CI/CD Automation
SaikatBasu37
 
PDF
Build Multi-agent using Agent Development Kit
FadyIbrahim23
 
PDF
Key Features to Look for in Arizona App Development Services
Net-Craft.com
 
PDF
Why Use Open Source Reporting Tools for Business Intelligence.pdf
Varsha Nayak
 
PPTX
oapresentation.pptx
mehatdhavalrajubhai
 
PPTX
Why Use Open Source Reporting Tools for Business Intelligence.pptx
Varsha Nayak
 
PDF
Become an Agentblazer Champion Challenge
Dele Amefo
 
PDF
Wondershare Filmora 14.5.20.12999 Crack Full New Version 2025
gsgssg2211
 
PDF
QAware_Mario-Leander_Reimer_Architecting and Building a K8s-based AI Platform...
QAware GmbH
 
DOCX
Can You Build Dashboards Using Open Source Visualization Tool.docx
Varsha Nayak
 
PDF
On Software Engineers' Productivity - Beyond Misleading Metrics
Romén Rodríguez-Gil
 
PPTX
Presentation about variables and constant.pptx
safalsingh810
 
PPTX
Contractor Management Platform and Software Solution for Compliance
SHEQ Network Limited
 
PPTX
Odoo Integration Services by Candidroot Solutions
CandidRoot Solutions Private Limited
 
Explanation about Structures in C language.pptx
Veeral Rathod
 
Bandai Playdia The Book - David Glotz
BluePanther6
 
Activate_Methodology_Summary presentatio
annapureddyn
 
ShowUs: Pharo Stream Deck (ESUG 2025, Gdansk)
ESUG
 
Appium Automation Testing Tutorial PDF: Learn Mobile Testing in 7 Days
jamescantor38
 
slidesgo-unlocking-the-code-the-dynamic-dance-of-variables-and-constants-2024...
kr2589474
 
Jenkins: An open-source automation server powering CI/CD Automation
SaikatBasu37
 
Build Multi-agent using Agent Development Kit
FadyIbrahim23
 
Key Features to Look for in Arizona App Development Services
Net-Craft.com
 
Why Use Open Source Reporting Tools for Business Intelligence.pdf
Varsha Nayak
 
oapresentation.pptx
mehatdhavalrajubhai
 
Why Use Open Source Reporting Tools for Business Intelligence.pptx
Varsha Nayak
 
Become an Agentblazer Champion Challenge
Dele Amefo
 
Wondershare Filmora 14.5.20.12999 Crack Full New Version 2025
gsgssg2211
 
QAware_Mario-Leander_Reimer_Architecting and Building a K8s-based AI Platform...
QAware GmbH
 
Can You Build Dashboards Using Open Source Visualization Tool.docx
Varsha Nayak
 
On Software Engineers' Productivity - Beyond Misleading Metrics
Romén Rodríguez-Gil
 
Presentation about variables and constant.pptx
safalsingh810
 
Contractor Management Platform and Software Solution for Compliance
SHEQ Network Limited
 
Odoo Integration Services by Candidroot Solutions
CandidRoot Solutions Private Limited
 

Object Oriented Programming in JavaScript

  • 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"