• es5原型继承 与 es6类 继承


    es6 的 代码 无参数

    class people{
        constructor(){  //构造函数,填写需要向下继承的属性
            this.name = 'sss'
            this.age = 25
            this.weight = '65kg'
        }
        showage(){ //方法,填写 需要向下继承的方法
            console.log(this.age)
        }
    }
    
    class women extends people{  //extends 继承
        constructor(){        ////构造函数,填写需要向下继承的属性
            super();   //当该类 为继承自某一父类的派生类时,必须添加 super();
            this.sex = 'women' 
        }
        showsex(){   //方法,填写 需要向下继承的方法
            console.log(this.name,this.sex)
        }
        showage(){ //覆写,覆盖父类中的方法
            console.log(this.age+11)
        }
    }
    console.log(new people())
    console.log(new women())
    new people().showage()
    new women().showsex()

    es6 有参数继承

    class people{
        constructor(name,age,weight){  //构造函数,填写需要向下继承的属性,实例化时需要传参
            this.name = name
            this.age = age
            this.weight = weight
        }
        showage(){ //方法,填写 需要向下继承的方法
            console.log(this.age)
        }
    }
    
    class women extends people{  //extends 继承
        constructor(name,age,weight){        ////构造函数,填写需要向下继承的属性
            super(name,age,weight);   //当该类 为继承自某一父类的派生类时,必须添加 super();
            this.sex = 'women' 
        }
        showsex(){   //方法,填写 需要向下继承的方法
            console.log(this.name,this.sex)
        }
        showage(){ //覆写,覆盖父类中的方法
            console.log(this.age+11)
        }
    }
    console.log(new people('sss',25,'55kg'))
    console.log(new women('sss',25,'40kg'))
    new people('sss',25,'55kg').showage()
    new women('sss',25,'40kg').showsex()

    es5 的代码    无参数

    function person(){ //构造函数  可采用参数变量传入,也可使用常量,向下继承的属性
        this.name = 'sss'
        this.age = 25
        this.weight = '65kg'
    }
    person.prototype={  //向下继承的方法
        showage:function(){
            console.log(this.age)
        }
    }
    
    function womens(){  //构造函数  可采用参数变量传入,也可使用常量,向下继承的属性
        this.sex = 'women'
    
        // this.name = 'sss'
        // this.age = 25
        // this.weight = '65kg'
    }
    womens.prototype = {//向下继承的方法
        ...new person(), //继承自person 的常量属性,此处偷懒用了es6 的对象展开
        showsex:function(){    //向下继承的方法
            console.log(this.name,this.sex)
        },
        showage:function(){ //覆写,覆盖继承的showage方法
            console.log(this.age+11)
        }
    }
    
    console.log(new person());
    console.log(new womens());
    new person().showage()
    new womens().showsex()

    es5 有参数

    function person(name, age, weight) {
      //构造函数  可采用参数变量传入,也可使用常量,向下继承的属性
      this.name = name;
      this.age = age;
      this.weight = weight;
    }
    person.prototype = {
      //向下继承的方法
      showage: function() {
        console.log(this.age);
      }
    };
    person.prototype.constructor = person; //如果prototype是对象的写法,则需要将原型的构造函数绑定到本身。否则constructor 指向 object
    
    function womens(name, age, weight) {
      //构造函数  可采用参数变量传入,也可使用常量,向下继承的属性
      this.name = name;
      this.age = age;
      this.weight = weight;
      this.sex = "women";
    }
    //womens.prototype = person.prototype; //继承自 person的方法,这样写实际上是指针的复制,当某一方修改prototype 的时候,都会导致另一方也会被修改
    
    for(var i in person.prototype){
        womens.prototype[i] = person.prototype[i]
    }
    womens.prototype.showsex = function() {
      //向下继承的方法
      console.log(this.name, this.sex);
    };
    womens.prototype.showage = function() {
      //覆写,覆盖继承的showage方法,如果person 中没有,则初次定义,如果person中存在,则覆盖
      console.log(this.age + 11);
    };
    
    console.log(new person("sss", 25, "55kg"));
    console.log(new womens("sss", 25, "40kg"));
    new person("sss", 25, "55kg").showage();
    new womens("sss", 25, "40kg").showsex();
    
    console.log(person.prototype);
    console.log(womens.prototype);

    es6中新定义的类 实际上是 es5中基于 原型继承的语法糖。javascript 依然是一个基于原型继承的语言。

  • 相关阅读:
    2013.11.19上班 任务:写文档
    js 时间比较和货币格式显示
    SQL优化
    多线程消费队列中的接口数据,接口数据来源是kafka
    List<Map<String, Object>> 中根据某一个属性进行排序
    ES查询操作
    Valid Sudoku
    Decode Ways
    Jump Game
    Best Time to Buy and Sell Stock II
  • 原文地址:https://www.cnblogs.com/RoadAspenBK/p/9890575.html
Copyright © 2020-2023  润新知