基本的用法 把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繼承中 原型類中不能有成員對象！ 所有成員必須是值類型數(shù)據(jù)（string也可以）

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

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

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

　　缺點四：子類原本的原型對象被替換了，子類本身的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形式創(chuàng)建對象的過程：

1	//以func()作為構(gòu)造函數(shù)創(chuàng)建一個對象obj

2	var?obj=new?func();

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/piaozhe116/p/5511594.html

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。