jsの継承方法にはどのようなものがあるのでしょうか？ js で継承を実装するいくつかの方法の紹介

この記事でわかることは、js の継承メソッドとは何なのかということです。 js で継承を実装するためのいくつかの方法の紹介は、必要とする友人が参考にできることを願っています。

1. jsが継承を実装する方法: プロトタイプチェーン

実装方法: AプロトタイプのインスタンスはBプロトタイプの属性です

プロトタイプチェーンにはデフォルトでオブジェクトが存在することを忘れないでください

サブクラスを追加しますメソッドまたはオーバーライド スーパークラス メソッドは、置換プロトタイプ ステートメントの後に配置する必要があります

プロトタイプ チェーンを介して継承が実装された後は、プロトタイプ チェーンが書き換えられるため、オブジェクト リテラルを使用してメソッドとプロパティを作成することはできません

プロトタイプを介して継承が実装された後チェーン、スーパークラスの参照型属性はすべてのインスタンスで共有されます

function SuperType() {
  this.property = true;
  this.arr=[1,2,3]
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  this.sub = false;
}
SubType.prototype = new SuperType();
//继承SuperType，即以superType的实例为中介，使subType。prototype指向superType的原型
SubType.prototype.getSubValue = function() { //添加新方法
  return this.sub;
}
SubType.prototype.getSuperValue = function() { // 重写超类中的方法
  return this.sub;
}
var instance1 = new SubType();
instance1.arr.push(4);
console.log(instance1.arr); //1,2,3,4
var instance2 = new SubType();
console.log(instance2.arr); //1,2,3,4

2. jsで継承を実装する方法:コンストラクターを借用します

実装方法:サブクラスのコンストラクター内でスーパークラスのコンストラクターを呼び出します、つまり、call() または apply() を使用して、スーパークラスのコンストラクターのスコープが変更されました

コンストラクターにパラメーターを渡すことはできますが、関数の再利用はできません

function SuperType(name,age){
  this.name = name;
  this.age = age;
}
function SubType() {
  SuperType.call(this,'i','21')//继承SuperType，并传递参数
  this.job = 'actor'
}

3. js が継承を実装する方法。 : 結合された継承

実装方法: プロトタイプチェーンを使用してプロトタイプを実装する属性とメソッドの継承、コンストラクターを借用してインスタンス属性の継承を実現

隠れた危険: 親クラスのコンストラクターを 2 回呼び出します (1call() メソッド、2new SuperType) ())

function SuperType(name,age){
  this.name = name;
  this.age = age;
  this.f = [1,2,3,4]
}
SuperType.prototype.sayName = function() {
  console.log(this.name)
}
function SubType(name,age) {
  SuperType.call(this,name,age)//继承SuperType，并传递参数
  this.job = 'actor'
}
SubType.prototype=new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayHello=function() {
  console.log('hello')
}

var h = new SubType('hua', 18);
h.sayName()//haha
h.f.push(5)
console.log(h.f)//1,2,3,4,5
var n = new SubType();
console.log(n.f)//1,2,3,4

4. jsで継承を実装する方法: プロトタイプの継承

オブジェクトに基づいて新しいオブジェクトを生成し、新しいオブジェクトを変更します

スーパークラス参照型の属性はそのままです共有

var person = {
  name:'lily',
  age:'21',
  friends:[1,2,3]
}
var people = Object.create(person);
people.friends.push(4);
var human = Object.create(person);
console.log(human.friends)//1,2,3,4

5. jsの継承実装方法：寄生継承

継承処理を実装するためだけの関数を作成し、関数内でオブジェクトを拡張してオブジェクトを返す

このとき、参照型親クラスの属性は引き続きすべてのインスタンスで共有されます

function anotherFunction(original) {
  var clone  = Object(original);
  clone.sayHi = function() {
    console.log('hi')
  }
  return clone;
}
var person = {
  name:'lili',
  age:'21',
  f: [1,2,3]
}
var people1 = anotherFunction(person);
people1.f.push(4)
console.log(people1.f);// 1,2,3,4
var people2 = anotherFunction(person);
console.log(people2.f);// 1,2,3,4

6. js実装の継承メソッド: 寄生結合継承

コンストラクターを借用してプロパティを継承し、プロトタイプチェーンの混合を通じてメソッドを継承します

親の実行を削減しますクラスコンストラクターを一度だけ作成すると、親クラスの参照型のプロパティは共有されません

function SuperType(name,age){
  this.name = name;
  this.age = age;
  this.f = [1,2,3,4]
}
SuperType.prototype.sayName = function() {
  console.log(this.name)
}
function SubType(name,age) {
  SuperType.call(this,name,age)
  this.job = 'actor'
}
function inherit(superType,subType) {
  var property =  Object.create(superType.property);// 创建父类原型的一个副本，并没有调用父类构造函数
  property.constructor = subType;// 使父类原型副本的constructor属性指向子类
  subType.property = property;// 子类的原型指向父类原型副本
}
inherit(SuperType,SubType)
var instance = new SubType('haha', 18);
instance.sayName()//haha
instance.f.push(5);
console.log(instance.f);//1,2,3,4,5
var ins = new SubType();
console.log(ins.f);//1,2,3,4

関連する推奨事項:

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

JS の継承メソッドの詳細な例

JS で継承を実装するいくつかの方法

以上がjsの継承方法にはどのようなものがあるのでしょうか？ js で継承を実装するいくつかの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。