Dr. Mark Humphrys

School of Computing. Dublin City University.

Home      Blog      Teaching      Research      Contact

My big idea: Ancient Brain


CA114      CA170

CA668      CA669      Projects

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                     


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.



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


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() 
         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();

c2.fn(); c2.outStuff(); 


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



ancientbrain.com      w2mind.org      humphrysfamilytree.com

On the Internet since 1987.

Wikipedia: Sometimes I link to Wikipedia. I have written something In defence of Wikipedia. It is often a useful starting point but you cannot trust it. Linking to it is like linking to a Google search. A starting point, not a destination. I automatically highlight in red all links to Wikipedia and Google search and other possibly-unreliable user-generated content.