Javascript foundations: Classes and `this`
Upcoming SlideShare
Loading in...5
×
 

Javascript foundations: Classes and `this`

on

  • 1,841 views

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.

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.

Statistics

Views

Total Views
1,841
Views on SlideShare
1,735
Embed Views
106

Actions

Likes
1
Downloads
53
Comments
0

8 Embeds 106

http://onwebdev.blogspot.com 64
http://www.genes.com 24
http://blog.gabrieleromanato.com 8
http://forum.fcicafe.com 6
http://idev.syzygy.net 1
http://www.slideshare.net 1
http://onwebdev.blogspot.in 1
http://onwebdev.blogspot.com.br 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Javascript foundations: Classes and `this` Javascript foundations: Classes and `this` Presentation Transcript

  • 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 View slide
  • 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 View slide
  • 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