javascript oop編程 — 實現繼承的三種形式

標籤：js 繼承

javascript  oop編程  — 實現繼承的三種形式[1]

（1）類比類的方式， 我們都知道js是原型繼承機制，不存在class和instance分離的這種方式

假設，我們有兩個類

function  Animal(){

this.name = “animal”;

this.eat = function(){

consle.log(“eating");

 }

 }

function Cat(){

this.say = function(){

console.log(“miao miao!!");

 }

 }

如果我們想要Cat 擁有Animal 的name屬性和eat方法，只需要

Cat.prototype = new Animal();

但是這不是一個好的實踐，想想看，如果還有一個Duck類，難道還要new一個Animal來繼承嗎，如此繼續嗎？

正確的作法是將通用的內容放到prototype裡面，所有的子嗣，只需要將自己的prototype指向一個通用的prototype來實現繼承。

如下，

Animal.prototype = {

name:”animal”,

eat:function(){

console.log(“eating");

 }

 }

Cat.prototype = Animal.prototype;

ES5 為我們提供了一個通用的繼承函數，通過一個指定的原型建立一個對象

Object.create   很遺憾並不是所有瀏覽器都支援，手工改一下

var inherit = Object.create || function(proto){

        function F(){};

F.prototype = proto;

return new F

 }

上面的例子可以寫成

Cat.prototype = inherit(Animal.prototype);

——————————

上面這樣做，會出現Cat.prototype = F 的情況，我們需要撥亂反正，不如再寫一個封裝，專門來實現繼承

var  extend = function(Child,Parent){

Child.prototype = inherit(Parent.prototype);

Child.prototype.constructor = Child;

 }

javascript oop編程 — 實現繼承的三種形式