JS 怎樣模擬類的特性

我就是事情發表於2019-04-01
JS

function Animal(){}

function Dog(){}

1.實現 Dog 繼承 Animal

Dog.prototype = Object.create(Animal.prototype)

背景知識：
    要實現 Dog 繼承 Animal, 
    就是要實現 new Dog() instanceof Animal 為真
    就是要實現 new Dog().__proto__.__proto__ === Animal.prototype
    即實現 Animal.prototype 在 new Dog() 的原型鏈上
實現過程：
    根據js原型鏈的相關知識, 有 new Dog().__proto__ === Dog.prototype
    要實現繼承, 就可以令 Dog.prototype.__proto__ === Animal.prototype
    也就是 Dog.prototype = Object.create(Animal.prototype)
複製程式碼
// 測試程式碼(直接在瀏覽器控制檯中執行)：
    
    function Animal(){}
    function Dog(){}
    Dog.prototype = Object.create(Animal.prototype);
    console.log(new Dog() instanceof Animal);//結果為 true
複製程式碼

2.實現 Dog 與 Animal 類之間的多型，方法重寫等

// 測試程式碼(直接在瀏覽器控制檯中執行)：

    function Animal(){}
    function Dog(){}
    Object.defineProperties(Animal.prototype,{
        name:{
            value(){
                return 'Animal';
            }
        },
        say:{
            value(){
                return 'I’m ' + this.name();
            }
        }
    });
    
    //子類Dog繼承父類Animal中的方法
    Dog.prototype = Object.create(Animal.prototype);
    console.log(new Dog().say());//結果為 I’m Animal
    
    //子類Dog重寫父類Animal的name方法
    Dog.prototype = Object.create(Animal.prototype,{
        name:{
            value(){
                return 'Dog';
            }
        }
    });
    console.log(new Dog().say());//結果為 I’m Dog
複製程式碼

3.完善類的模擬

// 測試程式碼(直接在瀏覽器控制檯中執行)：

    function Animal(){}
    function Dog(){}
    Dog.prototype = Object.create(Animal.prototype);
    console.log(Dog.prototype.constructor);//結果為 ƒ Animal(){}
    
    //上面的這個輸出是不對的, 結果應該是 ƒ Dog(){}, 解決方法
     Dog.prototype = Object.create(Animal.prototype,{
        constructor:{
            value:Dog,
            enumerable:false
        } 
     });
     console.log(Dog.prototype.constructor);// 結果為 ƒ Dog(){}
複製程式碼

相關文章