JavaScript Inheritance

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

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

Understanding
Prototypes

•  Prototype
is
an
object
from
which
other

objects
inherit
properGes

•  Any
object
can
be
a
prototype

•  Every
object
has
internal
__proto__
property

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

__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__
..!

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

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);

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());

The
“new”
Operator

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

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);

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();

/** 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!

Example

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

say()

new
Person()

name
=
“Jack”

__proto__

Example

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

say()

new
Person()

name
=
“Jack”

__proto__

new
Student()

__proto__

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.

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)
// Since a does not hold a property, let's look it from Point.prototype
print (a.x);

Example

// here's the constructor:
function Point() {
this.x = 10;
this.y = 20;
}
Point.prototype.z = 40;
print (a.z);

//** POINT **
function Point() {
}
Point.prototype = { x: 10, y: 20 };
/** PIXEL **/
function Pixel() {
}
Pixel.prototype = new Point();
Pixel.prototype.color = "red";
var a = new Pixel();
var b = new Pixel();
a.color = "blue";
print (a.color);
print (b.color);

About
constructors

•  Prototype
properGes
of
FuncGons
have
a

constructor
property:

– var
dog
=
new
Dog();

– dog.constructor
==
Dog;
//
TRUE

•  This
will
break
when
doing
inheritance!

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

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

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();
}

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);

JavaScript Inheritance

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to JavaScript Inheritance (20)

More from Jussi Pohjolainen (20)

Recently uploaded (20)

JavaScript Inheritance