Dr. Mark Humphrys

School of Computing. Dublin City University.

Home      Blog      Teaching      Research      Contact

My big idea: Ancient Brain

Search:

CA216      CA249      CA318

CA400      CA651      CA668


OOP in JavaScript

The original OOP scheme

The following shows the original OOP scheme in JS, based on:

  

Public and private data and functions

The awkward thing to get used to is the use of "this.var" (and similar) to refer to data and functions.
  
 
//--- start of MyClass -----------------------------
// create a class (with vars and functions encapsulated inside it)

function MyClass() 
{ 

//--- private data x -----------------------------------------------------------------------------

  var x = 1;                // regular var syntax - means private variable 

  var self = this;          // needed - see below 


//--- private fns fn and fnt ------------------------------------------------------------------------------
 
  var fn = function()        // declare private function
  {
   x = 10;                // address private var
   fnt();                 // address private fn
 
   self.t = 50;           // address public var    
   self.pnt();            // address public fn 
  };
  
  
  // can also declare fn as follows
  // but note semi-colon, this fn declaration is a statement inside another fn 

  function fnt()                // regular function syntax - means private function
  {
  }; 
  
  

//--- public data t --------------------------------------------------------------------------------

  this.t = 5;                   // public variable 

  
//--- public fns pn and pnt ---------------------------------------------------------------------------------

  this.pn = function() 
  {
    x = 100;                  // address private var    
    fnt();                    // address private fn

    this.t = 500;             // address public var    
    this.pnt();               // address public fn 
  };
 
  this.pnt = function() 
  {
  };
  
}            

//--- end of MyClass -----------------------------

   
   
// create an object:

  var m = new MyClass();


// trying to access private data and fns fails:

      m.x = 1000;    // fails - does not access private x 
                     // this makes a new variable "this.x" for m
                     // but the methods in m access a different x, which is untouched
					  
//    m.fn();        // fails - cannot call private fn         
         
		 
// accessing public data and fns works:
		 
      m.t = 5000;    // works       

      m.pn();        // works                     
 

Demo

The above code leads to (this is a live demo):

"View Source" to see the JS. Copy it to your own page and play with it to see how public and private data and functions work.

  

consts

To encapsulate a const, you can use Object.defineProperty
To make m.t above a const:
   Object.defineProperty ( m, 't', { writable: false } );


Inheritance

The awkward thing to get used to is that functions to be inherited cannot access private data or private functions.
  

// Parent class TheClass()
// Two child classes Child1() and Child2()


function TheClass() 
{ 
 var x = 1;             // private

        // === private vars cannot be accessed from prototype functions ===================
        // either make them public
        // or have the prototype function call other, non-prototype, public functions that access them

 this.f = 5;            // public
 var self = this;           
}


// prototype functions - will be inherited by subclasses 

TheClass.prototype.outStuff = function() 
{
 someOutputFunction ( "f = " + this.f ); 
};


        function Child1() 
        { 
         TheClass.call(this);           // defines parent class 
         var self = this;           
        }

        Child1.prototype = Object.create(TheClass.prototype);           // inherit methods
        Child1.prototype.constructor = Child1;                          // except for constructor 


        function Child2() 
        { 
         TheClass.call(this);
         var self = this;           
         this.fn = function() { self.f = 20; }                  // access and modify data declared not here but in parent 
        }

        Child2.prototype = Object.create(TheClass.prototype);
        Child2.prototype.constructor = Child2;


var p = new TheClass();
var c1 = new Child1();
var c2 = new Child2();

p.outStuff(); 
c1.outStuff(); 
c2.fn(); c2.outStuff(); 

Demo

The above code leads to (this is a live demo):

"View Source" to see the JS. Copy it to your own page and play with it to see how inheritance works.

Alternative way: The "class" keyword

  

  

Feeds      w2mind.org      ancientbrain.com

On the Internet since 1987.