Javascript foundations: Classes and `this`


Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Javascript foundations: Classes and `this`

  1. 1. Classes and ‘this’ Learning Javascript foundations John Hunter 2 June 2009 1
  2. 2. 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
  3. 3. 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
  4. 4. function getName () { console.log(; Function returns the name } property of this. = '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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. // 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
  10. 10. function getName () { console.log(; } // Constructor function RadioClass (name) { constructor binds getName function as an = name; instance property this.getName = getName; } var radio2 = new RadioClass('radio two'); getName returns the radio2.getName(); instance property >>> radio two 10
  11. 11. // Constructor function RadioClass (name) { = name; this.getName = function () { method is added as an console.log(; instance property }; } ✖ duplicated with each instance created // create an instance of the Class var radio3 = new RadioClass('radio three'); radio3.getName(); >>> radio three 11
  12. 12. // Constructor function RadioClass (name) { = name; } RadioClass.prototype.getName = function () { method assigned to console.log(; 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
  13. 13. RadioClass.prototype RadioClass constructor getName () new 2) look here 3) get radio1 radio2 radio3 name = 'radio one' name = 'radio two' name = 'radio three' 1) look here radio3.getName(); 13
  14. 14. 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
  15. 15. Thanks 15