Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Anwendungsbeispiele der statischen Methode object.extend in Javascript

伊谢尔伦
Freigeben: 2017-07-27 17:33:28
Original
2814 Leute haben es durchsucht

Da es sich um eine Klasse handelt, gibt es abstrakte Klassen, konkrete Klassen und die Vererbung von Klassen. Gleichzeitig können Mitglieder einer Klasse Instanzmitglieder und statische Mitglieder haben.

Sehen Sie sich zunächst den folgenden Code im Prototyp an:

var Abstract = new Object(); 
Object.extend = function(destination, source) { 
for (property in source) { 
destination[property] = source[property]; 
} 
return destination; 
} 
Object.prototype.extend = function(object) { 
return Object.extend.apply(this, [this, object]); 
}
Nach dem Login kopieren

Der erste Code deklariert ein Objekt. Das Objekt ist eigentlich eine Funktion. Es hat also keine Mitglieder Da es sich um eine leere Klasse handelt, hat Abstract keine Mitglieder. Lassen Sie uns vorerst nicht darüber sprechen. Wir werden später sehen, dass dies die Grundlage abstrakter Klassen ist. Lassen Sie uns zunächst die folgende Syntax erklären:

function.member=function(){}
Nach dem Login kopieren

In diesem Fall wurde die Funktion im Allgemeinen definiert. Die Funktion dieser Anweisung besteht darin, der Funktion ein statisches Mitglied hinzuzufügen Es steht nach dem Gleichheitszeichen. Der zweite Code oben, Object.extend=..., fügt beispielsweise eine statische Methode „extend“ zur Object-Klasse hinzu. Ok, wir wissen, wie man statische Mitglieder für eine Klasse definiert. Dann möchten Sie bestimmt wissen, wie man Instanzmitglieder definiert. Es ist ganz einfach, fügen Sie einen Prototyp zwischen dem Klassennamen und dem Mitgliedsnamen ein:

function.prototype.member=function(){}
Nach dem Login kopieren

Prototyp kann nicht nur so verwendet werden, sondern auch:

function.prototype={ 
member1:function(){……}, 
member2:"abc", 
member3:function(){……} 
}
Nach dem Login kopieren

So wird die Definition von Instanzmitgliedern implementiert. Aber was bedeutet Prototyp? Im ersten Artikel habe ich gesagt, dass es direkt in {} eingeschlossen ist, um ein Objekt darzustellen. Beispielsweise sind Prototyp und Klasse auf diese Weise definierte globale Objekte. Betrachtet man die folgende Verwendung, folgt auf den Prototyp eine {}-Struktur. Ist es auch ein Objekt? Ja, das stimmt, ein Prototyp ist eigentlich ein Objekt! In JavaScript können wir einem Objekt beliebig Mitglieder hinzufügen, indem wir die folgende Syntax verwenden:
object.member=function(){...}; Solange es auf diese Weise definiert ist, kann ein Objekt dies sofort tun Mitglieder haben. JavaScript ist so magisch!
Okay, wir wissen jetzt, dass Prototyp ein Objekt und Funktion eine Funktion oder Klasse ist. Dann können wir uns Prototyp als statisches Mitglied vorstellen, das intern von jeder Klasse (Funktion) beibehalten wird. Seine Funktion besteht darin, alle Mitgliedszeiger dieser Klasse zu speichern. Diese Mitglieder sind jedoch nur Prototypen und wurden nicht initialisiert, was auch der ursprünglichen Bedeutung des Prototyps entspricht. Sie können Mitglieder jederzeit über das Prototypobjekt erweitern. Wenn eine Klasse neu ist, werden die Prototypmitglieder initialisiert und dann dem instanziierten Objekt zugewiesen.
Der dritte Codeabschnitt oben, Object.prototype.extend=..., fügt eine Instanzmethode zum Erweitern von Object hinzu. In der Instanzmethode können Sie auf diesen Zeiger verweisen, der auf das von dieser Klasse instanziierte Objekt selbst zeigt. Natürlich hat dieses Objekt eine Mitgliedserweiterung.
Bevor Sie fortfahren, verstehen Sie bitte zwei Sätze:

for(var p in object){} 
method.apply(object,arguments);
Nach dem Login kopieren
Der erste Satz: Listen Sie alle Mitglieder einer Variablen auf, wenn es sich um eine Funktion handelt, dann alle statischen Mitglieder, wenn es sich um ein Objekt handelt Das heißt, bei allen Instanzmitgliedern ist der Typ von p eine Zeichenfolge. Gibt den Namen des Mitglieds an. Sie können nicht nur variabel.member verwenden, um auf ein Mitglied zu verweisen, sondern auch variabel["member"]. Das Gleiche gilt wiederum für die Zuweisung. Dies erleichtert die Aufzählung der Mitglieder einer Variablen erheblich.

Die zweite Anweisung: Wenden Sie die Methodenmethode zur Ausführung auf das Objekt an, und der Parameter ist das Argumentarray. Hinweis: Die Methode ist kein Mitglied des Objekts. Wir können jedoch davon ausgehen, dass die Ausführung dieser Anweisung Folgendes bedeutet: object.method(arguments). Dies ist eine sehr wichtige Methode, die später häufig verwendet wird und mit der Sie sich nach und nach vertraut machen werden.
Fahren wir mit „extend“ fort. Es handelt sich um eine sehr wichtige Methode. Sie sehen, dass sie sowohl ein statisches Mitglied als auch ein Instanzmitglied der Klasse „Object“ ist. Werfen wir einen Blick darauf: Es empfängt zwei Parameter, Ziel und Quelle. Wenn Ziel und Quelle beide Klassen sind, besteht seine Funktion darin, alle statischen Mitglieder der Klassenquelle in das Klassenziel zu kopieren. Wenn Ziel und Quelle beide Objekte sind, dann alle Instanzmitglieder werden kopiert. Wenn zu diesem Zeitpunkt bereits ein Mitglied mit demselben Namen im Ziel vorhanden ist, wird dieses Mitglied überschrieben. Das heißt, wenn das Ziel alle Mitglieder der Quelle hat, gibt die Funktion dieses Ziel zurück. Schauen wir uns „extend“ als Instanzmitglied von Object an:

Object.prototype.extend = function(object) { 
return Object.extend.apply(this, [this, object]); 
}
Nach dem Login kopieren
Zuerst ist mir etwas schwindelig, aber keine Sorge, Sie können es trotzdem verstehen erklärt, und sein Aufrufer ist eine Methode, und Object.extend ist eine statische Methode, die auf diese angewendet wird, die eine Instanz von Object ist, vorausgesetzt, es ist obj. Die folgenden eckigen Klammern sind ein Array, das zwei Mitglieder enthält, this und Objekt. Dieses Array ist eigentlich der Argumentparameter der statischen Member-Erweiterung „Object“. Dann entspricht diese Anweisung der Ausführung von

obj.extend(this, object);
dies wird nicht erklärt, es repräsentiert sich selbst. Was ist Objekt? Parameter sind Parameter, die von der Instanzmethode „extend“ übergeben werden. Lassen Sie sich nicht verwirren. Wie wäre es mit verlängern? obj definiert nicht den Extend-Instanzmember, kann aber über Apply den statischen Member Extend von Object verwenden. Werfen wir einen Blick auf den Funktionskörper von Extend:

Object.extend = function(destination, source) { 
for (property in source) { 
destination[property] = source[property]; 
} 
return destination; 
}
Nach dem Login kopieren

因为obj是对象,object也是对象,即destination和source都是对象,于是函数的作用就是使obj具有object的所有成员。并且会返回obj。听起来有点拗口,但逻辑很简单:让obj“继承于”object!很好,我们看到了继承,但你肯定会问,对象的继承,第一次听说啊,我们讲继承都是讲的类的继承。没错,现在的确还没有看到真正的类继承,但已经近在眼前了:类不就是有个prototype吗,而prototype是对象!
好,想到这一点,类的继承语法看似很简单了:

b.prototype.extend(a.prototype);
Nach dem Login kopieren

让b继承a。
可是事实却没那么简单:prototype是存放方法原型指针,extend方法没有初始化,不能使用!要使用extend,就必须实例化一个对象。还是看看prototype是怎么做的吧:

b.prototype=(new a()).extend(b.prototype);
Nach dem Login kopieren

很高明的办法!充分说明了函数其实也是一个变量的道理。先实例化a对象,然后在它基础上调用extend,将所有的成员b.prototype的成员覆盖到a的对象,然后把这个a对象再赋值给b.prototype。完成了b从a继承的工作。在实际使用中,一般的用法都是:

b.prototype=(new a()).extend({});
Nach dem Login kopieren

因为让一个b继承自a,通常b之前都是一个未定义的类,所以后面的{}中其实就可以定义类成员。当然,你也可以先定义,再继承,只是和传统概念有所区别了。 

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsbeispiele der statischen Methode object.extend in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!