いくつかの JS 継承スタイルの共有

この記事では主に、プロトタイプ継承、借用コンストラクター継承、組み合わせ継承、寄生継承、寄生組み合わせ継承など、いくつかのjs継承スタイルを紹介します。皆様のお役に立てれば幸いです。

プロトタイプ継承

は、事前にコンストラクターを定義することなく継承を実装できます。その本質は、指定されたオブジェクトの浅いコピーを実行することです。コピーしたコピーはさらに変更することもできます

function parent(o) {
    this.username = 'father';    this.array = [1,2,3]
}function child() {
    this.age = 20}
child.prototype = new Parent();

欠点:
1. 親クラスとサブクラスの共通のプロトタイプ チェーン上の変数を参照します。
2. サブクラスのインスタンスを作成する場合、親クラスのコンストラクターにパラメーターを渡すことはできません。

コンストラクターの継承を借用する

サブクラスのインスタンスを拡張するために、親クラスのコンストラクターを借用します。親クラスの属性をコピーすることと同じです

function Parent(name,arr) {
    this.name = name;    this.arr = arr;    this.run = function() {
        console.log('run function')
   }
}function Child(name, arr) {
    this.age = 20;
    Parent.call(this,name,arr);
}var obj1 = new Child('zhang san', [1,2,3]);var obj2 = new Child('zhang san', [1,2,3]);
obj1.arr[0] = 'hello'console.log(obj1.arr[0]); // helloconsole.log(obj2.arr[0]); // 1

利点:
1. サブクラスのインスタンスを作成するときに、親クラスの参照属性を共有する問題を解決します。親クラスのコンストラクターにパラメーターを追加する
欠点:
1. 再利用を実現するために、各サブクラス インスタンスに新しい実行関数があり、インスタンスにオブジェクトが多すぎる場合、メモリ消費が大きくなりすぎます

結合継承により回避されます。プロトタイプチェーンと借りたコンストラクターの欠点を改善し、それらを統合する利点。

function Parent(name,arr) {
    this.name = name;    this.arr = arr;
}
Parent.prototype.run = function() {
    console.log('run function');
}function Child(naem,arr) {
    this.age = '20';
    Parent.call(this,name,arr);        // 借用构造函数 ==》 核心语句   1》不能复用}
Child.prototype = new Parent(); // 原型链 ==》 核心语句  1》父构造函数不能传递参数 2》arr是引用属性，一个改变，互相影响

利点:

1. 参照属性の共有の問題がない

2. パラメータを渡すことができる

3. メソッドを再利用できる
欠点:
サブクラスのプロトタイプに親クラスの属性の重複コピーがある

Parasite スタイルの継承

は、プロトタイプの継承と非常によく似ています。また、オブジェクトまたは何らかの情報に基づいてオブジェクトを作成し、そのオブジェクトを強化して、最終的にそのオブジェクトを返します。

function createAnother(original) {
    var clone = Object.create(original); //
    clone.sayHi = function() {
        console.log(Hi) 
   }   return clone;var Person = {
    name: 'Blob',
    friends: ['Shelby', 'Court', 'Van'];
}var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // Hi

寄生結合継承

結合継承は、JS で最も一般的に使用される継承パターンです。結合継承の最大の問題は、どのような状況であっても、コンストラクターが 2 回呼び出されることです。1 回はサブタイプのプロトタイプを作成するとき、もう 1 回はコンストラクターが呼び出されることです。それ以外の場合はサブタイプ コンストラクター内。

function beget(obj){   // 生孩子函数 beget：龙beget龙，凤beget凤。
    var F = function(){};
    F.prototype = obj;    return new F();
}function Super(){
    // 只在此处声明基本属性和引用属性
    this.val = 1;    this.arr = [1];
}//  在此处声明函数Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};//Super.prototype.fun3...function Sub(){
    Super.call(this);   // 核心
    // ...}var proto = beget(Super.prototype); // 核心proto.constructor = Sub;            // 核心Sub.prototype = proto;              // 核心var sub = new Sub();
alert(sub.val);
alert(sub.arr);

関連する推奨事項:

JS継承について詳しく説明する

JS継承の実装コード_JavaScriptスキル

JS継承--プロトタイプチェーン継承とクラス継承_基礎知識

以上がいくつかの JS 継承スタイルの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。