javascript原型式繼承

標籤：

之前的文章裡有提到過javascript類式繼承，那種繼承方式極大的方便了其他語言（非javascript）程式員使用javascript來實現繼承，但是有缺點，就是建立了一個非必要的建構函式，那這篇文章我們來談一談具有javascript自身特色的原型式繼承。

我們先來看一看下面的代碼：

var Car = {    color: ‘red‘,    size: ‘big‘,    getAttr: function() {        return this.color    }}var car1 = Object.create(Car)car1.color = ‘blue‘car1.brand = ‘BYD‘console.log(car1.color) //blueconsole.log(car1.brand) //BYDconsole.log(Car.color) //redconsole.log(Car.brand) //undefinedvar car2 = Object.create(Car)car2.getAttr = function() {    return this.size}console.log(car2.getAttr()) //bigconsole.log(Car.getAttr()) //redconsole.log(car1.getAttr()) //blue

上面的代碼就是原型式繼承最簡單的方式，“子類”繼承了“父類”的屬性，修改“子類”的屬性也沒有影響到“父類”，“子類”之間也是相安無事互不干擾，完美實現了繼承。這樣繼承的好處就是比類式繼承少了一層建構函式

當然create這個方法是es5中出現的，ie6 7 8是不支援的哦，下面是一個相容的方法，讓低版本ie也來實現create。

 

if (!Object.create) {    Object.create = function(o) {        function F() {}        F.prototype = o        return new F()    }}

上述代碼的意思就是，首先聲明一個建構函式，該建構函式的原型指向需要繼承的對象，最後返回執行個體化後的建構函式，其實這個函數也很好的詮釋了原型式繼承的原理，“父類”的屬性存在於“子類”的原型上，如果“子類”自己重寫了屬性或者方法，那就直接用“子類”自身的屬性或者方法，並且不會影響到“父類”，如果調用了“子類”沒有的屬性或者方法，那麼由於原型鏈，我們順藤摸瓜就找到了“父類”的屬性或方法，如果再沒有就game over了。

其實兩種繼承方式大同小異，玩的都是原型鏈，只是原型式繼承更符合javascript的語言特點，類式繼承更偏向於“類”的概念。

 

javascript原型式繼承