ES6 - Class - 继承

Class 其实是一个语法糖，他能实现的，ES5同样能实现

ES5

　　//手机
    function Phone(brand,price){
        this.brand = brand;
        this.price = price;
    }
    //添加方法
    Phone.prototype.call = function(){
        console.log("I can call someone")
    }
    //实例化对象
    let Huawei = new Phone("华为",4999);
    Huawei.call();
    console.log(Huawei); 

    //I can call someone     Phone {brand: "小米", price: 4999} obj

ES6

 　　class Phone{
　　　　　brand: string;
　　　　　price: number;　

        //构造方法， 名字不能修改
        constructor(brand,price) {
            this.brand = brand;
            this.price = price;
        }

        //方法必须使用该语法，不能使用ES5的对象完整形式
        call(){
            console.log("I can call someone")
        }
    }
    let Xiaomi = new Phone("小米", 4999);
    Xiaomi.call();
    console.log(Xiaomi);
    //I can call someone     Phone {brand: "小米", price: 4999} obj

继承

ES5 实现继承

//手机
    function Phone(brand, price) {
        this.brand = brand;
        this.price = price;
    }

    //添加方法
    Phone.prototype.call = function () {
        console.log("I can call someone")
    }

    function SmartPhone(brand, price, color, size) {
        Phone.call(this, brand, price); //此处为了继承phone， 用call修改this指向，并传入参数
        this.color = color;
        this.size = size;
    }

    //设置子级构造函数的原型
    SmartPhone.prototype = new Phone;
    SmartPhone.prototype.constructor = SmartPhone;

    //声明子类的方法
    SmartPhone.prototype.photo = function () {
        console.log("I can take phone");
    }

    SmartPhone.prototype.playGame = function () {
        console.log("I can play games");
    }

    const xiaomi = new SmartPhone("小米", 3999, '黑色', '5.5inch');
    console.log(xiaomi)

ES6

class Phone{
        //构造方法， 名字不能修改
        constructor(brand,price) {
            this.brand = brand;
            this.price = price;
        }

        //方法必须使用该语法，不能使用ES5的对象完整形式
        call(){
            console.log("I can call someone")
        }
    }

    class SmartPhone extends Phone { //使用extends来继承

        brand: string;
　　　　　price: number;　

//构造方法， 名字不能修改  constructor(brand, price, color, size) { super(brand,price);//类似与 Phone.call(this, brand, price); this.color = color; this.size = size; } //方法必须使用该语法，不能使用ES5的对象完整形式 //声明子类的方法  photo() { console.log("I can take phone"); } playGame() { console.log("I can play games"); } } const xiaomi = new SmartPhone("小米", 3999, '黑色', '5.5inch'); console.log(xiaomi);

　　xiaomi.call();
　　xiaomi.photo();
　　xiaomi.playGame();

同时子类可以复写父类的方法

class Phone{

        brand: string;
　　　　　price: number;　

//构造方法， 名字不能修改  constructor(brand,price) { this.brand = brand; this.price = price; } //方法必须使用该语法，不能使用ES5的对象完整形式  call(){ console.log("I can call someone") } } class SmartPhone extends Phone { //使用extends来继承 //构造方法， 名字不能修改  constructor(brand, price, color, size) { super(brand,price);//类似与 Phone.call(this, brand, price); this.color = color; this.size = size; } //方法必须使用该语法，不能使用ES5的对象完整形式 //声明子类的方法 photo = function () { console.log("I can take phone"); } playGame = function () { console.log("I can play games"); } call(){ console.log("I can make a video call"); } } const xiaomi = new SmartPhone("小米", 3999, '黑色', '5.5inch'); console.log(xiaomi) xiaomi.call(); xiaomi.photo(); xiaomi.playGame();