• js类的继承,es5和es6的方法


    存在的差异:
    1. 私有数据继承差异
      es5:执行父级构造函数并且将this指向子级
      es6:在构造函数内部执行super方法,系统会自动执行父级,并将this指向子级
    2. 共有数据(原型链方法)继承的差异
      es5:子级原型链上的赋值,继承父级原型链上数据
      es6:extend 父级,会自动将父级原型链上的数据给子级
    3. 原型链上的共有数据是否可枚举for in
      es5:可以枚举
      es6:不可枚举
    4. 构造函数的指向
      es5:需要改变constructor的指向
      es6:不需要改
    5. 静态方法的写法差异
      es5:直接在构造函数.静态方法
      es6:static a=1;静态方法——浏览器不支持,要用bable
    6. 实例_proto_的指向差异
      es5:ƒ Child5(name)
      es6:class Child6

    es6的优点:

      Class在语法上面更加贴近面向对象的写法;

      Class实现继承更加易读、易理解;

      更易于写Java后端等语言的使用;

      ****本质还是语法糖,使用prototype。

    es5的方法

        //父级
        function  Parent5(name) {//构造函数
            this.name=name;//私有数据
        }
        Parent5.prototype.say=function () {//公共数据
            console.log(this.name);
        }
        //子级
        function  Child5(name) {//构造函数
            Parent5.call(this,name)//执行父级的构造函数,并将this指向子级
        }
        Child5.prototype=new Parent5;//将父级原型上的共有数据给自己
        Child5.prototype.constructor=Child5;//改变constructor的指向问题
        Child5.prototype.buy=function () {
            console.log('buy');
        }
        var c5=new Child5('邵');//实例
        c5.say()//
        c5.buy()//buy

    es6的方法

        //父级
        class Parent6{//
        constructor(name){//构造函数
            this.name=name;
        }
        say(){
            console.log(this.name);
        }
        }
        class Child6 extends Parent6{//将父级原型上的共有数据给自己
            constructor(name){
                super(name);//执行父级的构造函数,并将this指向子级
            }
            buy(){
                console.log('buy')
            }
        }
        var c6=new Child6('邵');
        c6.say()//
        c6.buy()//buy
  • 相关阅读:
    分布式事务中间件你知道哪些?
    SpringBoot2.1.9+dubbo2.7.3+Nacos1.1.4构建你的微服务体系
    Nginx用做静态资源服务器和动静分离
    物联网温度服务器-ECharts、HTML5、JavaScript / ECharts gauge使用示例
    物联网温度服务器-ECharts、HTML5、JavaScript / ECharts gauge使用示例
    impala
    impala
    impala
    impala
    代码中的禅机
  • 原文地址:https://www.cnblogs.com/shaokevin/p/9789950.html
Copyright © 2020-2023  润新知