Classes and ‘this’
Learning Javascript foundations
John Hunter
2 June 2009
1

object properties
Unlike scope, properties assigned to an object do not have
lexical context. They belong to the object they are assigned
to.
However, they can be assigned to more than one object
...and they can be assigned very late.
2

this
radio1 radio1.getName();
getName
radio2 radio2.getName();
this
Functions are data - they can be assigned as properties of
multiple objects (i.e. multiple references).
When the function is executed the 'this' property is
assigned the object from which it was called.
3

function getName () {
console.log(this.name); Function returns the name
} property of this.
window.name = 'Global';
getName(); getName called in the
window (global) context
>>> Global
var radio1 = {
name: 'radio one',
getName: getName
}; getName called in the
radio1 context
radio1.getName();
>>> radio one
4

var radio1 = {
name: 'radio one',
getName: getName
}; getName called in the
radio1.getName(); radio1 context
>>> radio one
var radio2 = {
name: 'radio two',
getName: getName
}; getName called in the
radio2 context
radio2.getName();
>>> radio two
5

Classes
In class based programming the class is a blueprint for objects.
First a class is defined and then instances of class can be
created.
Javascript does not directly support classes but can emulate
them.
6

Classes
A class definition generally consists of:
- a constructor
- methods
Many languages have an explicit class definition that defines
both. In Javascript these are defined separately using
functions.
7

Constructor function
A constructor function is a function that:
1. creates an instance object when called with new
2. assigns properties to the new object this
3. provides access to the prototype of the object
Note: Javascript cannot know which functions are going to be used as
constructors so all functions support these features.
8

// Constructor
function ClassName (propertyValue) {
this.instanceProperty = propertyValue;
}
// create an instance of the Class
var instance = new ClassName('my instance property');
console.log(instance. instanceProperty);
>>> my instance property
9

function getName () {
console.log(this.name);
}
// Constructor
function RadioClass (name) { constructor binds
getName function as an
this.name = name; instance property
this.getName = getName;
}
var radio2 = new RadioClass('radio two');
getName returns the
radio2.getName(); instance property
>>> radio two
10

// Constructor
function RadioClass (name) {
this.name = name;
this.getName = function () {
method is added as an
console.log(this.name); instance property
};
} ✖ duplicated with each
instance created
// create an instance of the Class
var radio3 = new RadioClass('radio three');
radio3.getName();
>>> radio three
11

// Constructor
function RadioClass (name) {
this.name = name;
}
RadioClass.prototype.getName = function () { method assigned to
console.log(this.name); prototype object is inherited
by all instances
};
// create an instance of the Class
new creates a new this
var radio3 = new RadioClass('radio three'); object which inherits from
radio3.getName(); the constructor prototype
>>> radio three
12

RadioClass.prototype RadioClass constructor
getName () this.name
new
2) look here 3) get this.name
radio1
radio2
radio3
name = 'radio one'
name = 'radio two'
name = 'radio three'
1) look here
radio3.getName();
13

Review
- this refers to the calling context of a function
- this is set at function invocation
- classes can be emulated using constructor functions
- calling new with a constructor returns an instance of this
- function.prototype provides an inheritance mechanism for
instances to share methods
14

Thanks
15