基本的用法 把ClassA的一個實例賦值給ClassB ClassB就繼承了ClassA的所有屬性

1 function ClassA(){ 2 this.a='a'; 3 } 4 function ClassB(){ 5 this.b='b'; 6 } 7 ClassB.prototype=new ClassA(); 8 var objB=new ClassB(); 9 for(var p in objB)document.write(p+"<br>");

從原型繼承理論的角度去考慮 js的原型繼承是引用原型 不是復制原型
所以 修改原型會導致所有B的實例的變化

1 function ClassA(){ 2 this.a='a'; 3 } 4 function ClassB(){ 5 this.b='b'; 6 } 7 ClassB.prototype=new ClassA(); 8 var objB=new ClassB(); 9 alert(objB.a); 10 ClassB.prototype.a='changed!!'; 11 alert(objB.a);

?

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

1 function ClassA(){ 2 this.a='a'; 3 } 4 function ClassB(){ 5 this.b='b'; 6 } 7 ClassB.prototype=new ClassA(); 8 var objB1=new ClassB(); 9 var objB2=new ClassB(); 10 objB1.a='!!!'; 11 alert(objB1.a);

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

1 function ClassA(){ 2 this.a=[]; 3 } 4 function ClassB(){ 5 this.b=function(){alert();}; 6 } 7 ClassB.prototype=new ClassA(); 8 var objB1=new ClassB(); 9 var objB2=new ClassB(); 10 objB1.a.push(1,2,3); 11 alert(objB2.a); 12 alert(objB2.a); 13 //所有b的實例中的a成員全都變了！！ 14 //所以 在prototype繼承中 原型類中不能有成員對象！ 所有成員必須是值類型數據（string也可以）

只簡單的這樣設置繼承的確如樓主所說，有不少缺點?？偟膩碚f有四個缺點：

　　缺點一：父類的構造函數不是像JAVA中那樣在給子類進行實例化時執行的，而是在設置繼承的時候執行的，并且只執行一次。這往往不是我們希望的，特別是父類的構造函數中有一些特殊操作的情況下。

　　缺點二：由于父類的構造函數不是在子類進行實例化時執行，在父類的構造函數中設置的成員變量到了子類中就成了所有實例對象公有的公共變量。由于JavaScript中繼承只發生在“獲取”屬性的值時，對于屬性的值是String，Number和Boolean這些數據本身不能被修改的類型時沒有什么影響。但是Array和Object類型就會有問題。
　　缺點三：如果父類的構造函數需要參數，我們就沒有辦法了。

　　缺點四：子類原本的原型對象被替換了，子類本身的constructor屬性就沒有了。在類的實例取它的constructor屬性時，取得的是從父類中繼承的constructor屬性，從而constructor的值是父類而不是子類。

1 //類的繼承-海浪版 2 Function.prototype.Extends = function (parentClass){ 3 var Bs = new Function(); 4 Bs.prototype = parentClass.prototype; 5 this.prototype = new Bs(); 6 this.prototype.Super = parentClass; 7 this.prototype.constructor = this; 8 }

?

?

?

?

?

先來看看用new形式創建對象的過程：

1	//以func()作為構造函數創建一個對象obj

2	var?obj=new?func();

這個過程是這樣的：javascript引擎首先遇到了關鍵字new后，馬上開辟了一塊內存，創建了一個空對象(并且將this指向這個對象)，接著執行構造函數func()對這個空對象進行構造(構造函數里面有什么屬性和方法都一一給這個空白對象裝配上去，這也就是為什么構造函數叫“構造函數”的原因)。

其實，new和執行構造函數之間還有一件事引擎沒有顯式地告訴我們，而是偷偷地做了，這就是給這個空對象賦予prototype對象。

這里不得不提到一個跟prototype一樣同樣是系統保留而且同樣重要的東西：__proto__

__proto__是一個對象自動擁有的內置屬性（請注意：prototype是函數的內置屬性，__proto__是對象的內置屬性，但它們最終都指向同一個對象，就是那個用來被繼承的對象），用chrome和FF都可以訪問到一個對象的__proto__屬性，IE就不可以。

正是一個對象的__proto__指向著這個對象的構造函數的prototype對象，才使這個對象認識了它的構造函數的prototype對象，并擁有了這個prototype對象的屬性和方法。

所以var obj=new func()這個過程更具體是這樣的：

javascript解析引擎遇到new后，開辟一片內存并創建了一個空對象，并且將“this”指向這個空對象

javascript解析引擎將這個空對象的__proto__指向后面緊跟著的構造函數默認的prototype對象（一指向到prototype對象后，解析引擎就知道了“噢，這個對象要擁有這個prototype對象的屬性和方法了”）

javascript解析引擎執行構造函數體內的代碼，也就正式開始對這個空對象進行構造（或者說裝配）的過程了(this.name="xxx",this.sayHello=function(){...}等等)

對象被構造裝配好，并賦值到等號左邊的變量。

轉載于:https://www.cnblogs.com/piaozhe116/p/5511594.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的js - prototype 继承的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。