Detaillierte Erläuterung von JavaScript-Prototypen

1, Vorwort

Das Folgende ist die Rangliste verschiedener Programmiersprachen seit der Gründung von Github im Jahr 2008

Darunter nimmt JavaScript seit 2015 den ersten Platz ein und ist zur am häufigsten verwendeten Sprache auf Github geworden. In den frühen Tagen konzentrierte sich die Verwendung von JS hauptsächlich auf Browser, aber als node.js Einzug in die Serverentwicklung und React hielt Native ist nach und nach auf die mobile End-to-End-Penetration umgestiegen, eine Full-Stack-Ära von JS steht vor der Tür. Und in der JS-Welt gibt es ein berühmtes Sprichwort: „Alle Anwendungen, die mit JS entwickelt werden können, werden irgendwann mit JS entwickelt.“ Ich habe dich gerade gefragt, ob du Angst hast?

Okay, nachdem ich das alles gesagt habe, möchte ich nicht sagen, dass JS die beste Sprache der Welt ist (offensichtlich ist es PHP, oder? ←_←), und ich glaube auch nicht, dass JS irgendjemanden ersetzen wird. Ich bin einfach der Meinung, dass JavaScript ein Sprachtool sein wird, das jeder (nicht nur die Website) verstehen und lernen sollte.

2. Objektorientiert (OOP)

2.1 Implementierungsideen

Objektorientiert ist eine Programmieridee, mit der jeder vertraut ist. Es ist eine Abstraktion der realen Welt Die Hauptgrundlage für die objektorientierte Implementierung der OOP-Sprache sind derzeit Klassen, die die reale Welt durch Klassenkapselung und Vererbung abbilden. Einschließlich Java, C# und sogar Python implementieren sie alle objektorientiertes Design durch Klassendesign. Wenn Sie jedoch sorgfältig darüber nachdenken, werden Sie das Gefühl haben, dass es ein Problem gibt, da es in der realen Welt kein Klassenkonzept gibt, sondern nur verschiedene Objekte. In der realen Welt besteht die Vererbungsbeziehung zwischen Objekten und Objekten, nicht zwischen Klassen. Beispielsweise sind Kinder Objekte und Eltern sind auch Objekte, die von Eltern (Objekten) erben.

JS ist ebenfalls eine objektorientierte Programmiersprache, ihr objektorientierter Ansatz basiert jedoch auf Prototypen . , statt einer Klasse. Diese Idee wird auch als Object Link Other Object bezeichnet, das heißt, die reale Beziehung (z. B. Vererbung) wird direkt auf das Objekt abgebildet.

2.2 Prototypenkonzept

Tatsächlich habe ich mehrere Tage lang verwandte Konzepte studiert, zusätzlich zum Prototypenkonzept selbst, der damit verbundenen Generierung von Objekten, Konstruktoren und dem Unterschied zwischen Prototypen und Prototyp und warum Objekte Es gibt kein Prototyp-Attribut, das auf den Prototyp verweist, aber verwenden Sie Proto, um auf den Prototyp zu verweisen?

Okay, lass uns zuerst über das Konzept des Prototyps sprechen. Alles in JS ist ein Objekt, und jedes Objekt hat einen Prototyp (außer Object). Dieser Prototyp ähnelt wahrscheinlich der übergeordneten Klasse in Java, sodass Sie sich den Prototyp grundsätzlich als das übergeordnete Objekt dieses Objekts, also jedes Objekts, vorstellen können (Außer Objekt) speichert intern sein eigenes übergeordnetes Objekt, und dieses übergeordnete Objekt ist der Prototyp. Wenn ein allgemein erstelltes Objekt keinen Prototyp angibt, ist sein Prototyp Object (dies ist sehr ähnlich zu allen Klassen in Java, die standardmäßig von der Object-Klasse erben).

2.3 Objekterstellung

In JS gibt es viele Möglichkeiten, Objekte zu erstellen, die gebräuchlichsten sind wie folgt:

//第一种，手动创建
var a={'name':'lala'};   

//第二种，构造函数
function A(){
    this.name='lala';
}
var a=new A();

//第三种，class (ES6标准写法)

class A{
    constructor(){
        super();
        this.name='lala';
    }
}
var a=new A()
//其实后面两种方法本质上是一种写法

Der Prototyp des Objekts, das von erstellt wurde Diese drei Schreibmethoden (übergeordnete Objekte) sind alle Objekte. Es sollte erwähnt werden, dass ES6 Schlüsselwörter wie „class“ und „extends“ verwendet, um den Konstruktor in ein Klassenkonzept in Form von Syntaxzucker zu packen, was es für jeden einfacher macht, es zu verstehen. Es ist zu hoffen, dass Entwickler keine Energie mehr darauf verschwenden, sich mit Prototypen und Prototypenketten zu befassen, und es zeigt auch voll und ganz, dass die Designabsicht von Prototypen dieselbe ist wie die von Klassen.

2.4 Objektprototypen anzeigen

Nachdem Objekte erstellt wurden, gibt es mehr als eine Möglichkeit, ihre Prototypen anzuzeigen. In der Vergangenheit wurde im Allgemeinen das Proto-Attribut des Objekts verwendet ES6 wird empfohlen, die Methode Object.getPrototypeOf( ) zu verwenden, um den Prototyp des Objekts abzurufen

function A(){
    this.name='lala';
}
var a=new A();
console.log(a.__proto__)  
//输出：Object {}

//推荐使用这种方式获取对象的原型
console.log(Object.getPrototypeOf(a))  
//输出：Object {}

Unabhängig davon, wie das Objekt erstellt wird, ist der Standardprototyp Object Der besondere Punkt, der sein muss Hier wird erwähnt, dass das Objekt über den Konstruktor Funktion A erstellt wird. Es ist auch ein Objekt für sich und A verfügt über zwei Attribute, die auf den Prototyp verweisen, nämlich Proto und Prototyp, und die beiden Attribute sind nicht identisch

function A(){
    this.name='lala';
}
var a=new A();
console.log(A.prototype)  
//输出：Object {}

console.log(A.__proto__)  
//输出：function () {}
console.log(Object.getPrototypeOf(A))
//输出：function () {}

Das Prototypattribut der Funktion kann nur als Konstruktor erstellt werden. Wenn Sie dem Prototyp des Objekts einen eigenen Prototypattributwert zuweisen. Tatsächlich sollte sein Prototyp wie die Funktion selbst ein Funktionsobjekt sein, und dann ist der Prototyp des Funktionsobjekts ein Objekt.

Kurz gesagt wird empfohlen, die von ES6 empfohlene Methode zum Anzeigen von Prototypen und Festlegen von Prototypen zu verwenden.

2.5 Verwendung von Prototypen

Tatsächlich ist die Verwendung von Prototypen und Klassenvererbung gleich: Wenn Sie die Attribute eines Objekts verwenden möchten, verweisen Sie auf den Prototyp des aktuellen Objekts Objekt, und Sie haben das Recht, das Objekt zu nutzen.

function A(){
    this.name='world ';
}
function B(){
    this.bb="hello"
    }
var a=new A();
var b=new B();

Object.setPrototypeOf(a,b);
//将b设置为a的原型,此处有一个问题，即a的constructor也指向了B构造函数，可能需要纠正
a.constructor=A;
console.log(a.bb)
//输出 hello

---

(Ergänzung)

Es wäre viel einfacher, wenn Sie ES6 verwenden würden, und es beinhaltet nicht einmal das Prototypattribut

class B{
     constructor(){

        this.bb='hello'
     }
}
class A  extends B{
     constructor(){
        super()
        this.name='world'
     }
}

var a=new A();
console.log(a.bb+" "+a.name);
//输出hello world


console.log(typeof(A))
//输出  "function"

Wie wäre es? Gibt es überhaupt keine Spur vom Prototyp? Es ist wie bei der Klassenvererbung, aber Sie können auch sehen, dass der Typ von Klasse A tatsächlich eine Funktion ist, sodass die Klasse im Wesentlichen eine Art syntaktischer Zucker in JS ist und die Essenz der JS-Vererbung immer noch ein Prototyp ist. ES6 führt jedoch ein Klasse und Erweiterungen Das Konzept des Prototyps zu vertuschen, ist auch ein sehr freundlicher Schachzug für Programmierer, die sich seit langem mit objektorientierten Programmiersprachen auf Basis der Klassenvererbung beschäftigen.

Mein Vorschlag ist, den Prototyp so gut wie möglich zu verstehen und so oft wie möglich Syntax-Zucker-ähnliche Klassen zu verwenden.

---

2.6 Prototypenkette

Dieses Konzept ist tatsächlich einfacher geworden. Es kann mit der Vererbungskette einer Klasse verglichen werden, das heißt, der Prototyp jedes Objekts wird nach oben verfolgt, bis er das Objekt erreicht. Dies bildet eine Kette, die die darin enthaltenen Objekte verbindet. Wenn es bei der Suche nach den Eigenschaften des aktuellen Objekts nicht gefunden wird, wird es entlang dieser Kette durchsucht, bis es das Objekt erreicht undefiniert. Das bedeutet, dass Ihre Prototypenkette nicht zu lang sein darf, da es sonst zu Effizienzproblemen kommt.

3. Zusammenfassung

• Verständnis des Konzepts des Prototyps

• Vererbung von Analogieklassen, dem Prototyp von Ein Objekt kann als übergeordnetes Objekt des Objekts verstanden werden.

• Verwendung von Prototypen

• Verwende ES6-Standards Möglich, verwenden Sie class, extensions, Object.getPrototype(), Object.setPrototype() usw.

• Hinweise

• Prototypische Vererbung Die Kette sollte nicht zu lang sein

• Beachten Sie bei der Angabe des Prototyps, dass sich auch der Konstruktor ändert.

4, Nachtrag (Ergänzung)

Einige Leute denken, meine Analyse sei sehr abstrakt, deshalb werde ich sie noch einmal zusammenfassen, wenn Sie JS verstehen möchten Ein Satz: Was ist der Prototyp eines Objekts? Das heißt, der Prototyp eines Objekts bezieht sich auf das übergeordnete Objekt des Objekts. Jedes Objekt hat ein übergeordnetes Objekt, und das übergeordnete Objekt selbst hat auch ein übergeordnetes Objekt (Großvaterobjekt?). Was die Prototypenkette betrifft, so ist sie dem Konzept der Stammbäume in der Vergangenheit sehr ähnlich. Sie können Ihren Vater, Ihren Großvater, Ihren Urgroßvater bis zum Ende verfolgen mit einem Objekt verglichen wird, dann ist diese Kette die Prototypenkette.

Das Obige ist die detaillierte Erklärung des JavaScript-Prototyps. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!