ES6

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();


 
原文地址:https://www.cnblogs.com/ningxin/p/14466459.html