Einführung in drei Methoden der JavaScript-Simulation zur Erzielung einer Kapselung und ihre Unterschiede

Vorwort

Bei der Vererbung wird eine Unterklasse verwendet, um eine andere übergeordnete Klasse zu erben. Anschließend kann die Unterklasse automatisch alle Eigenschaften und Methoden, dieser Vorgang nennt sich Vererbung! Es gibt viele Möglichkeiten, Vererbung in JS zu implementieren. Heute werde ich Ihnen drei davon vorstellen.

1. Fügen Sie der Objektklasse 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);

Oben Das Prinzip der Implementierung der Vererbung:

Durch Schleifen werden alle Attribute und Methoden des übergeordneten Klassenobjekts dem untergeordneten Klassenobjekt 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

Lassen Sie uns über diese Methode sprechen, bevor wir sie vorstellen Konzepte: Prototypobjekt und Prototyp

1. Prototyp: Prototypobjekt der Funktion

① Nur Funktionen haben Prototypen und alle Funktionen müssen Prototypen 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, daher hat es auch sein eigenes Proto. Die Reihenfolge beim Nachschlagen entlang dieser Linie ist Prototyp Kette.

③ Funktionen und Arrays sind Objekte und haben ihren eigenen Prototyp

//声明父类
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();

Das Prinzip der Verwendung der prototypischen Vererbung:

Weisen Sie das übergeordnete Klassenobjekt dem Prototyp der Unterklasse zu, dann erscheinen die Attribute und Methoden des übergeordneten Klassenobjekts im Prototyp der Unterklasse. 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 Prototypen Eigenschaften.

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

Der dritte Weg zur Implementierung der Vererbung:

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

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 dies von func zeigt). , Funktionsparameter 1, Funktionsparameter 2,...);

Schreibmethode anwenden: func.apply(obj, auf das von func verwiesen wird, [Funktionsparameter 1, Funktionsparameter 2,...]) ;

Bind-Schreibmethode: func.bind (obj, auf das dies von func zeigt) (func-Parameter 1, func-Parameter 2,...);

Zusammenfassung

Das obige ist der detaillierte Inhalt vonEinführung in drei Methoden der JavaScript-Simulation zur Erzielung einer Kapselung und ihre Unterschiede. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!