码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-10-15 14:38:44      阅读:345      评论:0      收藏:0      [点我收藏+]

标签:ext   构造   func   枚举   并且   自己   执行   type   继承   

存在的差异:
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

 

 

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

 

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

标签:ext   构造   func   枚举   并且   自己   执行   type   继承   

原文地址:https://www.cnblogs.com/shaokevin/p/9789950.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!