1. INHERITANCE

2. About
Inheritance
• Code
reuse
is
important
– Inheritance
can
help
• JavaScript
does
not
have
classes,
so
no
special
keyword
for
extending
• In
JS
you
have
lot
of
ways
to
do
inheritance
– Classical
Pa@erns
– Modern
Pa@erns
or
Prototypal
Inheritance

3. Understanding
JS
Inheritance
• JS
is
not
class
based,
it’s
prototype-­‐based!
• Object
inherit
from
another
object
• JS
contains
syntax
and
features
that
make
it
seem
class
based

4. Understanding
Prototypes
• Prototype
is
an
object
from
which
other
objects
inherit
properGes
• Any
object
can
be
a
prototype
• Every
object
has
internal
__proto__
property

5. Example
var parent = {
method1: function() { print("A"); }
}
var child = {
__proto__: parent,
method2: function() { print("B"); }
}
// If method1 is not found in child, look it from
// prototype!
child.method1(); // A
child.method2(); // B

6. __proto__
• __proto__
is
depricated
and
should
not
be
used
(but
it
works)
• To
get
the
prototype,
use
– Object.getPrototypeOf(object)
• It’s
read
only!
• How
to
set?
– Proposal:
Object.setPrototypeOf(obj,
prototype)
• Not
possible
to
change
the
__proto__
..!

7. FuncGon
Object
• When
wriGng
– function Animal() { }
• Lot
of
things
happens!
– Two
objects
created:
• 1)
Animal
• 2)
Animal.prototype
– Animal.prototype
has
a
property
constructor,
that
points
to
Animal

8. FuncGon
Object
// This is just a function. Dog is Function object!
function Dog (name) {
this.name = (name);
}
var spot = new Dog("Spot");
// true
print(spot instanceof Object);
// true
print(Dog instanceof Function);
// true
print(Dog instanceof Object);

9. FuncGon
Object
function sum1(a, b) {
return a + b;
}
// =>
var sum2 = new Function("a","b", "return a+b;");
print(sum1(2,2)); // 4
print(sum2(2,2)); // 4
print(sum2.length); // number of args = 2
print(sum2.toString());

10. The
“new”
Operator
function Person() {
this.name = “Jack”;
}
// Normal function call
Person();
// Object creation
var p = new Person();

12. Example
function Cat() { }
// c.__proto__ points to Cat.prototype!
var c = new Cat();
// true
print(c.__proto__ === Cat.prototype);
// c inherites Cat.prototype!
Cat.prototype.age = 12;
// 12!
print(c.age);

13. Example
function Cat() { this.name = "Jack"; }
var c = new Cat();
// true
print(c.__proto__ === Cat.prototype);
// c inherites Cat.prototype! Let's add stuff.
Cat.prototype.age = 12;
Cat.prototype.saySomething = function() {
print(this.name + ": hello!");
}
// 12!
print(c.age);
// "Jack: hello!"
c.saySomething();

14. /** PERSON **/
function Person() { }
var jack = new Person();
// jack inherites Person.prototype!
print(jack.__proto__ === Person.prototype);
Person.prototype.age = 18;
print(jack.age); // 18;
//** STUDENT **/
function Student() { }
// Let's now change the prototype of Student.
// Now Student.prototype points to Person.
var temp = new Person();
Student.prototype = temp;
var tina = new Student();
// tina inherites Student.prototype.. which is now temp!
print(tina.__proto__ === Student.prototype); // true
print(tina.__proto__ === temp); // true
// Now tina inherites Student.prototype, which is
// Person object, which inherites the Person.prototype..
print(tina.age); // 18!

15. Example
/** Person **/
function Person() {
this.name = "Jack";
}
// Adding functionality to the prototype..
Person.prototype.say = function() {
print(this.name + ”: hello!");
}
/** Student **/
function Student() { }
// Inheritance
Student.prototype = new Person();
/** Test **/
var student = new Student();
student.say(); // Jack: Hello
Person.prototype
say()
new
Person()
name
=
“Jack”
__proto__

16. Example
/** Person **/
function Person() {
this.name = "Jack";
}
// Adding functionality to the prototype.. What is this??
Person.prototype.say = function() {
print(this.name + ”: hello!");
}
/** Student **/
function Student() { }
// Inheritance
Student.prototype = new Person();
/** Test **/
var student = new Student();
student.say(); // Jack: Hello
Person.prototype
say()
new
Person()
name
=
“Jack”
__proto__
new
Student()
__proto__

17. FuncGon
Object
• Every
funcGon
in
JS
is
a
FuncGon
object
• When
– var spot = new Dog(“spot”);
• Then
spot’s
__proto__
points
to
Dog.prototype!
• If
a
property
cannot
be
found
in
an
object,
it
is
searched
for
in
that
object's
prototype.

18. Example
// here's the constructor:
function Point() { }
var a = new Point();
print (a.x); // undefined
// set up the prototype object to have some values:
Point.prototype = { x: 10, y: 20 };
// or you could do this:
Point.prototype.z = 30;
// make a new Point object
// (a object gets an implicit reference to Point.prototype object)
var a = new Point();
// Since a does not hold a property, let's look it from Point.prototype
print (a.x);

19. Example
// here's the constructor:
function Point() {
this.x = 10;
this.y = 20;
}
// set up the prototype object to have some values:
Point.prototype.z = 40;
// make a new Point object
// (a object gets an implicit reference to Point.prototype object)
var a = new Point();
// Since a does not hold a property, let's look it from Point.prototype
print (a.z);

20. //** POINT **
function Point() {
}
// set up the prototype object to have some values:
Point.prototype = { x: 10, y: 20 };
/** PIXEL **/
function Pixel() {
}
Pixel.prototype = new Point();
Pixel.prototype.color = "red";
// make a new Point object
// (a object gets an implicit reference to Point.prototype object)
var a = new Pixel();
var b = new Pixel();
a.color = "blue";
// Since a does not hold a property, let's look it from Point.prototype
print (a.color);
print (b.color);

21. About
constructors
• Prototype
properGes
of
FuncGons
have
a
constructor
property:
– var
dog
=
new
Dog();
– dog.constructor
==
Dog;
//
TRUE
• This
will
break
when
doing
inheritance!

22. /** Person **/
function Person() {
}
Person.prototype.name = "Jack";
/** Student **/
function Student() {
this.id = "12345";
}
// Inheritance
Student.prototype = new Person();
Student.prototype.id = "12345";
/** Test **/
var student = new Student();
student.age = 22;
print(student.age)
print(student.name);
print(student.id);
var person = new Person();
print(person.constructor === Person); // TRUE
var student = new Student();
print(student.constructor === Student); // FALSE

23. /** Person **/
function Person() {
}
Person.prototype.name = "Jack";
/** Student **/
function Student() {
this.id = "12345";
}
// Inheritance
Student.prototype = new Person();
Student.prototype.id = "12345";
// FIX
Student.prototype.constructor = Student;
/** Test **/
var student = new Student();
student.age = 22;
print(student.age)
print(student.name);
print(student.id);
var person = new Person();
print(person.constructor === Person); // TRUE
var student = new Student();
print(student.constructor === Student); // FALSE

24. Inheritance:
Prototypal
• In
EcmaScript
5
a
protypal
inheritance
pa@ern
is
part
of
the
language
– Object.create()
– var
child
=
Object.create(parent);
• The
create-­‐funcGon
function create(o) {
function F() {}
f.prototype = o;
return new F();
}

25. Example
function Point(x,y) {
this.x = x;
this.y = y;
}
var pixel = Object.create(new Point(12,0));
pixel.color = "red";
print(pixel.x);
print(pixel.color);