JavaScriptでのプロトタイプ継承について考える

7160 ワード

回転元:http://www.jb51.net/article/30881.htm
まず、従来の継承コードを見てみましょう. 
 
  
//  
function Father(){ 
this.name = " "; 

Father.prototype.theSuperValue = ["NO1","NO2"]; 
//  
function Child(){ 

//  
Child.prototype = new Father(); 
//  
Child.prototype.theSuperValue.push(" "); 
//  
var theChild = new Child(); 
console.log(theChild.theSuperValue); //["NO1","NO2"," "] 
//  
var theFather = new Father(); 
console.log(theFather.theSuperValue); //["NO1","NO2"," "] 

上のコードでは、サブクラスChildのプロトタイプオブジェクトが親Fatherのインスタンス(new Father()であることに注意します.ここでは、new Father()オブジェクトのtheSuperValueプロパティを呼び出します.new Father()オブジェクトにはこのプロパティ(nameプロパティのみ)がないため、プロトタイプチェーンに沿ってプロトタイプオブジェクト(Father.prototype)に向かいます.で検索して、見つけたら配列であり、参照タイプであることがわかります.この配列に「修正」という文字列を追加します. その後、ChildのインスタンスオブジェクトtheChildを新規作成し、theChildがtheSuperValueプロパティを呼び出すと、まず自分の中にこのプロパティがないと、そのプロトタイプオブジェクト(new Father)の中を探しに行きますが、残念ながらここにもありません.次にnew Father()のプロトタイプの中を探しに行きます.OK、Father.prototypeの中でこの配列を見つけました. 次に、FatherのインスタンスオブジェクトtheFatherを作成しました.同様に、Father.prototypeでは、この参照タイプの配列["NO 1"、"NO 2"、"修正]を見つけました.(もちろん、配列はすべて参照タイプです!) 上の記述を通じて、もともと原型チェーンの概念を理解していた友达はくだらない話だと思っていましたが、実は私もほほほで、次は似たような例を見てみましょう. 
 
  
//  
function Father() { 
this.name = " "; 

Father.prototype.theSuperValue = ["NO1", "NO2"]; 
//  
function Child() { 

//  
Child.prototype = new Father(); 
//  
Child.prototype.theSuperValue = [" "] 
//  
var theChild = new Child(); 
console.log(theChild.theSuperValue); 
//  
var theFather = new Father(); 
console.log(theFather.theSuperValue); 

上のコードを見てみましょう.このコードと上のコードの小さな違いを特別な紫で表記しましたが、結果は「巨大」に変化しました.次のスクリーンショットを参照してください.

なぜ私が大きな変化を言ったのか、私たちが「共通属性の再利用」から「共通属性を上書きし、独自の特色属性を確立する」に移行したからです.ここでは配列を用いて実証したが,第2のケースではFunctionで親をサブクラスで上書きする方法がよく用いられる.2番目のセグメントコードでは、割り当てオペレータである紫のコードの前の"="記号に注目する必要があります.Child.prototypeおよびnew Father()オブジェクトに対してこの付与オペレータを呼び出すと、次のtheChildインスタンスでtheSuperValueを呼び出すと、当然新しいプロパティ値が返されます[「上書きコードです」]. しかし、親インスタンスtheFatherオブジェクトを新しく作成すると、そのオブジェクトのtheSuperValueプロパティを呼び出すと、オブジェクトには存在しません.これはなぜですか.私たちがさっきカバーしていたのはFatherオブジェクトnew Father()だったからです.Fatherクラスではないので、Fater()コンストラクション関数で作成された新しいオブジェクトtheFatherには新しい属性は含まれていません.もちろん、次のことはよくわかりますが、プロトタイプチェーンに沿って上を探して、OK、Father.prototypeで見つけました.私たちが最初に定義した配列です. 上記の2つの例では、JSでプロトタイプが提供する継承機能を使用する場合、特にサブオブジェクトを使用してプロトタイプメソッド、オブジェクトを操作する場合、「=」番号付与と参照呼び出しの2つの異なる操作を覚えています.これは、完全に異なる結果をもたらすためです.
興味のある記事:
JavaScriptに基づいて継承メカニズムを実現する構造関数メソッドオブジェクトの偽装の使用の詳細
JavaScriptに基づいて継承メカニズムの呼び出しcall()とapply()を実現する方法の詳細
JavaScriptに基づく継承メカニズムのプロトタイプチェーン(prototype chaining)の詳細
Javascriptにおけるprototype属性の継承を実現する原理図
JavaScriptオブジェクトの作成と継承の原理インスタンスの解剖
JavaScriptのオブジェクト指向と継承に関する有利な初心者学習
JAvascript継承なぜ継承するのか
Javascript継承(上)——オブジェクト構築の紹介
Javascriptのプロトタイプ継承について
JavaScriptオブジェクト向けPrototypesと継承
JAvascriptクラス式継承の新しい試み
JAvascriptがどのように継承されているかの紹介
JAvascrip継承の小例について