2JavaScript设计模式--class/extends

ES6语法 类 class

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class Person {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    eat(){
        alert( `${this.name} eat something`);
    }
    spake(){
        alert(`My name is ${this.name},age ${this.age}`);
    }
}
let zhang = new Person("zhang san",20);
zhang.eat();
zhang.spake();

let wang = new Person("王五",21);
wang.eat();
wang.spake();

继承 extends
super:调用父类的构造函数和方法。

class People {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    eat(){
        alert( `${this.name}在吃东西`);
    }
    spake(){
        alert(`我的名字是${this.name},年龄${this.age}`);
    }
}

class Student extends People{
    constructor(name,age,number){
        super(name,age);
        this.number = number;
    }
    study(){
        alert(`${this.name}在学习`);
    }
}

let xiaoming = new Student("小明",19,8001);
xiaoming.study();
alert(`小明的学号是${xiaoming.number}`);
xiaoming.eat();

let xiaohong = new Student("小红",17,8002);
xiaohong.eat();
xiaohong.spake();

---

TypeScript语法

ES6不支持 class 中的 public、private、protected 修饰符。
但是TS支持，可以在TS中演示一下。
左边22行代码，右边35行，而且右边的可读性很差。这就是TS的优势。
在线编译地址：http://www.typescriptlang.org/play/index.html

图片.png

class Person{
    public name: string="无名";
    constructor(public age:number,public num:number) {
        
    }
    protected price: number;
}

class Men extends Person{
    constructor(age,num,public high:number) {
        super(age, num);
    }
    speak() {
        alert(`名字${this.name},年龄${this.age},编号${this.num},身高${this.high}`);
    }
}

let m1 = new Men(23, 111, 180);
m1.name = "张三";
m1.speak();
let m2 = new Men(20, 110, 170);
m2.speak();