JavaScript class

In my opinion, JavaScript is one of complicated grammar of programming language.

JavaScript Class

JavaScript class is prototype, method.

This is the simple class

var Member = function(){};

Instantiate

var mem = new Member();

Initialize with constructor

var Member = function(firstName, lastName)
{
      this.firstName = firstName;
      this.lastName = lastName;
      this.getName = function()
     {
              return this.lastName + '' + this.firstName;
     }
};
var mem = new Member("Mayu", "Watanabe");

Method, Value

this.getXXX = function(){}

Add method runtime

mem.greeting = function() 
{
    alert("Open");
}
mem.get = function() { return this.lastName; }

Add greeting method to mem(instance) only

prototype

Method is prototype declare
prototype is imply reference. Reference is just same. That means efficient memory use
This is like class member method

var Member = function( firstName, lastName) // Constructor
{
        this.firstName = firstName;
        this.lastName = lastName;
};

Member.prototype.getName = function()  // Method
{
     return this.lastName + ' ' + this.firstName;
}

How to use

var yukirin = new Member("Yuki", "Kashiwagi");

To use prototype, to add member method
If you want to add member, use constructor this.xxx = xxx;

this.array = new Array();

Prototype tips

One suggestion
1 file has constructor var and prototype
Advantage of prototype

  • Memory saving
  • Add member and method immediately

static

Not use prototype!
examples

obj.property_name = value;
obj.property_method = function(){};
var obj = function(){};     // constructor
obj.version = '1.0';    // static proeprty
obj.triangle = function( base, height)
{
    return base * height / 2;
}
var a = new obj();

static property should be readonly
Don’t use this keyword in static method

Literal

var Member = function(firstName, lastName)
{
      this.firstName = firstName;
      this.lastName = lastName;
};

Member.prototype =
{
       getName : function(){return this.lastName + ' ' + this.firstName;},
       toString : function(){ return this.lastName + this.firstName; }
};

Chain(Inheritance)

subclass.prototype = new superclass();

sub class prototype is super class?

var Animal = new function(){} // Constructor
Animal.prototype = // Method
{
      walk: function()
      {
            document.write("Walk!");
       }
};
var Dog = function(){} // Constructor

Dog.prototype = new Animal(); // Extends Animal
var shiba = new Dog();
shiba.walk();

prototype chain

Find method?

  1. Find member from child instance
  2. Find from object prototype
  3. Find from super class prototype …

One more example

var Rectangle = function (w, h )
{
      this.width = w;
      this.height = h;
}

Rectangle.prototype.area = function()
{
     return this.width * this.height;
}

// Here is subclass
var PositionedRectangle = function (x, y, w, h)
{
        // Call superclass constructor
        Rectangle.call(this, w, h);

        this.x = x;
        this.y = y;
}
PositionedRectangle.prototype = new Rectangle();

How to delete property

delete PositionedRectangle.prototype.width;
delete PositionedRectangle.prototype.height;

How to call super class constructor

SuperClassName.call(this, w, w );

Add constructor

PositionedRectangle.prototype.constructor = PositionedRectangle;

Add additional method

PositionedRectangle.prototype.contains = function(x, y)
{
       return (x > this.x && x < this.x + this.width && y > this.y && y < this.y + this.height);
}
&#91;/javascript&#93;
<h4>Override</h4>
[javascript]
Rectangle.prototype.toString = function()
{
return "[" + this.width + "," + this.height + "]";
}

PositionedRectangle.prototype.toString = function()
{
          return "(" + this.x + "," + this.y + ") " + 
          Rectangle.prototype.toString.apply(this);
}