Einführung in die Verwendung des JavaScript-Prototyps

Studenten, die JavaScript verwendet haben, müssen mit Prototypen vertraut sein, aber Anfänger wissen nicht, was es ist. Sie wissen nur, dass Funktionen zum Beispiel hinzugefügt werden können Ich habe mir kürzlich einige fortgeschrittene JavaScript-Programme angesehen und schließlich sein Geheimnis gelüftet.

Jede Funktion verfügt über ein Prototypattribut, das auf ein Objekt verweist. Dieses Objekt wird als Prototypobjekt bezeichnet. Das Prototypobjekt enthält Methoden und Eigenschaften, die von Funktionsinstanzen gemeinsam genutzt werden Konstruktor Wenn eine Funktion aufgerufen wird (Aufruf mit dem neuen Operator), erbt das neu erstellte Objekt Eigenschaften und Methoden vom Prototypobjekt.

Private Variablen und Funktionen

Lassen Sie uns über einige verwandte Dinge sprechen, bevor wir uns im Detail mit dem Prototyp befassen, damit wir die Designabsicht des Prototyps besser verstehen können. In einem Artikel über JavaScript-Namespaces, den ich zuvor geschrieben habe, wurde der Funktionsumfang von JavaScript erwähnt. Wenn die in der Funktion definierten Variablen und Funktionen keine Schnittstelle zur Außenwelt bereitstellen, sind sie von außen nicht zugänglich, das heißt, sie werden zu privaten Variablen und private Veranstaltungen.

function Obj(){
                var a=0; //私有变量
                var fn=function(){ //私有函数

                }
            }

Auf diese Weise kann nicht auf die Variable a und die Funktion fn außerhalb des Funktionsobjekts Obj zugegriffen werden. Sie werden privat und können nur innerhalb von Obj verwendet werden. Auch Instanzen der Funktion Obj können nicht auf diese Variablen zugreifen Funktionen.

var o=new Obj();
            console.log(o.a); //undefined
            console.log(o.fn); //undefined

Statische Variablen und Funktionen

Wenn eine Funktion definiert ist und die ihr über „.“ hinzugefügten Attribute und Funktionen weiterhin über das Objekt selbst zugänglich sind, ist dies nicht möglich Wie Sie wissen, werden solche Variablen und Funktionen als statische Variablen bzw. statische Funktionen bezeichnet. Schüler, die Java und C# verwendet haben, können die Bedeutung von statisch leicht verstehen.

function Obj(){

            }

            Obj.a=0; //静态变量

            Obj.fn=function(){ //静态函数

            }

            console.log(Obj.a); //0
            console.log(typeof Obj.fn); //function

            var o=new Obj();
            console.log(o.a); //undefined
            console.log(typeof o.fn); //undefined

Instanzvariablen, Funktionen

Bei der objektorientierten Programmierung hoffen wir, zusätzlich zu einigen Bibliotheksfunktionen gleichzeitig einige Eigenschaften und Methoden zu definieren, wenn das Objekt definiert wird , auf die nach der Instanziierung zugegriffen werden kann, JavaScript Es kann auch so gemacht werden

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法

                }
            }

            console.log(typeof Obj.a); //undefined
            console.log(typeof Obj.fn); //undefined

            var o=new Obj();
            console.log(typeof o.a); //object
            console.log(typeof o.fn); //function

Dies kann jedoch den oben genannten Zweck erreichen

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法

                }
            }

            var o1=new Obj();
            o1.a.push(1);
            o1.fn={};
            console.log(o1.a); //[1]
            console.log(typeof o1.fn); //object
            var o2=new Obj();
            console.log(o2.a); //[]
            console.log(typeof o2.fn); //function

Die oben genannten Code-Ausführungsergebnisse sind vollständig entspricht den Erwartungen, zeigt aber auch ein Problem, das in o1 a und fn geändert wird, in o2 jedoch keine Änderung erfolgt. Da Arrays und Funktionen sowohl Objekte als auch Referenztypen sind, bedeutet dies, dass die Eigenschaften und Methoden in o1 haben den gleichen Namen wie die Eigenschaften und Methoden in o2, sie sind keine Referenz, sondern eine Kopie der vom Obj-Objekt definierten Eigenschaften und Methoden.

Dies ist kein Problem für Attribute, aber es ist ein großes Problem für Methoden, da die Methoden genau die gleiche Funktion ausführen, es jedoch zwei Kopien gibt, wenn ein Funktionsobjekt Tausende von Instanzen hat Methoden, dann muss jede Instanz eine Kopie von Tausenden von Methoden verwalten. Was können wir tun?

Prototyp

Immer wenn eine neue Funktion erstellt wird, wird ein Prototypattribut für die Funktion gemäß einem bestimmten Regelsatz erstellt. Standardmäßig erhält das Prototypattribut standardmäßig einen Konstruktor. (Konstruktor)-Attribut ist ein Zeiger auf die Funktion, in der sich das Prototyp-Attribut befindet. Schreiben Sie den Code und sehen Sie sich das Bild oben an.

function Person(){

            }

Wie aus der obigen Abbildung ersichtlich ist, erhält das Personenobjekt automatisch das Prototypattribut, und der Prototyp ist ebenfalls ein Objekt und erhält automatisch ein Konstruktorattribut, das auf das Personenobjekt verweist.

Wenn ein Konstruktor aufgerufen wird, um eine Instanz zu erstellen, enthält die Instanz einen internen Zeiger (in vielen Browsern heißt dieser Zeiger __proto__), der auf den Prototyp des Konstruktors zeigt. Diese Verbindung besteht zwischen dem Prototyp der Instanz und der Konstruktor zwischen der Instanz und dem Konstruktor.

function Person(name){
                this.name=name;
            }

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person('Byron');
            var person2=new Person('Frank');

Person-Instanz person1 enthält das Namensattribut und generiert automatisch ein __proto__-Attribut, das auf den Prototyp der Person verweist, der wie folgt aussieht:

Schreiben Sie ein Programm, um zu testen, ob die Attribute und Methoden im Prototyp gemeinsam genutzt werden können

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person('Byron');
            var person2=new Person('Frank');

            person1.share.push(1);
            person2.share.push(2);
            console.log(person2.share); //[1,2]

Wie erwartet! Wenn der Code ein Attribut eines Objekts liest, führt er tatsächlich eine Suche durch. Das Ziel ist ein Attribut mit einem bestimmten Namen. Die Suche beginnt zunächst bei der Objektinstanz Wenn es nicht gefunden wird, wird nach dem Prototyp gesucht. Wenn es immer noch nicht gefunden wird, wird das Prototypobjekt weiter rekursiert, bis es gefunden wird. Wenn das Objekt nach der Rekursion immer noch nicht gefunden wird, wird ein Fehler zurückgegeben . Wenn in einer Instanz eine Eigenschaft oder Funktion mit demselben Namen wie der Prototyp definiert wird, werden die Eigenschaften oder Funktionen des Prototyps auf die gleiche Weise überschrieben.

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];
            var person=new Person('Byron');
            person.share=0;

            console.log(person.share); //0而不是prototype中的[]

Einfache Objekte konstruieren

Natürlich ist der Prototyp nicht speziell zur Lösung der oben genannten Probleme definiert, aber er löst die oben genannten Probleme. Nachdem Sie dieses Wissen verstanden haben, können Sie ein wissenschaftliches Objekt mit hoher Wiederverwendbarkeit erstellen. Wenn Sie möchten, dass jede Instanz über separate Eigenschaften oder Methoden verfügt, definieren Sie diese Parameter können über den Konstruktor übergeben werden.

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            Person.prototype.printName=function(){
                alert(this.name);
            }

Weitere Artikel zur Verwendung von JavaScript-Prototypen finden Sie auf der chinesischen PHP-Website!