Classes and ‘this’Learning Javascript foundations

John Hunter2 June 2009

1

object propertiesUnlike 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

getName

radio1

radio2 this

this

When the function is executed the 'this' property is assigned the object from which it was called.

Functions are data - they can be assigned as properties of multiple objects (i.e. multiple references).

radio1.getName();

radio2.getName();

3

function getName () { console.log(this.name);}

window.name = 'Global';getName();

var radio1 = { name: 'radio one', getName: getName};radio1.getName();

Function returns the name property of this.

getName called in the window (global) context

getName called in the radio1 context

>>> Global

>>> radio one

4

var radio1 = { name: 'radio one', getName: getName};radio1.getName();

var radio2 = { name: 'radio two', getName: getName};radio2.getName();

getName called in the radio2 context

>>> radio one

>>> radio two

getName called in the radio1 context

5

ClassesIn 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

ClassesA 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 functionA 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

// Constructorfunction ClassName (propertyValue) { this.instanceProperty = propertyValue;}

// create an instance of the Classvar instance = new ClassName('my instance property');console.log(instance. instanceProperty);

>>> my instance property

9

function getName () { console.log(this.name);}

// Constructorfunction RadioClass (name) { this.name = name; this.getName = getName;}

var radio2 = new RadioClass('radio two');radio2.getName();

constructor binds getName function as an

instance property

getName returns the instance property

>>> radio two

10

// Constructorfunction RadioClass (name) { this.name = name; this.getName = function () { console.log(this.name); };}

// create an instance of the Classvar radio3 = new RadioClass('radio three');radio3.getName();

>>> radio three

method is added as an instance property

✖ duplicated with each instance created

11

// Constructorfunction RadioClass (name) { this.name = name;}

RadioClass.prototype.getName = function () { console.log(this.name);};

// create an instance of the Classvar radio3 = new RadioClass('radio three');radio3.getName();

>>> radio three

method assigned to prototype object is inherited

by all instances

new creates a new this object which inherits from the constructor prototype

12

radio3.getName();

RadioClass.prototype

getName ()

radio1

name = 'radio one'

radio2

name = 'radio two'

radio3

name = 'radio three'

2) look here

1) look here

RadioClass constructor

this.name

new3) get this.name

13

- 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

Review

14

Thanks

15