簡單實現原生JS中的多重繼承
阿新 • • 發佈:2018-12-26
經過同事指點,多重繼承可以在原型物件上新增一個屬性用以儲存父類的物件和屬性,子類呼叫的時候使用superClass點出父類方法,這樣一來就解決了父類和子類方法同名,子類繼承父類之後會覆蓋父類方法的問題。
/** * 宣告一個動物型別 * @constructor */ function Animal(){} // 為動物類建立一個name屬性 Animal.prototype.name = "動物類"; // 為動物類建立一個說話的fun Animal.prototype.say = function(content){ // 如果物件不存在name屬性,則使用原型鏈的name if(!this.name){ this.name = this.__proto__.name; } console.log("我是" + this.name + ",我想說"+content); }; /** * 宣告一個鳥類 * @constructor */ function Bird(){} // 設定鳥類繼承動物類 Bird.prototype = new Animal(); // 設定superClass儲存父類的方法屬性 Bird.prototype.superClass = new Animal(); // 設定鳥類的name屬性 Bird.prototype.name = "鳥類"; // 設定鳥類自己的 say 方法 Bird.prototype.say = function(){ console.log("這裡是Bird類的say方法!"); }; /** * 宣告一個烏鴉類 * @constructor */ function Crow(){} // 設定烏鴉類繼承鳥類 Crow.prototype = new Bird(); // 設定superClass儲存父類的方法屬性 Crow.prototype.superClass = new Bird(); Crow.prototype.say = function(){ console.log("烏鴉在此!"); } // 例項化一個烏鴉物件 var c = new Crow(); // 呼叫自身原型的say方法 c.say(); // --> "烏鴉在此!" // 呼叫父類Bird的say方法 c.superClass.say(); // --> "這裡是Bird類的say方法!" // 直接呼叫最大的父類Animal的say方法(方法中的this指向Animal) c.superClass.superClass.say("我是一隻烏鴉"); // --> "我是動物類,我想說我是一隻烏鴉" // 用call呼叫最大的父類Animal的say方法(方法中的this指向c,但此時c並沒有name屬性,所以this.name用的是Bird的name) c.superClass.superClass.say.call(c,"我是一隻烏鴉"); // --> "我是鳥類,我想說我是一隻烏鴉" // 給當前物件增加name屬性 c.name = "烏鴉本人"; // 還是用call呼叫最大父類Animal的say方法(此時c物件中已經有name屬性); c.superClass.superClass.say.call(c,"我是一隻烏鴉"); // --> "我是烏鴉本人,我想說我是一隻烏鴉"