ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript の非コンストラクター継承

JavaScript の非コンストラクター継承

PHPz
リリース: 2018-10-15 15:32:47
オリジナル
1154 人が閲覧しました

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. ブートストラップ チュートリアル

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート