Dr. Mark Humphrys

School of Computing. Dublin City University.

Home      Blog      Teaching      Research      Contact

Search:

CA216      CA249      CA318

CA400      CA651      CA668


OOP in JavaScript






Public and private data and functions

It is worth understanding how JS can encapsulate data and functions. Otherwise your program can easily fill up the global namespace.

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.



Feeds      w2mind.org

On Internet since 1987.