02 Class and Inheritance in ES 5

Static Method, Instance Method

function Person(){
     this.name = 'shawn';   // Instance Property
     this.age = 20;
     this.work = function ( ) { }            // Instance Method
}

Person.name2 = 'hahaha';     // Static Property
Person.run = function ( ) { }   // Static Method

// call the instance method
var w = new Person( );
w.name; 

// call the static method
Person.run();

1. Class without method, only properties

function Person(){
     this.name = 'shawn';
     this.age = 20;
}

var p = new Person( );

p.name;  // shawn

2. Constructor and Prototype Chain with method

//constructor
function Person(){
     this.name = 'shawn';
     this.age = 20;
     this.run = function () {
           console.log(this.name + 'is running');
}

// prototype chain 
Person.prototype.sex = 'male';
Person.prototype.work = function (){
          console.log(this.name + 'is working');
}

var p = new Person( );

p.name;  // shawn
p.run( ); // shawn is running

p.work( ); // shawn is working

properties on the prototype chain would be shared by multiple instances, while the properties on the constructor would not be.

3. Static method in Class

Instance Methods are the ones which could only be used after new. Static Methods are the ones which could be added directly after the Class name

//constructor
function Person(){
     this.name = 'shawn';
     this.age = 20;
     this.run = function () {
           console.log(this.name + 'is running');
}

//static method
Person.getInfo = function (){
        console.log('this is Static Method');
}

Usage of Static Method is without Creating new Instance ,

Person.getInfo( );  // this is Static Method

4. Object - Inheritance

//constructor
function Person(){
     this.name = 'shawn';
     this.age = 20;
     this.run = function () {
           console.log(this.name + 'is running');
}

// prototype chain 
Person.prototype.sex = 'male';
Person.prototype.work = function (){
          console.log(this.name + 'is working');
}

// Object - Inheritance
function Web ( ){
      Person.call(this);   
}

var w = new Web( );
w.run( ) ;  // Shawn is running
w.work( ); //  wrong, cause Inheritance could not use method in prototype chain

Object-Inheritance could use Properties and Method inside Constructor, but not inside Prototype Chain.

5. Prototype - Inheritance

//constructor
function Person(){
     this.name = 'shawn';
     this.age = 20;
     this.run = function () {
           console.log(this.name + 'is running');
}

// prototype chain 
Person.prototype.sex = 'male';
Person.prototype.work = function (){
          console.log(this.name + 'is working');
}

function Web( ) { }

// prototype - inheritance
Web.prototype = new Person ( );

var w = new W ( );
w.run ( ); //  shawn is running
w.work ( ) ; // shawn is working

Prototype-Inheritance could use Properties and Method both inside Constructor and inside Prototype Chain.

- Problem

function Person(name,age){
     this.name = name;
     this.age = age;
     this.run = function () {
           console.log(this.name + 'is running');
}

funtion Web(name,age){  };

Web.prototype = new Person ( );

var w = new Web ('noob',20);  // intance could not pass the parameters

6. Prototype Chain + Constructor - Instance

// constructor
function Person(name,age){
     this.name = name;
     this.age = age;
     this.run = function () {
           console.log(this.name + 'is running');
}

// prototype chain 
Person.prototype.sex = 'male';
Person.prototype.work = function (){
          console.log(this.name + 'is working');
}

// prototype chain + constructor - inheritance
function Web (name, age) {
    Person.call ( this,name,age );
}

Web.prototype = new Person( ); // also could be written  Web.prototype = Person.prototype;

var w = new W ('noob', 20 );

w.run(); // noob is running;
w.work(); // noob is working;

puddlejumper26 / blogs