Google官方 -- ES6中类的代码示例

一. 背景

ECMAScript 2015 中引入的 JavaScript 类主要是 JavaScript 现有的基于原型的继承的语法糖。 类语法不是向JavaScript引入一个新的面向对象的继承模型。JavaScript类提供了一个更简单和更清晰的语法来创建对象并处理继承。

类（在Chrome中提供）支持基于原型的继承，构造函数, super关键字调用，实例和静态方法。 本演示中包含的Demo有：

1. 使用class创建一个基本的类(类的声明)
2. 创建一个新的class(使用类表达式)
3. 扩展一个已经存在的class
4. 父类的子类方法
5. 定义一个静态方法
6. 建立在原生对象和DOM元素的子类

二. 案例

1. 案例一: 使用class创建一个基本的类(类的声明)

'use  strict'

class Polygon{
   constructor ( height, width ) {
       this.name = 'Polygon';
       this.height = height;
       this.width = width;
   }
   sayName() {
       console.log( 'Hi, i am a ', this.name + '.' ); 
   }
   sayHistory(){
       console.log('"Polygon" is derived from the Greek polus (many) ' +
       'and gonia (angle).');
   }
   //我们接下会增加静态方法和子类方法
}
//class的使用和ES5中构造函数的使用类似
let p = new Polygon( 300, 400 );
p.sayName(); //Hi, i am a  Polygon.
console.log( 'The width of this polygen is ' + p.width );// The width of this polygen is 400

2. 案例二: 创建一个新的class(使用类表达式)

//
'use strict'

const MyPoly = class Poly {
    getPolyName () {
        console.log('Hi. I was created with a Class expression. My name is ' +
        Poly.name);
    }
};

let inst = new MyPoly();
inst.getPolyName(); //Hi. I was created with a Class expression. My name is Poly

3. 案例三: extends一个已经存在的class

//Classes支持扩展其他类型的classes, 也可以扩展其他对象, 但是它必须是一个构造器.
//让我们扩展Polygon class, 来创造一个新的衍生类叫Square
'use strict'
class Square extends Polygon {
    constructor( length ) {
        //super 关键字用于调用一个对象的父对象上的函数
        super( length, length );
        this.name = 'Square';
    }

    //getter/setter方法在classes中被支持
    get area() {
        return this.height * this.width;
    }
    set area( value ) {
        this.area = value;
    }
}

let s = new Square( 5 );
console.log( 'The area of this square is ' + s.area ); //The area of this square is 25

4. 案例四:父类的子类方法

'use strict'
class Rectangle extends Polygon {
    constructor( height, width ) {
        super( height, width );
        this.name = 'Rectangle';
    }

    //这里,sayName()方法是一个重写了父类的子类方法
    sayName() {
        console.log( 'Sup! My name is ', this.name + '.' );
        super.sayHistory();
    }
}

let r = new Rectangle( 50, 60 );
r.sayName(); //"Polygon" is derived from the Greek polus (many) and gonia (angle).

5. 案例五:定义一个静态方法

'use strict'
class Triple {
    static triple( n ) {
        n = n || 1;
        return n * 3;
    }   
}

class BiggerTriple extends Triple {
    static triple ( n ) {
        return super.triple ( n ) * super.triple( n );
    }
}

console.log( Triple.triple() );
console.log( Triple.triple( 6 ) ); //18 
console.log( BiggerTriple.triple( 3 ) ); //81

//var tp = new Triple();
//console.log( tp.triple() ); //这里会报错: tp.triple is not a function. 说明triple()是一个静态方法!

6. 案例六:建立在原生对象和DOM元素的子类

'use strict'
//扩展Date对象
class MyDate extends Date{
    constructor() {
        super();
    }
    getFormattedDate() {
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
        'Oct', 'Nov', 'Dec'];
        return this.getDate() + '-' + months[ this.getMonth() ] + '-' + this.getFullYear();
    }
}

var aDate = new MyDate();
console.log( aDate.getTime() ); 
console.log( aDate.getFormattedDate() ); 

'use strict'
//扩展Audio元素
class MyAudio extends Audio {
    constructor() {
        super();
        this._lyrics = '';
    }
    
    get lyrics() {
        return this._lyrics;
    }
    
    set lyrics(str) {
        this._lyrics = str;
    }
}
    
var player = new MyAudio();
player.controls = true;
player._lyrics = 'Never gonna give you up';
document.querySelector('body').appendChild(player);
console.log(player._lyrics);//Never gonna give you up

'use strict'
//扩展Array对象
class Stack extends Array{
    constructor() {
        super();
    }

    top() {
        return this[ this.length - 1 ];
    }
}

var stack = new Stack();
stack.push( 'world' );
stack.push( 'hello' );
console.log( stack.top() ); //hello
console.log( stack.length ); //2

三. 参考文档

原文出处: GoogleChrome: Classes (ES6) Sample

其他参考文档:

1. Classes-JavaScript | MDN
2. super-JavaScript | MDN
3. class expression- JavaScript | MDN
4. getter expression- JavaScript | MDN