ES6中类与类的继承

• ES6以前，javascript中类的继承可以使用function和原型prototype来模拟类class来实现面向对象编程。

// ES5写法
function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = funciton() {
  console.log(`Hello,大家好，我叫${this.name},我今年${this.age}岁了`);
}
var p1 = new Person('张三', 18);
p1.sayHello()

• ES6中javascript带来了类的概念，但是实际上，javascript的类class本质上也是基于原型prototype的实现方式做了进一步的封装，让我们使用起来更简单明了。也就是说它实际上也是函数function和原型prototype实现的。

用法

class Person(name, age) {
  // 类的构造函数
  // new Person 的时候自动调用
  // 构造函数的作用用于对实例进行初始化操作
  constructor(name,age) {
    this.name = name;
    this.age = age;
   }

    // 实例语法直接写到类的内部
    // 语法注意
    // 方法名称 () { 方法体 }
    // 在实例方法内部的this是实例自己
    // 类的成员与成员之间不能有逗号
    sayHello() {
        console.log(`您好，我叫${this.name},我今年${this.age}岁了`);
    }

    haha() {
        console.log('哈哈哈');
    }

    // 除了实例方法，还有静态方法
    // 静态成员只能被类本身访问
    static hehe() {
        console.log('呵呵呵');
    } 
}

// var p1 = new Person('张三', 18);
// p1.sayHello();
// p1.haha(); 
// Person.hehe();


class Student extends Person {
    constructor(name, age, stuId) {
        // super 指向的是父类构造函数constructor
        super(name, age);
        this.stuId = stuId;
    }

    // 在ES6中,提供了一个种新的方法，在构造函数的外部对实例成员初始化
    foo = 'bar'  // 在node中不支持  babel中可以使用

    study() {
        console.log(`${this.name}，学号:${this.stuId} 爱学习`)
    }
}

const s1 = new Student('李四',18,11110);
s1.study();
Student.hehe();

• 在bable中显示

  
  图片1.png

• 运行结果展示

  
  2018-06-22_010137.png