1. 程式人生 > >js類的繼承,es5和es6的方法

js類的繼承,es5和es6的方法

type 類的繼承 構造函數 需要 tor for UNC ext ati

存在的差異:
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的方法