Upload
john-hunter
View
998
Download
0
Tags:
Embed Size (px)
DESCRIPTION
This presentation explains the ‘this’ property and how class based inheritance can be emulated. The presentation forms part of a series on learning Javascript foundations.
Citation preview
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