Classes

Protopal Inheritance In ES5

function Shape( color ) {
    this.color = color;

    // It doesn't work
    // function fetchColor() {
    //     return this.color
    // }
}

// binding method to class Shape via prototype
Shape.prototype.getColor = function() {
    return this.color;
}

let shape = new Shape('red')
console.log(shape) // out put is : Shape { color: 'red' }
// It doesn't work
// console.log(shape.fetchColor())

function Rectangle( color, width, height ) {
    Shape.call( this, color );
    this.width = width;
    this.height = height;
};

// A little strange!
Rectangle.prototype = Object.create( Shape.prototype );
Rectangle.prototype.constructor = Rectangle;

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

let rectangle = new Rectangle( 'red', 5, 8 );
console.log( rectangle.getArea() ); // output : 40
console.log( rectangle.getColor() );// output : red
console.log( rectangle.toString() ); // output : [object Object]
console.log( rectangle ); // output : Rectangle { color: 'red', width: 5, height: 8 }

Inheritance in ES6

// Define the super class
class Shape {
    constructor(color) {
        this.color = color
    }

    getColor() {
        return this.color
    }
}

// Subclass extends the super class
class Rectangle extends Shape {
    constructor(color, width, height) {
        super(color) // invoke the super class constructor method.
        this.width = width
        this.height = height
    }

    // define a new method
    getArea() {
        return this.width * this.height
    }
}

let rectangle = new Rectangle( 'red', 5, 8 );
console.log( "Area:\t\t" + rectangle.getArea() )
// The sub class can also inovke the method which extends from the super class.
console.log( "Color:\t\t" + rectangle.getColor() )
console.log( "toString:\t" + rectangle.toString() )

Super keyword in a Class

class A {
    constructor() {
        console.log( 'A' ); 
    } 
}

class B extends A {
    constructor() {
        // Call super as the first thing in a constructor of a class defined with extends.
        // otherwise you will get an error when you initiate B.
        super() 
        console.log( 'B' )
    } 
}

new B() // It will ouput A and B.

console.log('----------------------')

class C extends A {
    // If you don’t define a constructor in a class defined with extends, 
    // one will automatically be created for you, calling super with the argument list of the constructor.
} 

new C() // so the output is A from Class A

C.constructor // nothing will happen because the constructor in C don't do anything.

Shadowing 遮蔽,类似java中的方法覆盖(overwrite)

class User {
    constructor() {
        this.name = 'man'
    }
    getName() {
        return this.name
    }
}

class SuperUser extends User {
    getName() {
        return 'super' + this.name
    }
}

var su = new SuperUser()
let result = su.getName()
console.log(result) // The ouput will be superman

Abstract Class

class ChartView {
    constructor( /* ... */ ) {
        // The built-in property new.target contains a reference to the class written next to the new keyword during instantiation.
        if ( new.target === ChartView ) {
            throw new Error('Abstract class ChartView cannot be instantiated.');
        }
        // ...
    }
    // ...
}

get and set methods

class Square {
    constructor( width ) { this.width = width; }
    get height() {
        console.log( 'get height' );
        return this.width;
    }
    set height( h ) {
        console.log( 'set height', h );
        this.width = h;
    }
    get area() { 
        console.log( 'get area' );
        return this.width * this.height;
    }    
}

let square = new Square( 5 );
square.height = 99 // set method will be invoked.
console.log(square.height) // get method will be invoked.

Static Methods

class C {
    static create() {
        return new C()
    }
    constructor() {
        console.log( 'Accessing constructor from the class')
    }
}

// Static methods are operations defined on a class. These methods can only be referenced from the class itself, not from objects.
// and after the create was invoked, it's constructor method was also invoked.
var c = C.create()

//this will give an error
c.create()