Javascriptの非コンストラクタ継承例の詳細説明

この記事では、コンストラクターを使用せずに「継承」を実装する方法を紹介します。よく理解すれば、非常に簡単に理解できるでしょう。

1.「非コンストラクター」継承とは何ですか?

たとえば、「中国語」というオブジェクトがあります。

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

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

　var Doctor ={ career:'医生' }

「Doctor」に「 Chinese 」を継承させるにはどうすればよいでしょうか?つまり、「 Chinese Doctor 」のオブジェクトを生成するにはどうすればよいでしょうか?

ここで、これら 2 つのオブジェクトはコンストラクターではなく通常のオブジェクトであり、コンストラクター メソッドを使用して「継承」を実現できないことに注意してください。

2. Object() メソッド

json 形式の発明者である Douglas Crockford は、これを実行できる object() 関数を提案しました。

function object(o) {

　　　　function F() {}

　　　　F.prototype = o;

　　　　return new F();

　　}

object() 関数が実際に行うことは 1 つだけです。それは、子オブジェクトのプロトタイプ属性を親オブジェクトにポイントし、それによって子オブジェクトと親オブジェクトを接続することです。

それを使用する場合、最初のステップは、親オブジェクトに基づいて子オブジェクトを生成することです:

var Doctor = object(Chinese);

次に、子オブジェクト自体の属性を追加します:

Doctor.career = '医生';

この時点で、子オブジェクトは次の属性を継承しています。親オブジェクト。

alert(Doctor.nation); //中国

3. 浅いコピー

「プロトタイプチェーン」を使う以外にも、親オブジェクトの属性をすべて子オブジェクトにコピーするという考え方もあります。

次の関数はコピーを作成しています:

　　function extendCopy(p) {

　　　　var c = {};

　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　 }

　　　　c.uber = p;

　return c; }

使用する場合は次のように記述します:

var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国

しかし、このようなコピーには問題があります。つまり、親オブジェクトのプロパティが配列または別のオブジェクトと等しい場合、実際には、子オブジェクトが取得するのはメモリ アドレスのみであり、実際のコピーではないため、親オブジェクトが改ざんされました。

ご覧ください。中国語に「出生地」属性を追加します。その値は配列です。

Chinese.birthPlaces = ['北京','上海','香港'];

extendCopy() 関数を通じて、Doctor は中国語を継承します。

var Doctor = extendCopy(Chinese);

次に、ドクターの「出身地」の都市を追加します:

Doctor.birthPlaces.push('厦门');

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

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 === Array) ? [] : {};

　　　　　　　　deepCopy(p[i], c[i]);

　　　　　　} else {

　　　　　　　　　c[i] = p[i];

　　　　　　}
}

　　　　return c; }

使用するときは、次のように記述します:

var Doctor = deepCopy(Chinese);

次に、値を配列として親オブジェクトに属性を追加します。次に、子オブジェクトのこの属性を変更します:

Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门');

この時点では、親オブジェクトは影響を受けません。

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港

現在、jQuery ライブラリはこの継承方法を使用しています。

以上がJavascriptの非コンストラクタ継承例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。