ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptで継承を実装するにはどうすればよいですか? jsで継承を実装するいくつかの方法をまとめます。

JavaScriptで継承を実装するにはどうすればよいですか? jsで継承を実装するいくつかの方法をまとめます。

零下一度
リリース: 2017-05-08 10:28:20
オリジナル
1743 人が閲覧しました

これまでに学んだ知識を振り返ると、大きく分けて2つのカテゴリに分けられます:

1. コンストラクターの作業に基づくパターン。

2. オブジェクトに基づく作業モード。

3. プロトタイプを使用するかどうか

4. 属性コピーを行うかどうか。

5.両方持つ(プロトタイプ属性コピーを実行)

これまでの知識をすべて復習しましょう:

1.プロトタイプチェーンメソッド(伝統の模倣):

child.prototype = new Parent();
ログイン後にコピー

モード:コンストラクターのパターンに基づく プロトタイプのチェーンパターンを使用します。

技術的メモ: デフォルトの 継承 メカニズムを使用すると、メソッドとプロパティの再利用可能な部分をプロトタイプ チェーンに移行し、再利用不可能なプロパティとメソッドを独自のプロパティとして設定できます。

2. プロトタイプからの継承のみ:

Child.prototype = Parent.prototype
ログイン後にコピー

モード: コンストラクターベースの作業モード、プロトタイプコピーモード (プロトタイプチェーンはなく、すべてのオブジェクトがプロトタイプを共有します)。

技術的メモ: このモードは継承関係を構築するために新しいオブジェクト インスタンスを必要としないため、効率の点でパフォーマンスが向上します。

プロトタイプチェーン上のクエリも、チェーンが全くないので高速です。

欠点は、子オブジェクトは親オブジェクトの参照に過ぎないため、子オブジェクトへの変更が親オブジェクトに影響することです。

3. 一時コンストラクターメソッド:

function extend(Child, parent){    var F = fucntion(){};
    F.prototype = Parent.prtotype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;  
}
ログイン後にコピー

モード: プロトタイプチェーンモードを使用するコンストラクターベースの作業モード。

技術的注意: このモードはモード 1 とは異なります。親オブジェクトのプロトタイプ プロパティのみを継承しますが、親オブジェクト自体のプロパティ (つまり、親コンストラクターでこれに追加されたプロパティ) は継承しません。

さらに、このモードは親オブジェクトにアクセスする方法も提供します。 (つまり、usber 属性経由)。

4. プロトタイプのコピー方法:

function extend2(Child, Parent){    var p = Parent.prototype;    var c = Child.prototype;    for(var i  in p){
        c[i] = p[i];
    }
    c.uber = p;
}
ログイン後にコピー

モード: コンストラクターの動作モード、属性コピー モードに基づいて、プロトタイプ モードを使用します。

技術的なメモ: 親オブジェクトのプロトタイプ内のすべての内容を子オブジェクトのプロトタイプ プロパティに変換します。

継承のためにオブジェクトの別個のインスタンスを作成する必要はありません。

試作品のチェーン自体も短くなりました。

5. 完全な属性コピー方法:

function extendCopy(p){    var c = {};    for(var i in p){
        c[i] = p[i];
    }
    c.uber  = p;    return c;
}
ログイン後にコピー

モード: オブジェクトベースの作業モード、属性コピーモード。

技術的メモ: 非常にシンプルで、プロトタイプのプロパティは使用されません。

6. ディープコピーメソッド:

function deepCopy(Parent, Child){
    Child = Child || {};    for(var i in Parent){        if(Parent.hasOwnProprty(i)){             if(typeof Parent[i] === 'Object'){
                 Child[i] = Array.isArray(p[i]) ? [] : {};
                 deepcopy(Parent[i], Child[i]);  
             }else{
                 Child[i] = Parent[i]
             }
        }
    }    return Child;
}
ログイン後にコピー

モード: オブジェクトベースの作業モード、属性コピーモード。

技術的なメモ: 5 と同じですが、すべてのオブジェクトは値によって渡されます。

7. プロトタイプ継承メソッド:

function object(o){    function F(){};
    F.prototype = o;    return new F();
}
ログイン後にコピー

モデル: オブジェクト作業モードに基づき、プロトタイプチェーンモードに基づきます。

技術的なメモ: クラス模倣メカニズムを放棄し、オブジェクト間の継承関係を直接構築します。有 プロトタイプ本来の利点を最大限に発揮します。

8. 拡張および強化モード:

function objectPlus(o, stuff){    var n;    function(){};
    F.prototype = o;
    n = new F();
    n.uber = o;    for(var i in stuff){
        n[i] = stuff[i]
    }    return n;
}
ログイン後にコピー
モード: プロトタイプチェーンモード、属性コピーモードを使用するオブジェクトベースの作業モード。

技術的なメモ: このメソッドは実際には、プロトタイプの継承とプロトタイプのコピーのハイブリッド アプリケーションであり、関数を通じてオブジェクトの継承と拡張を一度に完了します。

9. 多重継承メソッド:

function multi(){    var n = {}, stuff, j = 0;
    len = arguments.length;    for(j=0;j<len;j++){
        stuff = argument[j];        for(var i in stuff){
            n[i] = stuff[i];
        }
    }    return n;
}
ログイン後にコピー
モード: オブジェクトベースの作業モード、属性コピーモード。

技術的なメモ: ハイブリッド プラグイン継承の実装。

彼女は、親オブジェクトのすべての属性を、継承順序に従って順番にコピーします。

10. 寄生継承メソッド:

function parasite(victim){    var that = object(victim);
    that.more = 1;    return that;
}
ログイン後にコピー
モード: オブジェクト作業モードに基づき、プロトタイプチェーンモードを使用します。

技術的なメモ: このメソッドは、コンストラクターのような関数を通じてオブジェクトを作成します。

この関数は、対応するオブジェクトのコピーを実行し、それを展開して、コピーを返します。

11. コンストラクターの借用方法:
function Child{
    Parent.apply(this, arguments);
}
ログイン後にコピー
モード: コンストラクターベースの作業モード。

技術的注意: このメソッドは、親オブジェクトの独自のプロパティ (つまり、コンストラクター内の this.properties とメソッド) のみを継承できます。

方法1と組み合わせることができます。

     她便于我们的子对象继承某个对象的具体属性时,该方式是最简单的方式。

12.构造器借用与属性拷贝法:

function Child(){
    Parent.apply(this, argument);
}
extend2(Child, Parent);
ログイン後にコピー

所属模式:基于构造器的工作模式,使用原型链模式,属性拷贝模式。

技术注解:她允许我们在不重复使用调用对象构造器的情况下同时继承自身属性和原型属性。

额,持续更新了这么多天,大概也就这么多了,能力有限,多多包涵!

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱(3)-JavaScript视频教程

以上がJavaScriptで継承を実装するにはどうすればよいですか? jsで継承を実装するいくつかの方法をまとめます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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