Teilen Sie die Unterschiede zwischen drei Kapselungsmethoden für die JavaScript-Simulationsimplementierung und ihren Schreibmethoden

Bei der Vererbung wird eine Unterklasse verwendet, um eine andere übergeordnete Klasse zu erben. Dann kann die Unterklasse automatisch alle Eigenschaften und Methoden in der übergeordneten Klasse haben. Dieser Vorgang wird als Vererbung bezeichnet! Es gibt viele Möglichkeiten, Vererbung in JS zu implementieren. Heute werde ich Ihnen drei davon vorstellen. Lassen Sie uns diesen Artikel nutzen, um mehr über die drei Methoden der Kapselung durch js-Simulation zu erfahren. Freunde, die ihn benötigen, können sich darauf beziehen. Ich hoffe, er kann jedem helfen.

1. Fügen Sie der Object-Klasse eine Erweiterungsmethode hinzu

//声明一个父类
function Person(name){
 this.name=name;
 this.age=age;
 this.say=function(){
   alert("我叫"+this.name);
 }
}
//声明一个子类 
function Student(){
 this.no=no;
 this.study=function(){
  alert("我在学习！");
 }
}
// 通过循坏，将父类对象的所有属性和方法，全部赋给子类对象
Object.prototype.extend=function(parent){
 for(var i in parent){
   this[i].parent[i];
 }
}
var p=new Person("张三",12);
var s=new Student("1234567");
//子类对象调用这个扩展方法
s.extend()
console.log(s);

Das oben genannte Vererbungsprinzip:

Durch Schleifen werden alle Eigenschaften und Methoden der übergeordneten Klasse verarbeitet Objekt, alle Unterklassenobjekte zugewiesen. Der entscheidende Punkt ist die for-in-Schleife. Auch ohne Objekterweiterung kann die Operation durch eine einfache Schleife implementiert werden.

Die Verwendung dieser Methode zur Implementierung der Vererbung weist jedoch einige Nachteile auf:

① Sie können das vollständige Unterklassenobjekt nicht direkt durch eine Instanziierung erhalten. Sie müssen zuerst das übergeordnete Klassenobjekt und das untergeordnete Klassenobjekt abrufen und diese dann manuell zusammenführen.

②Die Vererbungsmethode zum Erweitern von Object bleibt auch für das Objekt der Unterklasse erhalten.

Werfen wir einen Blick auf die zweite Methode zur Implementierung der Vererbung~

2. Verwenden Sie die prototypische Vererbung

Bevor wir diese Methode vorstellen, sprechen wir über zwei Konzepte: Prototypobjekte Mit Prototyp

1. Prototyp: Prototypobjekt der Funktion

①Nur Funktionen haben einen Prototyp, und alle Funktionen müssen einen Prototyp haben

②Der Prototyp selbst ist auch ein Objekt!

③prototype zeigt auf die Referenzadresse der aktuellen Funktion!

2. __proto__: der Prototyp des Objekts!

①Nur Objekte haben __proto__, und alle Objekte müssen __proto__ haben

②__proto__ ist auch ein Objekt, also hat es auch sein eigenes __proto__. Folgen Sie dieser Zeile in der Reihenfolge von oben. Es ist die Prototypenkette .

③ Funktionen und Arrays sind Objekte und haben ihr eigenes __proto__

//声明父类
function Person(name,age){
   this.name=name;
   this.age=age;
   this.say=function(){
    alert("我叫"+this.name);
   }
}
//声明子类   
function Student(no){
   this.no=no;
   this.study=function(){
    alert("我在学习！我叫"+this.name+"今年"+this.age");
   }
}
//将父类对象赋给子类的prototype  
Student.prototype=new Person("张三",14);
//拿到子类对象时，就会将父类对象的所有属性和方法，添加到__proto__
var s=new Student(); 
s.study();

Verwenden Sie das Prinzip der prototypischen Vererbung:

Weisen Sie dann das übergeordnete Klassenobjekt dem Unterklassenprototyp zu Die Attribute und Methoden des übergeordneten Klassenobjekts werden im Prototyp der Unterklasse angezeigt. Wenn eine Unterklasse instanziiert wird, befindet sich der Prototyp der Unterklasse im __proto__ des Unterklassenobjekts. Schließlich werden die Attribute und Methoden des übergeordneten Klassenobjekts im __proto__ des Unterklassenobjekts angezeigt.

Merkmale dieser Art der Vererbung:

①Alle Attribute der Unterklasse selbst sind Mitgliedsattribute, und von der übergeordneten Klasse geerbte Attribute sind Prototypattribute.

② Das fertige Unterklassenobjekt kann immer noch nicht durch einstufige Instanziierung abgerufen werden.

Die dritte Möglichkeit, die Vererbung zu implementieren:

call(), apply() und bind(). Diese drei Methoden sind sehr ähnlich und unterscheiden sich nur in der Übergabe von Parametern.

function Person(name,age){
  this.name=name;
  this.age=age;
  this.say=function(){
    alert("我叫"+this.name);
    }
}
function Student(no,name,age){
  this.no=no;
  this.study=function(){
    alert("我在学习！");
  }
//将父类函数的this,指向为子类函数的this
Person.call(this,name,age);
}
var s=new Student(12,"张三",24);
console.log(s);

Der einzige Unterschied zwischen den drei Funktionen besteht in der Art und Weise, wie sie die Parameterliste von func akzeptieren. Ansonsten gibt es keinen Unterschied in der Funktionalität!

Wie schreibe ich die drei Funktionen (Unterschied):

Wie schreibe ich call: func.call(obj, auf das func zeigt, func-Parameter 1, func-Parameter 2,... );

apply wird geschrieben als: func.apply(obj pointed by this of func, [func Parameter 1, func Parameter 2,...]);

bind wird geschrieben als: func.bind(this pointed by func obj)(func Parameter 1, func Parameter 2,...);

Verwandte Empfehlungen:

Detaillierte Erklärung eines Vue-Plug-Ins Von der Verpackung bis zur Veröffentlichung

Die Kapselungsfunktion in JQuery übergibt das aktuelle Element

JQuery und Ajax realisieren dreistufige Verknüpfungskapselung und Nichtkapselung von Provinzen und Gemeinden

Das obige ist der detaillierte Inhalt vonTeilen Sie die Unterschiede zwischen drei Kapselungsmethoden für die JavaScript-Simulationsimplementierung und ihren Schreibmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!