javascriptの継承

プロトタイプチェーンの継承

 プロトタイプチェーンの継承により、サブクラスのプロトタイプが親クラスのインスタンスに変更され、サブクラスが親クラスのコンストラクターとプロトタイプのプロパティまたはメソッドにアクセスできるようになります。

 

            function Base(){
				this.id = '123'
				this.name = 'aaa'
				this.arr = [1]
			}
			function Ba(){
			 	this.id = '456'
			}
			Ba.prototype = new Base()  // 修改子类的原型为父类的实例
			let a1 = new Ba()
			let a2 = new Ba()
			
			a2.arr.push(2)  // 如果在1个子对象中对某个属性对象(不包括基本类型)做出改变(不是直接改变引用地址/重新赋值),其他子对象的该属性也会改变

			console.log(a1.arr) // 12
			console.log(a2.arr) // 12

コアは、親クラスインスタンスをサブクラスのプロトタイプオブジェクトとして使用することです。

利点

     シンプル

不利益

    プロパティオブジェクト(基本タイプを含まない)が1つのサブオブジェクトで変更された場合(参照アドレス/再割り当てを直接変更しない場合)、他のサブオブジェクトのプロパティも変更されます

 

コンストラクター+ call()

 コアは、サブクラスで親のclass.call()メソッドを使用することです。

            function Parent(name) {
			    this.name = name;
			    this.arr = [1];
			    this.getName = function () {
			        return this.name;
			    };
			}
			function Child(name) {
			    Parent.call(this, name); //核心代码
			}

子の新しいインスタンスが作成されるたびに、すべての属性が再作成されます。

利点1.属性の参照の問題を解決します2.パラメーターを渡すことができます3.複数を継承できます

短所:1。プロトタイプのプロパティとメソッドを継承できません2.インスタンスは親クラスのインスタンスとしてカウントされず、サブクラスのインスタンスのみとしてカウントされます3.関数は再利用できず、コピーであるため、多くのメモリ

 

組み合わせ継承(プロトタイプチェーン+プロトタイプ+呼び出し)

お父さん:

1.属性はコンストラクターに配置されます2.関数はプロトタイプに配置されます

サブクラス:

1. 1回目:例に書き込みます2. 2回目:プロトタイプに書き込みます

// 定义属性
function Parent(name, arr) {
    this.name = name;
    this.arr = [1];
}

// 定义函数(不放在实例中)
Parent.prototype.getName = function () {
    return this.name;
}; 

function Child(name) {
    Parent.call(this, name); //【第一次】
}

Child.prototype = new Parent(); //【第二次】

利点:

属性の参照の問題を解決します。パラメーターを渡すことができます。関数は再利用できます。インスタンスではなくプロトタイプに配置されるためです。

短所:

親クラスのコンストラクターが2回呼び出され、プロトタイプとインスタンスの両方に同じプロパティが書き込まれます。必要はありません。

 

寄生の組み合わせの継承+ obejct.create

インスタンスメソッドを呼び出します。最初に自分自身を探す→独自のコンストラクター関数のプロトタイプを探す→プロトタイプコンストラクター関数のプロトタイプを探す

継承を実現するには:コンストラクターのプロトタイプ=親のインスタンス

Object.create():内部のパラメーターは、親クラスコンストラクターを呼び出さずに、プロトタイプを直接継承する、継承されるプロトタイプです。

//寄生组合继承
function Parent (name) {
  // 属性:避免复用的时候被修改,写在构造函数中每次创建新的
  this.name = name || 'Sony';
}

// 原型方法:函数可以复用,因此直接写在原型中直接继承
Parent.prototype.eat = function(food) {
  console.log(this.name + '正在吃:' + food);
};

function Child(name){
  // 调用父构造函数,解决属性修改问题
  // 【继承属性】
  // =》创建父类的实例,然后添加子类新的属性
  Parent.call(this,name);
}

// 以父类原型创建自己的原型:【继承函数】
// =》1.原型链继承 2.函数可以复用所以不需要从构造函数继承
Child.prototype = Object.create(Parent.prototype);

// 再把原型的构造函数指向自己
// =》修改获取的父原型对象为自己,形成完整的原型链
Child.prototype.constructor = Child;

注:Object.create(ターゲット)は、ターゲット(プロトタイプオブジェクト)を介して新しいオブジェクトを作成します。

利点:コンストラクター呼び出しを2回解決する 

 

ES6の継承

class Parent {
    // 构造函数,里面写上对象的属性
    constructor(props) {
        this.name = props.name || "Unknown";
    }
    // 方法写在后面
    getName() {
        // 父类共有的方法
        console.log(this.name);
    }
}

// class继承
class Child extends Parent {
    // 构造函数
    constructor(props, myAttribute) {
        // props是继承过来的属性
        // myAttribute是自己的属性
        // 调用实现父类的构造函数
        super(props); //相当于获得父类的this指向
        this.attr = myAttribute; //自己的私有属性
    }

    fly() {
        //自己私有的方法
        console.log(this.name);
    }
}

クラス継承

サブクラスコンストラクター:

1.最初のパラメーター+:継承された属性(親クラスにはいくつかを書き込むためのいくつかがあります)

2.最初のパラメータ+:継承された属性

3.最初に親クラスコンストラクターを呼び出します

 

転載元:https//www.wolai.com/mary/eZTNTsNPfYeUtzXH3P689

おすすめ

転載: blog.csdn.net/wanghongpu9305/article/details/114097133