Javascriptオブジェクト指向プログラミング(3) 非コンストラクタ関数の継承

Javascriptオブジェクト指向プログラミング(3) 非コンストラクタ関数の継承_jsオブジェクト指向

WBOY

リリース： 2016-05-16 18:02:58

オリジナル

882 人が閲覧しました

今日は最終回で、コンストラクターを使わない「継承」を紹介します。
1.「非コンストラクター」の継承とは何ですか?
たとえば、「中国語」というオブジェクトがあります。

コードをコピーコードは次のとおりです:

 
 var Chinese = { 
 国家: '中国' 
 }; 

「ドクター」という別のオブジェクトがあります。

コードをコピーコードは次のとおりです:

 
 var Doctor ={ 
キャリア: 'Doctor' 
 } 

「Doctor」に「中国語」を継承させるにはどうすればよいでしょうか。つまり、「中国の医師」のオブジェクトを生成するにはどうすればよいでしょうか?
ここで、これら 2 つのオブジェクトはコンストラクターではなく通常のオブジェクトであり、コンストラクターメソッドを使用して「継承」を実装できないことに注意してください。
2. Object() メソッド
json 形式の発明者である Douglas Crockford は、これを実行できる object() 関数を提案しました。

コードをコピーコードは次のとおりです。

 
 function object(o) { 
 function F( ) {} 
 F.prototype = o; 
 return new F(); 
 } 

この object() 関数は実際には次のことを行うだけです。 handle オブジェクトのプロトタイプ属性は親オブジェクトを指し、それによって子オブジェクトを親オブジェクトに接続します。
を使用する場合、最初のステップは親オブジェクトに基づいて子オブジェクトを生成することです:
var Doctor = object(中国語)
次に、子オブジェクト自体の属性を追加します:
Doctor .career = 'Doctor';
この時点で、子オブジェクトは親オブジェクトの属性を継承しています。
alert(Doctor.nation); //中国
3. 浅いコピー
「プロトタイプチェーン」を使用する以外に、次のような別の考え方もあります。親オブジェクトはすべて子オブジェクトにコピーされ、継承も可能です。
次の関数はコピーしています:

コードをコピーしますコードは次のとおりです:

 
 function extendCopy(p) { 
 var c = {}; 
 for (var i in p) { 
 c[i] = p[i]; } 
 c.uber = p; 
 return c; >
 コードは次のとおりです。

 

Doctor.career = 'Doctor'; (Doctor.nation); // 中国

しかし、このようなコピーには問題があります。つまり、親オブジェクトのプロパティが配列または別のオブジェクトと等しい場合、実際には、子オブジェクトが取得するのはメモリアドレスのみであり、実際のコピーではないため、親オブジェクトが改ざんされました。ご覧ください。中国語に「出生地」属性を追加します。その値は配列です。 Chinese.birthPlaces = ['Beijing','Shanghai','Hong Kong']; extendCopy() 関数を通じて、Doctor は中国語を継承します。 var Doctor = extendCopy(Japanese); 次に、Doctor の「出生地」の都市を追加します。 Doctor.birthPlaces.push('Xiamen');

何が起こったでしょうか?中国人の「出身地」も変わった！

alert(Doctor.birthPlaces); //北京、上海、香港、厦門
alert( Chinese.birthPlaces) //北京、上海、香港、厦門
つまり、extendCopy() はコピーするだけです。データの基本的なタイプであるため、このコピーを「浅いコピー」と呼びます。これは、初期の jQuery で継承が実装された方法です。 

4. ディープコピー 

いわゆる「ディープコピー」とは、本当の意味で配列やオブジェクトをコピーする機能です。実装は難しくなく、「浅いコピー」を再帰的に呼び出すだけです。

コードをコピー

コードは次のとおりです。

Function deepCopy(p, c) { var c = c || {};
for (var i in p) { if (typeof p[i] === 'object') {
c[i] = (p [i] .constructor === 配列) ? [] : {};

deepCopy(p[i], c[i]); c[i] = p[i] ]; } } リターン }

使用するときは次のように記述します:
var Doctor = deepCopy(Japanese);
次に、値を配列として親オブジェクトに属性を追加します。次に、子オブジェクトのこのプロパティを変更します:

コードをコピーしますコードは次のとおりです:

 
 birthPlaces = ['Beijing','Shanghai','Hong Kong']; 
Doctor.birthPlaces.push('Xiamen'); このとき、親はオブジェクトは影響を受けません。 

コードをコピーしますコードは次のとおりです。 alert(Doctor.birthPlaces); //北京、上海、香港、厦門

alert(Japanese.birthPlaces); //北京、上海、香港

 
現在、jQuery ライブラリはこの継承メソッドを使用しています。 
(終わり)