ES5構造函數與ES6類

ES5的構造函數：

function F(name) {
        this.name = name;//私有屬性
    }
    F.prototype.writeCss = function () {
        console.log('writeCss');//原型上的方法
    }
    F.writeJS = function () {//把函數當成對象，給它添加屬性；
        console.log('js');
    };//定義在類上的靜態屬性
    let f = new F();
    f.writeCss();
    F.writeJS();

ES6的類:

    class F{
        constructor(name){//放私有屬性，相當於es5中構造函數里的內容
            this.name = name;
        };
        writeCss(){//原型上的方法
            console.log('writeCss');
        }
        static writeJS(){  //靜態屬性
            console.log('js');
        }
    }
    let f = new F('lily');
    console.log(f);
    F.writeJS();

ES5的寄生式組合繼承：（只能繼承父類的共有屬性）

    //只能繼承父類的公有屬性
　　function F(name) {
        this.name = name;
    }
    F.prototype.writeCss = function () {
        console.log('css');
    }
    let f = new F();
    //先在實例上查找，若沒有則通過__proto__去所屬類的原型上找
    //__proto__是實現繼承的關鍵 F類能查找到Object類原型上的屬性，說繼承於Object
    console.log(f.hasOwnProperty('name'));
    console.log(F.prototype.__proto__ === Object.prototype);//true F類是Object類的子類，子類是可以調用原型上的屬性
    function S(age){
        this.age = 20;
    }
    S.prototype = Object.create(F.prototype);//寄生式組合繼承 ie6~8不支持  必須在原型對象之前！！
    S.prototype.writeJS = function () {
        console.log('js');
    };
    //實現S類是F類的子類，S類就能調用F類的公有屬性
//    S.prototype.__proto__ = F.prototype;
    let s = new S();
    s.writeCss();

ES5的call繼承：(繼承父類的私有屬性)：

    //繼承父類的私有屬性
    function F(name) {
        this.name = name;
    }
    F.prototype.writeCss = function () { console.log('css'); };
    function S(age, name){
        this.age = 20;
        F.call(this,name);//this指的是S類的實例s s.name= 'lucy'
    }
    S.prototype = Object.create(F.prototype);//寄生式組合繼承 ie6~8不支持  必須在原型對象之前！！
    S.prototype.writeJS = function () { console.log('js'); };
    //實現S類是F類的子類，S類就能調用F類的私有屬性
    let s = new S(20,'lucy');
    console.log(s.name);

ES6繼承:(繼承私有屬性，共有屬性和靜態屬性)：

 class F{
     constructor(name){
         this.name = name;//私有屬性
     }
     writeCss(){
         console.log('css');//公有屬性
     }
     static fn(){
         console.log('fn');//靜態屬性
     }
 }
 class S extends F{  //S類繼承於F類
     constructor(age,name){
         super(name);   //若寫了extends 則constructor中必須寫super(),相當於F.call(name)
         this.age = age;
     }
     writeJS(){
         console.log('js');
     }
 }
 let s = new S(20,'lucy');
 console.log(s.name);
 s.writeCss();
 S.fn();