js面向對象的原型繼承

08-10

js面向對象的原型繼承

2 人贊了文章

很多小夥伴們對於js中的原型繼承都是雲里霧裡的，繼承？what？原型鏈？鏈？什麼是鏈？繼承能幹啥？眼前有一萬個問號飄過，今天，作為前端小白的我也來淺談一下我對於繼承的理解。。。。。。

首先，談一下為啥要學繼承尼？，繼承對於前端而言，又有什麼用途呢？我舉個簡單的例子，如果你在公司里非常「有幸」的接到一個網站維護的項目，這個項目是以前的老員工做的，一眼望去，老員工一個沒在，納尼？這該如何是好？難道我們所有要加的功能都要在原來的他們寫的功能里直接下刀子嗎？NO！有可能你只也可能這個功能里只是加了一些圖片修剪的功能，但卻需要以前的一個功能代碼來支撐，在不動用原來這塊功能代碼的情況下怎麼辦？用繼承來做！即我在新加的功能里需要原來的一塊功能代碼支撐的時候，用繼承的方法去訪問其中的屬性或方法，這就是我們學習繼承的一個作用所在。

在學習繼承的時候，我們要理解一個概念--原型鏈；

原型鏈，顧名思義，就是找原型對象的過程，廢話不多說，上實例：

Person.prototype指的是Person的原型，給原型上加了屬性money和eat方法，p0,p3;p2是構造函數new Person()的實例，實例訪問eat方法，解析器首先會在自身上找，發現自身並沒有eat方法，就隨著原型鏈往上找，找到原型上，原型上有eat方法，就共享了這個這個方法，所以，30行可以輸出bye bye, 31行也可以輸出 bye bye,

如果給p0加上了一個money = 100的屬性，解析器在自身上找，找到了就返回了，但是由於是給實例上加的屬性，所以，並不會影響到原型上的money屬性的值，所以，如果再列印p2.money,結果是9999999；

這是對原型鏈的一個直觀的理解；

那麼，一個函數和另一個函數是怎樣建立通訊聯繫的呢？怎樣訪問到另一個函數的屬性和方法的呢？看一個例子：

function Ipad(){

}

Ipad.prototype.playgame = function(){

console.log( this )

}

new Ipad();

Iphone.prototype = new Ipad();

function Iphone(){

}

Iphone.prototype.phonecall = function(){

}

var p1 = new Iphone();

p1.playgame();

我想讓Ipad的方法，在Iphone里可以繼承，由於一個函數一旦聲名之後，就會有一個原型對象，因為Ipad可能裡面的方法有很多，所以，我們可以用 new Ipad() 給Iphone的原型對象賦值，由於原型對象上的方法和屬性是可以被實例對象共享的，所以，在p1里可以訪問到Ipad函數的方法或屬性，但並不對Ipad的結構或代碼造成改動或破壞，

所以，在P1.playgame()是可以訪問到的，

總結：

其實，原型繼承並不難理解，只要知道了原型對象和原型鏈，就可以知道他的繼承機制是什麼樣子的了，關於更多的繼承的好處還要我們在更多的實戰中去體會，下面就不說了，如果，文中有什麼錯誤的地方還希望同志們指正，大家一起成長...........