ES6 Class"类"

一、传统方法与ES6"类"

  JavaScript语言的传统方法是通过构造函数定义并生成新对象，如：

function User(name,pass){
    this.name = name;
    this.pass = pass;
}
User.prototype.showName = function(){
    console.log(this.name);
}
var u1 = new User('jack','123');
u1.showName();

执行结果

  上述写法与传统的面向对象语言(比如C++)的写法就有很大的差异，而ES6中就引入了Class(类)的概念作为对象的模板，通过class关键字可以定义类。不过需要注意的是新的class写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。
  上述代码通过ES6的"类"改写后，就是这样：

class User{
    constructor(name,pass){
        this.name = name;
        this.pass = pass;
    }
    showName(){
        console.log(this.name);
    }
}
var u1 = new User('jack','123456');
u1.showName();

执行结果

  上面的代码定义了一个"类"，可以看到里面有一个constructor方法，这就是构造函数，而this关键字则代表实例对象。也就是说，ES5的构造函数User对象ES6的User类的构造方法。除了构造方法以外，User类还定义了一个showName的方法，注意：定义"类"的方法时，前面不需要加上function这个保留字，同时方法之间不需要逗号隔开。

二、Class的继承

  Class可以通过extends关键字实现继承，这比ES5通过修改原型链实现继承更加清晰和方便:

class User{
    constructor(name,pass){
        this.name = name;
        this.pass = pass;
    }
    showName(){
        console.log(this.name);
    }
}
class VipUser extends User {
    constructor(name,pass,level){
        super(name,pass);
        this.level = level;
    }
    showLevel(){
        console.log(this.level);
    }
}
var v1 = new VipUser('jack','123456','3');
v1.showName();
v1.showLevel();

执行结果

  上述代码中，super作为函数调用时代表父类的构造函数。ES6要求，子类的构造函数必须执行一次super函数。在执行过程中，super虽然代表了父类User的构造函数，但是返回的是子类VipUser的实例，即super内部的this指向的是VipUser，因此super()在这里相当于User.prototype.constructor.call(this)。需要说明的是：作为函数时，super()只能在子类的构造函数当中，否则会报错。
  除此以外super还可以作为对象在普通方法中指向父类的原型对象；在静态方法中指向父类：

class A {
    p(){
        return 2;
    }
}
class B extends A {
    constructor(){
        super();
    }
    show(){
        console.log(super.p());
    }
}
var b = new B();
b.show();

  上面代码中，子类B中的super.p()就是当作一个对象来使用。这时super在普通方法之中指向A.prototype，所以super.p()就相当于A.prototype.p()
  注意：由于super作为对象使用时是指向父类的原型对象，所以定义在父类实例上的方法或属性是无法通过super调用的。比如我们在A类的构造函数中添加一个属性attr:

class A {
    constructor(){
        this.attr = 'attr';
    }
    p(){
        return 2;
    }
}
A.prototype.x = 'x';
class B extends A {
    constructor(){
        super();
    }
    show(){
        console.log(super.attr);
        console.log(super.x);
        console.log(super.p());
    }
}
var b = new B();
b.show();

执行结果