jsコンストラクターの継承方法とメリット・デメリットを詳しく紹介（フルコード）

この記事はコンストラクターの継承(クラスの継承)を中心に紹介しており、ES5やES6の紹介も含まれておりますので、どうしても無理な箇所や間違った箇所があると思いますので、ご指摘・ご指摘いただければ幸いです。 ~

js Constructor

Prototype

まず、以下のことをよりよく理解するために、インスタンスの属性/メソッドとプロトタイプの属性/メソッドを簡単に紹介します

function Persion(name){
    this.name = name;                                       // 属性
    this.setName = function(nameName){                      // 实例方法
        this.name = newName;
    }
}
Persion.prototype.sex = 'man';                              // 向 Persion 原型中追加属性（原型方法）

var persion = new Persion('张三');                          // 此时我们实例化一个persion对象，看一下name和sex有什么区别

コンソールで永続性を表示し、次のように出力します。
プロトタイプによって追加された元の属性は、インスタンス オブジェクトのプロトタイプ チェーンに表示されます。
各オブジェクトには組み込みの proto オブジェクトが含まれます。現在のオブジェクトで属性が見つからない場合は、その属性が検索されます。プロトタイプ チェーン (つまり、プロトタイプ チェーン)

us 以下の例を見てみましょう
注: コンストラクターには、通常、配列形式の参照属性がほとんどありません。ほとんどの場合、それらは基本属性 + メソッドです。

function Animal(n) {                                       // 声明一个构造函数
    this.name = n;                                         // 实例属性
    this.arr = [];                                         // 实例属性（引用类型）
    this.say = function(){                                 // 实例方法
        return 'hello world';
    }
}
Animal.prototype.sing = function() {                       // 追加原型方法  
    return '吹呀吹呀，我的骄傲放纵~~';
}
Animal.prototype.pArr = [];                                // 追加原型属性（引用类型）

次に、インスタンスのプロパティ/メソッドとプロトタイプのプロパティ/メソッドの違いを見てみましょう
プロトタイプ オブジェクトの目的は、各インスタンス オブジェクトの共有メソッドとプロパティを保存することです。これは単なる通常のオブジェクトです。また、すべてのインスタンスは同じプロトタイプ オブジェクトを共有するため、インスタンスのメソッドやプロパティとは異なり、プロトタイプ オブジェクトのコピーは 1 つだけ存在します。インスタンスが多数あり、インスタンスのプロパティとメソッドは独立しています。

var cat = new Animal('cat');                               // 实例化cat对象
var dog = new Animal('dog');                               // 实例化狗子对象

cat.say === dog.say                                        // false 不同的实例拥有不同的实例属性/方法
cat.sing === dog.sing                                      // true 不同的实例共享相同的原型属性/方法

cat.arr.push('zz');                                        // 向cat实例对象的arr中追加元素；（私有）
cat.pArr.push('xx');                                       // 向cat原型对象的pArr中追加元素；（共享）
console.log(dog.arr);                                      // 打印出 []，因为cat只改变了其私有的arr
console.log(dog.pArr);                                     // 打印出 ['xx'], 因为cat改变了与狗子（dog）共享的pArr

もちろん、プロトタイプ属性が基本データ型である場合、それらは共有されません
コンストラクター内: 属性のプライバシー (インスタンスの基本属性) とメソッド (インスタンスの参照属性) の再利用と共有のため。私たちは以下を提唱します:
1. コンストラクターでプロパティをカプセル化します

ES5 継承メソッドを定義します

まず、Animal の親クラスを定義します

function Animal(n) {                              
    this.name = n;                                          // 实例属性
    this.arr = [];                                          // 实例属性（引用类型）
    this.say = function(){                                  // 实例方法
        return 'hello world';
    }
}
Animal.prototype.sing = function() {                        // 追加原型方法  
    return '吹呀吹呀，我的骄傲放纵~~';
}
Animal.prototype.pArr = [];                                 // 追加原型属性（引用类型）

利点:子オブジェクトは、親オブジェクトのインスタンス メソッド/プロパティとプロトタイプ メソッド/プロパティの継承を実現します。

欠点: サブクラス インスタンスは、親クラス コンストラクターの参照データ型属性を共有します。
2. コンストラクターを借用する

利点:

1. 子オブジェクトは、親クラスのインスタンス メソッドと各サブクラス インスタンスによって継承されるプロパティを継承します。 2. サブクラスのインスタンスを作成するときに、親クラスのコンストラクターにパラメーターを渡すことができます。
欠点: サブクラスのインスタンスは、親クラスの構築属性とメソッドを継承できません。
3.利点:
1. サブクラスのインスタンスを作成するときに、親クラスのコンストラクターにパラメーターを渡すことができます。

3. 親クラスのコンストラクターと属性を共有しません。

欠点: 親クラスのコンストラクターが 2 回呼び出されます。
4. 寄生組み合わせ継承

function Cat(n) {
    this.cName = n;
}
Cat.prototype = new Animal();                               // 父类的实例作为子类的原型对象

var tom = new Cat('tom');                                   // 此时Tom拥有Cat和Animal的所有实例和原型方法/属性，实现了继承
var black = new Cat('black');

tom.arr.push('Im tom');
console.log(black.arr);                                     // 打印出 ['Im tom'], 结果其方法变成了共享的，而不是每个实例所私有的，这是因为父类的实例方法/属性变成了子类的原型方法/属性了；

利点:
1.サブクラスのインスタンスを作成します。パラメーターは親クラスのコンストラクターに渡されます。
3. 親クラスのコンストラクターは 1 回だけ呼び出されます。

短所: 親クラスとサブクラスが同じプロトタイプを使用するため、サブクラスのプロトタイプの変更が親クラスに影響します。

function Cat(n) {
    this.cName = n;                     
    Animal.call(this, this.cName);                           // 核心，把父类的实例方法属性指向子类
}

var tom = new Cat('tom');                                    // 此时Tom拥有Cat和Animal的所有实例和原型方法/属性，实现了继承
var black = new Cat('black');

tom.arr.push('Im tom');
console.log(black.arr);                                      // 打印出 [], 其方法和属性是每个子类实例所私有的；
tom.sing();                                                  // undefind 无法继承父类的原型属性及方法；

利点: 継承の完全な実装。 短所: 相対実装 複雑
継承を実装するためにYUIライブラリが付属

function Cat(n) {
this.cName = n;                     
    Animal.call(this, this.cName);                          // 核心，把父类的实例方法属性指向子类
}
Cat.prototype = new Parent()                                // 核心, 父类的实例作为子类的原型对象
Cat.prototype.constructor = Cat;                            // 修复子类Cat的构造器指向，防止原型链的混乱

tom.arr.push('Im tom');
console.log(black.arr);                                     // 打印出 [], 其方法和属性是每个子类实例所私有的；
tom.sing();                                                 // 打印出 '吹呀吹呀，我的骄傲放纵~~'; 子类继承了父类的原型方法及属性

とは、親オブジェクトのプロトタイプ属性を直接指す子オブジェクトのuber属性を設定することを意味します。 (Uber は「上」または「1 レベル上」を意味するドイツ語です。)これは、子オブジェクトでチャネルを開くことと同等であり、親オブジェクトのメソッドを直接呼び出すことができます。この行は、継承を完全にするためだけにここに配置されており、純粋にバックアップの目的で使用されています。
ES6継承メソッド

function Cat(n) {
this.cName = n;                     
    Animal.call(this, this.cName);                          // 核心，把父类的实例方法属性指向子类
}
Cat.prototype = Parent.prototype;                           // 核心, 将父类原型赋值给子类原型（子类原型和父类原型，实质上是同一个）
Cat.prototype.constructor = Cat;                            // 修复子类Cat的构造器指向，防止原型链的混乱

tom.arr.push('Im tom');
console.log(black.arr);                                     // 打印出 [], 其方法和属性是每个子类实例所私有的；
tom.sing();                                                 // 打印出 '吹呀吹呀，我的骄傲放纵~~'; 子类继承了父类的原型方法及属性
tom.pArr.push('publish');                                   // 修改继承于父类原型属性值 pArr;
console.log(black.pArr);                                    // 打印出 ['publish'], 父类的原型属性/方法 依旧是共享的，
// 至此简直是完美呀~~~ 然鹅！
Cat.prototype.childrenProp = '我是子类的原型属性！';
var parent = new Animal('父类');
console.log(parent.childrenProp);                           // 打印出'我是子类的原型属性！' what? 父类实例化的对象拥有子类的原型属性/方法，这是因为父类和子类使用了同一个原型

関連記事: phpコンストラクター継承メソッド、phpコンストラクター継承

関連動画:
Geek Academy PHPオブジェクト指向ビデオチュートリアル

以上がjsコンストラクターの継承方法とメリット・デメリットを詳しく紹介（フルコード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。