ECMAScript6（ES6）标准之class类的定义、继承及静态方法

ECMAScript6（ES6）标准之class类的定义、继承及静态方法

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

1、类的声明以及访问

要声明一个类要带有class关键字的类名。

class Classscore {
    constructor(name) {
        this.name = name;
    }
    sumScore(score) {
        return score.reduce(function(count, value) {
            return count + value;
        }, 0);
    }
}
let pp = new Classscore('张三');
console.log(pp.sumScore([20,40,50,70,80]));//260

2、类表达式
 类表达式有两种：匿名类和命名的类。

* 匿名类 */ 
let Classscore = class {
    constructor(name) {
        this.name = name;
    }
    sumScore(score) {
        return score.reduce(function(count, value) {
            return count + value;
        }, 0);
    }
};

/* 命名的类 */ 
let Classscore = class Classscore {
    constructor(name) {
        this.name = name;
    }
    sumScore(score) {
        return score.reduce(function(count, value) {
            return count + value;
        }, 0);
    }
}

• 注意事项：
• 定义类方法前面没有function关键字
• 方法之间不能加“，”逗号
• 类没有提升行为
• 类内部定义方法不可枚举

3、类的方法
类的方法有构造函数，静态方法，原型方法，getter和setter
a.原型方法

class Classscore {
    constructor(name) {
        this.name = name;
    }
    sumScore(score) {
        return score.reduce(function(count, value) {
            return count + value;
        }, 0);
    }
}
let pp = new Classscore('张三');
console.log(pp.sumScore([20,40,50,70,80]));//260

b.静态方法(static)

class Classscore {
    constructor(name) {
        this.name = name;
    }
    sumScore(score) {
        return score.reduce(function(count, value) {
            return count + value;
        }, 0);
    }
    static ranking(rank){
    	return rank;
    }
}
console.log(Classscore.ranking(22));//22

4.类继承 
 类之间的继承可以通过extends关键字实现 
 先定义一个父类

class Point{
    constructor(x, y){
        this.x = x;
        this.y = y;
    }
    toString(){
        return '点坐标: ' + this.x + ',' + this.y;
    }
}
let fp = new Point(12, 34);
console.log(fp.toString()); //"点坐标: 12,34"

 接着是子类的声明

class ColoredPoint extends Point{
    constructor(x, y, color){
        super(x, y);
        this.color = color;
    }
    toString(){
        return this.color + super.toString();
    }
}
let sp = new ColoredPoint(56, 78, '红色');
console.log(sp.toString()); //"红色点坐标: 56,78"

• 这个子类的构造函数中出现了一个新的关键字super ，没有它的话，就无法继承父类的实例属性 （子类中有constructor，内部就要有super，子类没有自己的this对象，需要继承父类的this对象再添加东西） 
• super指代父类的实例（父类的this对象） 
• 这里的super(x,y)就是调用父类的构造函数 
• super.toString()就是调用父类toString()方法

参考文件：1、https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
2、http://blog.csdn.net/q1056843325/article/details/53862167
3、https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions