不錯的一篇關于javascript-prototype繼承

2019-11-21 01:56:27

字體：大中小

來源：轉載

供稿：網友

1.最基本的用法把ClassA的一個實例賦值給ClassB，
ClassB就繼承了ClassA的所有屬性。
代碼入下：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

2.從原型繼承理論的角度去考慮，
js的原型繼承是引用原型，不是復制原型，
所以，修改原型會導致所有B的實例的變化。
代碼如下：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

3.然而子類對象的寫操作只訪問子類對象中成員，
它們之間不會互相影響，因此，
寫是寫子類讀是讀原型（如果子類中沒有的話）。

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

4.每個子類對象都執有同一個原型的引用，
所以子類對象中的原型成員實際是同一個。

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

5.構造子類時原型的構造函數不會被執行

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

6.接下來是致命的，在子類對象中訪問原型的成員對象：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

7.所以在prototype繼承中原型類中不能有成員對象！所有成員必須是值類型數據（string也可以）
用prototype繼承有執行效率高，不會浪費內存，為父類動態添置方法后子類中馬上可見等的優點。

8.prototype繼承是通過把子類的原型對象（prototype）設置成父類的一個實例來進行繼承的。

9.prototype繼承也有四個比較明顯的缺點：
　　缺點一：父類的構造函數不是像JAVA中那樣在給子類進行實例化時執行的，而是在設置繼承的時候執行的，并且只執行一次。這往往不是我們希望的，特別是父類的構造函數中有一些特殊操作的情況下。
　　缺點二：由于父類的構造函數不是在子類進行實例化時執行，在父類的構造函數中設置的成員變量到了子類中就成了所有實例對象公有的公共變量。由于JavaScript中繼承只發生在“獲取”屬性的值時，對于屬性的值是String，Number和Boolean這些數據本身不能被修改的類型時沒有什么影響。但是Array和Object類型就會有問題。
　　缺點三：如果父類的構造函數需要參數，我們就沒有辦法了。
　　缺點四：子類原本的原型對象被替換了，子類本身的constructor屬性就沒有了。在類的實例取它的constructor屬性時，取得的是從父類中繼承的constructor屬性，從而constructor的值是父類而不是子類。

10.可以針對prototype的缺點進行改造
比如把它寫成Function對象的一個方法，這樣用的時候方便。

Function.prototype.Extends = function (parentClass)
{
  var Bs = new Function();
  Bs.prototype = parentClass.prototype;
  this.prototype = new Bs();
  this.prototype.Super = parentClass;
  this.prototype.constructor = this;
}

希望各位 js 高手能把更好的方式介紹給大家
針對第3，6個

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

針對繼承，
Array.prototype 就不能繼承 ClassA，ClassB

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

帶參數的繼承問題

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：非常不錯的三種簡潔的Tab導航（網頁選項卡）簡析

下一篇：textarea保留換行的注意事項