• 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();
    
    
    
     
  • 相关阅读:
    MySQL手册
    字符串置换
    Java实现三角形计数
    Java实现求二叉树的路径和
    Excel催化剂开源第46波-按行列排列多个图形技术要点
    Excel催化剂开源第44波-窗体在Show模式下受Excel操作影响变为最小化解决方式
    Excel催化剂开源第45波-按原图大小导出图片
    个人永久性免费-Excel催化剂功能第105波-批量调整不规范的图形对象到单一单元格内存储
    Excel催化剂开源第42波-与金融大数据TuShare对接实现零门槛零代码获取数据
    Excel催化剂开源第43波-Excel选择对象Selection在.Net开发中的使用
  • 原文地址:https://www.cnblogs.com/ningxin/p/14466459.html
Copyright © 2020-2023  润新知