ES6学习(六) -- ES6变化之Class

核心变化

class、constructor、static、extends、super

• 在es5时候，class还是一个保留字，es6的时候，class变成了关键字
• class为语法糖，实际上就是function函数

案例使用

案例一

基本属性

class Plane {
    constructor (name) {
        this.name = name || '普通飞机';
        this.blood = 100;
    }
}
var op = new Plane();
console.log(op);

结果：

案例二

原型属性

class Plane {
    constructor (name) { //自由属性
        this.name = name || '普通飞机';
        this.blood = 100;
    }
    fly () { //原型方法属性
        console.log('fly');
    }
}
var op = new Plane();
console.log(op);
op.fly();

结果： 可以在看fly已经在op的原型上，但是这种方法是不能在plane上添加普通属性的

案例三

静态属性

class Plane {
    // es6中不支持非方法的静态属性，es7中支持
    static alive () {
        return true;
    }
    
    constructor (name) { //自由属性
        this.name = name || '普通飞机';
        this.blood = 100;
    }
    fly () { //原型方法属性
        console.log('fly');
    }
}
var op = new Plane();
console.log(Plane.alive());

结果： static是plane上的属性

案例四

继承上面的plane

class AttackPlane extends Plane { // 继承Plane原型及静态属性，没办法继承私有属性
    constructor (name) {
        super(name); // 加上这个就可以继承私有属性里
        this.logo = 'xiaoyu';
    }
    dan () {
        console.log('biubiubiu');
    }
}
var oAp = new AttackPlane('攻击机');

总结

• class定义的类不通过new的方式执行就会报错
• class定义的类的原型prototype不能枚举
• 静态属性要放到真正的函数上，而不是原型上