Heim > Web-Frontend > js-Tutorial > Objektorientiertes Design in JavaScript

Objektorientiertes Design in JavaScript

高洛峰
Freigeben: 2016-11-26 11:29:49
Original
1057 Leute haben es durchsucht

Nach der Definition der W3C School ist Javascript eine objektorientierte Sprache, obwohl es überall Objekte gibt. Es ist verständlich, dass es nur eine Definition, aber keine Deklaration gibt, und es kann direkt verwendet werden . Jedes darin enthaltene Objekt kann als eine Kombination von Schlüsselwerten verstanden werden.

Anbei finden Sie eine Beschreibung der W3C School:
Anforderungen für objektorientierte Sprachen
Eine objektorientierte Sprache muss bieten Entwicklern vier grundlegende Funktionen:
Kapselung – Die Fähigkeit, verwandte Informationen (entweder Daten oder Methoden) in Objekten zu speichern
Aggregation – Die Fähigkeit, ein Objekt in einem anderen Objekt zu speichern
Vererbung – Von einer anderen Klasse abgeleitet ( oder Klassen) Die Fähigkeit von Klasseneigenschaften und -methoden
Polymorphismus – die Fähigkeit, Funktionen oder Methoden zu schreiben, die auf mehrere Arten ausgeführt werden können
ECMAScript unterstützt diese Anforderungen und kann daher als objektorientiert betrachtet werden.


Das Folgende ist eine relativ reguläre Objektdefinition (die folgenden Beispiele beziehen sich auf <>):
var person = new Object();
person .name = "Horky";
person.age = 40;
person.job = "Software Engineer";

person.sayName = function(){
document.write (this .name);
}

Aufrufmethode:
person.sayName();

document.write("

Age: ");
document.write(person.age);

document.write("

Job: ");
document.write(person["job"]);

Nun ja, alle Eigenschaften sind öffentlich und es gibt zwei verschiedene Möglichkeiten, auf Eigenschaften zuzugreifen (Einschränkungen der Zugänglichkeit können durch die Attribute der Eigenschaft festgelegt werden.)

Eine andere Möglichkeit, Schlüsselwerte zu definieren ist lockerer und auf den Punkt gebracht, wird aber von älteren Browserversionen möglicherweise nicht unterstützt:
var person = (
Name: „Horky“,
Alter: 40,
Job: „Software Engineer“ ,

sayName: function(){
document.write(this.name);
}
};

Da es sich bei Javascript-Variablen um lose Typen handelt, Um es ganz klar auszudrücken: Es handelt sich um einen anarchischen Typ. Daher ist es nicht notwendig, zu Beginn keine vollständige Definition anzugeben, aber es ist auch wie folgt zulässig (zur Demonstration erforderlich, niemals empfohlen):
var person = neues Objekt ();

person.name = "Horky";
person.sayName = function()
{
document.write(this.name);
}

person.sayName();
person.age = 40;
document.write("

Age: ");
document.write( person.age);
person.job = "Software Engineer";
document.write("

Job: ");
document.write(person["job"]) ;

ist nicht unbegrenzt. Wenn der erste Satz wie folgt geändert wird, funktioniert er nicht:
var person = "Undefiniert";
Der Grund dafür ist, dass der grundlegende Datentyp in Javascript ziemlich ist Im Gegensatz zu Referenztypen. Lassen Sie uns die zuvor erwähnten objektorientierten Funktionen überprüfen. Über den dritten Punkt werden wir natürlich sprechen Tatsächlich ist es etwas weit hergeholt. Ich persönlich denke, es ähnelt eher einer Funktion mit variablen Parametern in C/C++, da die Parameter einer Funktion sehr willkürlich sein können JavaScript ist zu faul, um es einzuschränken. Das Ergebnis ist Polymorphismus:

Funktion Person(name, age, job)

{
this.name = "Mr Nobody!" ;
this.age = 0;
this.job = "Schwer zu sagen!";

switch(arguments.length)

{

Fall 3:
this .job = job;
Fall 2:
this.age = age;
Fall 1:
this.name = name;
break;
}
this.introduceSelf = function()

{

document.write("

Mein Name ist: "+this.name);

document.write("

"+ this.age+" Jahre alt!");

document.write("

Und mein Job ist: "+this.job);
}
}

var horky = new Person("Horky",40,"Software Engineer");

var arthas = new Person("Arthas ",22);

var none = new Person();

Diese Funktion Person() ist eine Konstruktorfunktion, die ein Person-Objekt erstellt und zurückgibt. Basierend auf den verschiedenen übergebenen Parametern werden verschiedene Initialisierungen durchgeführt in, was eine Art Polymorphismus ist.

Erweitern Sie ein wenig, wenn ein Objekt übergeben wird. Dies ist das Muster der prototypischen Vererbung (siehe < 6.3.4).

Eine globale Funktion hinzufügen:

function object(o)
{
function F() {};
F.prototype = o;
return new F();
}

Dann probieren Sie die folgenden zwei neuen Objekte aus:
var horky_alias = object(horky);
var arthas_alias = object(horky, {name:{value:"Arthas"}});
Beim Kopieren Horky, der Name des zweiten Objekts wurde ebenfalls geändert. Aufgrund der Existenz dieses speziellen Zeigers ist all dies möglich. Dies ist ein Zeiger auf ein Objekt, und dieses Objekt enthält Attribute und Methoden, die von allen Instanzen gemeinsam genutzt werden können.

Das Folgende ist: Lassen Sie uns über Vererbung sprechen Offen gesagt bedeutet Vererbung in JavaScript, dass das untergeordnete Objekt auf das übergeordnete Objekt zugreifen kann. Es gibt also zwei wichtige Punkte: Das untergeordnete Objekt muss eine Instanz des übergeordneten Objekts haben, also eine typische Definition des untergeordneten Objekts 🎜>function Boy(name, age, job)

{
this.sex = "Male";
this.prototype = new Person(name, age, job);
this.introduceSelf = function()

{

this.prototype.introduceSelf();

document.write("

I am BOY!" );
}
}

var boy = new Boy("A",3);

Wenn Sie der Meinung sind, dass die Verwendung von Prototypen zu niedrig ist und ein bisschen einem Hack ähnelt, dann sind Sie hier genau richtig kann auch „ausleihende Konstruktoren“ verwenden, um eine einfachere Vererbung zu erreichen

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