JavaScript 原型總結六 繼承

為何用“繼承”為標題,而不用“原型鏈”?

原型鏈如果解釋清楚了很容易理解,不會與常用的java/C#產生混淆。而“繼承”確實常用面嚮對象語言中最基本的概念,但是java中的繼承與javascript中的繼承又完全是兩回事兒。因此,這裡把“繼承”著重拿出來,就為了體現這個不同。

javascript中的繼承是通過原型鏈來體現的。先看幾句代碼

JavaScript 原型總結六 繼承

以上代碼中,f1是Foo函數new出來的對象,f1.a是f1對象的基本屬性,f1.b是怎麼來的呢?——從Foo.prototype得來,因為f1.__proto__指向的是Foo.prototype

訪問一個對象的屬性時,先在基本屬性中查找,如果沒有,再沿著__proto__這條鏈向上找,這就是原型鏈。

看圖說話:


JavaScript 原型總結六 繼承

上圖中,訪問f1.b時,f1的基本屬性中沒有b,於是沿著__proto__找到了Foo.prototype.b。那麼我們在實際應用中如何區分一個屬性到底是基本的還是從原型中找到的呢?大家可能都知道答案了——hasOwnProperty,特別是在for…in…循環中,一定要注意。


JavaScript 原型總結六 繼承

等等,不對! f1的這個hasOwnProperty方法是從哪裡來的? f1本身沒有,Foo.prototype中也沒有,哪兒來的?

它是從Object.prototype中來的,請看圖:

JavaScript 原型總結六 繼承

對象的原型鏈是沿著__proto__這條線走的,因此在查找f1.hasOwnProperty屬性時,就會順著原型鏈一直查找到Object.prototype。

說一個函數的例子吧。

我們都知道每個函數都有call,apply方法,都有length,arguments,caller等屬性。為什麼每個函數都有?這肯定是“繼承”的。函數由Function函數創建,因此繼承的Function.prototype中的方法。不信可以請webstrom老師給我們驗證一下:


JavaScript 原型總結六 繼承


看到了吧,有call、length等這些屬性。那怎麼還有hasOwnProperty呢?——那是Function.prototype繼承自Object.prototype的方法。有疑問可以看看上一節將instanceof時候那個大圖,看看Function.prototype.__proto__是否指向Object.prototype。原型、原型鏈,大家都明白了嗎?


分享到:


相關文章: