Heim >Web-Frontend >js-Tutorial >So implementieren Sie Mehrfachvererbung in JavaScript

So implementieren Sie Mehrfachvererbung in JavaScript

亚连
亚连Original
2018-06-12 17:48:083317Durchsuche

Dieser Artikel stellt hauptsächlich die Methode zur Implementierung der Mehrfachvererbung in JavaScript vor und analysiert die spezifischen Schritte und zugehörigen Betriebstechniken zur Implementierung der Mehrfachvererbung in JavaScript im Detail in Form von Beispielen

Die Beispiele in diesem Artikel beschreiben, wie man Mehrfachvererbung in JavaScript implementiert. Teilen Sie es wie folgt mit allen:

1 Definieren Sie einen leeren übergeordneten Klassenkonstruktor und definieren Sie dann Attribute und Methoden für die übergeordnete Klasse über den Prototyp

2 Konstruktor der Unterklasse, bindet dann den Prototyp der Unterklasse an die Instanz der übergeordneten Klasse und bindet dann die übergeordnete Klasse des Prototyps der Unterklasse an die Instanz der übergeordneten Klasse. Legen Sie Ihre eigenen Eigenschaften und Methoden für Unterklassen durch Prototypen fest.

3. Definieren Sie einen leeren Enkelklassenkonstruktor, binden Sie dann den Enkelklassenprototyp an die Unterklasseninstanz und binden Sie dann die übergeordnete Klasse des Enkelklassenprototyps an die Unterklasseninstanz. Definieren Sie Ihre eigenen Eigenschaften und Methoden für die Enkelklasse durch Prototypen.

4. Durch Aufrufen des Instanzobjekts können Sie auch die Methode der übergeordneten Klasse, also der Unterklasse in diesem Artikel, aufrufen die größte übergeordnete Klasse, d. h. Die Methoden der übergeordneten Klasse können hier auch Eigenschaften und Methoden zum aktuellen Objekt hinzufügen.

function Person(){}
Person.prototype.name = "人";// 为人类创建一个name属性
Person.prototype.say = function(content){// 为人类创建一个说话的方法
  if(!this.name){ // 如果对象不存在name属性,则使用原型链的name
    this.name = this.__proto__.name;
  }
  console.log("我是" + this.name + ",我想说"+content);
};
function Parent(){}
Parent.prototype = new Person();  // 设置Parent类继承Person类
Parent.prototype.superClass = new Person();// 设置superClass保存父类Person的方法属性
Parent.prototype.name = "父辈类";// 设置Parent类的name属性
Parent.prototype.say = function(){// 设置Parent类自己的 say 方法
  console.log("我是Parent类的say方法!");
};
function Child(){}
Child.prototype = new Parent();// 设置Child类继承Parent类
Child.prototype.superClass = new Parent();// 设置superClass保存父类Parent的方法属性
Child.prototype.say = function(){  //设置Child类自己的say方法
  console.log("我是Child类的say方法!");
}
var c = new Child();// 实例化一个Child对象
c.say();  // 调用自身原型的say方法,输出:我是Child类的say方法!
c.superClass.say(); // 调用父类Parent的say方法,输出: 我是Parent类的say方法!
c.superClass.superClass.say("哈哈");// 直接调用最大的父类Person的say方法(方法中的this指向Person),输出:我是人,我想说哈哈"
// 用call调用最大的父类Person的say方法(方法中的this指向实例化对象c,但此时c并没有name属性,所以this.name用的是Parent的name)
c.superClass.superClass.say.call(c,"嘻嘻"); // 输出:我是父辈类,我想说嘻嘻
c.name = "子类实例";// 给当前对象增加name属性
// 还是用call调用最大父类Person的say方法(此时c对象中已经有name属性);
c.superClass.superClass.say.call(c,"我是子类的实例化对象"); // 输出:我是子类实例,我想说我是子类的实例化对象

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie EventBus in Vue, um eine Kommunikation zwischen Komponenten auf derselben Ebene zu erreichen

So implementieren Sie das Herunterladen in node.js-Bild

Beispiele für die Implementierung der HLS-Wiedergabe mit vue2.0+vue-dplayer-Technologien

in vue2.0 + übergeben element UI el-table So exportieren Sie Daten nach Excel

Detaillierte Erläuterung des FastClick-Quellcodes (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Mehrfachvererbung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn