0
Classes and ‘this’
  Learning Javascript foundations


            John Hunter
             2 June 2009




              ...
object properties
Unlike scope, properties assigned to an object do not have
lexical context. They belong to the object th...
this
    radio1                           radio1.getName();

                                           getName


    radi...
function getName () {

 console.log(this.name);   Function returns the name
}                                property of t...
var radio1 = {

 name: 'radio one',

 getName: getName
};                     getName called in the
radio1.getName();     ...
Classes
In class based programming the class is a blueprint for objects.
First a class is defined and then instances of cla...
Classes
A class definition generally consists of:

 - a constructor
 - methods
Many languages have an explicit class definit...
Constructor function
A constructor function is a function that:
  1. creates an instance object when called with new
  2. ...
// Constructor
function ClassName (propertyValue) {
   this.instanceProperty = propertyValue;
}



// create an instance o...
function getName () {

 console.log(this.name);
}

// Constructor
function RadioClass (name) {                   construct...
// Constructor
function RadioClass (name) {
   this.name = name;
   this.getName = function () {
                         ...
// Constructor
function RadioClass (name) {
   this.name = name;
}

RadioClass.prototype.getName = function () {        me...
RadioClass.prototype                   RadioClass constructor


 getName ()                                this.name



  ...
Review
- this refers to the calling context of a function
- this is set at function invocation
- classes can be emulated u...
Thanks




         15
Upcoming SlideShare
Loading in...5
×

Javascript foundations: Classes and `this`

1,008

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,008
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
54
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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(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
  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(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
  11. 11. // 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
  12. 12. // 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
  13. 13. 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
  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×