ホームページ > 記事 > ウェブフロントエンド > JavaScript の非コンストラクター継承
1.「非コンストラクター」の継承とは何ですか?
たとえば、「中国語」というオブジェクトがあります。
コードは次のとおりです。
var Chinese = { nation:'中国' };
「Doctor」というオブジェクトもあります。
コードは次のとおりです。
var Doctor ={ career:'医生' }
「医師」に「中国語」を継承させるにはどうすればよいですか。つまり、「中国の医師」を生成するにはどうすればよいですか。 「」の対象物?
ここで、これら 2 つのオブジェクトはコンストラクターではなく通常のオブジェクトであり、コンストラクター メソッドを使用して「継承」を実装できないことに注意してください。
2. Object() メソッド
json 形式の発明者である Douglas Crockford は、これを実行できる object() 関数を提案しました。少し。
コードは次のとおりです。
function object(o) { function F() {} F.prototype = o; return new F(); }
この object() 関数は、実際には子オブジェクトのプロトタイプ属性をポイントすることだけを行います。したがって、子オブジェクトを親オブジェクトに接続します。
これを使用する場合、最初のステップは親オブジェクトに基づいて子オブジェクトを生成することです:
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; }
使用する場合は次のように記述します:
コードは次のとおりです。
var Doctor = extendCopy(Chinese); Doctor.career = '医生'; alert(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 === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[i]; } } return c; }
使用する場合は、次のように記述します。
var Doctor = deepCopy(English)
add 値が配列であるプロパティ。次に、子オブジェクトのこの属性を変更します:
コードは次のとおりです:
Chinese.birthPlaces = ['北京','上海','香港']; Doctor.birthPlaces.push('厦门');
この時点では、親オブジェクトは影響を受けません。
コードは次のとおりです。
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门 alert(Chinese.birthPlaces); //北京, 上海, 香港
現在、jQuery ライブラリはこの継承メソッドを使用しています。
【おすすめ関連チュートリアル】
1. JavaScript ビデオチュートリアル
2. JavaScript オンラインマニュアル
3. ブートストラップ チュートリアル