ホームページ > 記事 > ウェブフロントエンド > いくつかの 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
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 継承スタイルの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。