ホームページ >ウェブフロントエンド >jsチュートリアル >jsコンストラクターとは何ですか?コンストラクターの継承方法とそのメリット・デメリットを詳しく解説
jsコンストラクターとは何ですか?通常の機能と違うのですか?この記事では主にjsコンストラクターの継承(クラス継承)について紹介しており、ES5とES6の2つの継承方法についても紹介していますので、記事内に不合理な部分がありましたらご指摘いただければ幸いです。
まず、以下の内容をよりよく理解するために、インスタンスの属性/メソッドとプロトタイプの属性/メソッドを簡単に紹介します
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 オブジェクトが含まれます。現在のオブジェクトで属性が見つからない場合は、そのプロトタイプ チェーンで検索されます。プロトタイプ チェーン)
次の例をもう一度見てみましょう
注: コンストラクターには、通常、配列形式の参照属性はほとんどありません。ほとんどの場合、それらは基本属性 + メソッドです。
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. コンストラクターでプロパティをカプセル化します
まず、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. サブクラスのインスタンスを作成するときに、親クラスのコンストラクターにパラメーターを渡すことができます。
欠点: 親クラスのコンストラクターが 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'], 结果其方法变成了共享的,而不是每个实例所私有的,这是因为父类的实例方法/属性变成了子类的原型方法/属性了;利点:
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 レベル上」を意味するドイツ語です。)これは、子オブジェクトでチャネルを開くことと同等であり、親オブジェクトのメソッドを直接呼び出すことができます。この行は、継承を完全にするためだけにここに配置されており、純粋にバックアップの目的で使用されています。
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? 父类实例化的对象拥有子类的原型属性/方法,这是因为父类和子类使用了同一个原型
JavaScriptプロトタイプ継承コンストラクタ継承
以上がjsコンストラクターとは何ですか?コンストラクターの継承方法とそのメリット・デメリットを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。