Heim Web-Frontend js-Tutorial Minimalistische Methode zur Vervollständigung der JavaScript-Kapselung und -Vererbung

Minimalistische Methode zur Vervollständigung der JavaScript-Kapselung und -Vererbung

Nov 30, 2017 am 09:25 AM
javascript js 继承

In diesem Artikel werden wir über ein relativ neues Wissen für Anfänger sprechen: das Schreiben von JavaScript-Klassen mit der minimalistischen Methode. Der „minimalistische Ansatz“ ist das Werk des niederländischen Programmierers Gabor de Diese von Mooij vorgeschlagene Methode verwendet keinen Prototyp und ist sehr einfach bereitzustellen. Dies ist wahrscheinlich der Grund, warum sie als „minimalistische Methode“ bezeichnet wird. Im Folgenden wird die Verwendung der minimalistischen Methode zur Vervollständigung der JavaScript-Kapselung und -Vererbung vorgestellt. Ich hoffe, dass dies für alle hilfreich ist.

1. Kapselung

Erstens wird auch ein Objekt verwendet, um eine „Klasse“ zu simulieren. Definieren Sie in dieser Klasse einen Konstruktor createNew(), um Instanzen zu generieren.

var Cat = {
    createNew: function(){
      // some code here
    }
};
Nach dem Login kopieren


Definieren Sie dann in createNew() ein Instanzobjekt und verwenden Sie dieses Instanzobjekt als Rückgabewert.

var Cat = {
     createNew: function(){
       var cat = {};
       cat.name = "大毛";
       cat.makeSound = function(){ alert("喵喵喵"); };
       return cat;
     }
 };
Nach dem Login kopieren

Rufen Sie bei Verwendung von

die Methode createNew() auf, um das Instanzobjekt abzurufen.

var cat1 = Cat.createNew();
cat1.makeSound(); // 喵喵喵
Nach dem Login kopieren


Der Vorteil dieser Methode besteht darin, dass sie leicht verständlich ist, eine klare und elegante Struktur aufweist und dem traditionellen Konstrukt der „objektorientierten Programmierung“ entspricht Daher können die folgenden Merkmale problemlos bereitgestellt werden.

2. Vererbung

Lassen Sie eine Klasse eine andere Klasse erben, was sehr praktisch zu implementieren ist. Rufen Sie einfach die Methode createNew() des letzteren in der Methode createNew() des ersteren auf.
Definieren Sie zunächst eine Animal-Klasse:

var Animal = {
    createNew: function(){
      var animal = {};
      animal.sleep = function(){ alert("睡懒觉"); };
      return animal;
    }
};
Nach dem Login kopieren


Rufen Sie dann in der Methode createNew() von Cat die Methode createNew() von Animal auf

var Cat = {
     createNew: function(){
       var cat = Animal.createNew();
       cat.name = "大毛";
       cat.makeSound = function(){ alert("喵喵喵"); };
       return cat;
     }
 };
Nach dem Login kopieren


Die auf diese Weise erhaltene Cat-Instanz erbt die Animal-Klasse.

var cat1 = Cat.createNew();
cat1.sleep(); // 睡懒觉
Nach dem Login kopieren


3. Private Eigenschaften und private Methoden

In der Methode createNew(), sofern dies nicht der Fall ist Im Cat-Objekt definiert. Die Methoden und Eigenschaften sind alle privat.

var Cat = {
    createNew: function(){
      var cat = {};
      var sound = "喵喵喵";//私有属性
      cat.makeSound = function(){ 
     alert(sound); 
    };
      return cat;
    }
};
Nach dem Login kopieren


Die interne Variable sound im obigen Beispiel kann nicht extern gelesen werden und kann nur über die öffentliche Methode makeSound() von cat gelesen werden .

var cat1 = Cat.createNew();
alert(cat1.sound); // undefined
Nach dem Login kopieren


4. Datenfreigabe

Manchmal benötigen wir alle Instanzobjekte, um dasselbe lesen und schreiben zu können interne Daten. Kapseln Sie zu diesem Zeitpunkt einfach die internen Daten innerhalb des Klassenobjekts und außerhalb der Methode createNew().

var Cat = {
    sound : "喵喵喵",
    createNew: function(){
      var cat = {};
      cat.makeSound = function(){ alert(Cat.sound); };
      cat.changeSound = function(x){ Cat.sound = x; };
      return cat;
    }
};
Nach dem Login kopieren


Generieren Sie dann zwei Instanzobjekte:

var cat1 = Cat.createNew();
var cat2 = Cat.createNew();
cat1.makeSound(); // 喵喵喵
Nach dem Login kopieren


Wenn zu diesem Zeitpunkt ein Instanzobjekt die gemeinsam genutzten Daten ändert, ist auch das andere Instanzobjekt betroffen.

cat2.changeSound("啦啦啦");
cat1.makeSound(); // 啦啦啦
Nach dem Login kopieren

Minimalismus sieht zwar schön aus, hat aber auch Mängel. Erstens kann „instanceof“ nicht verwendet werden, um die Klasse zu bestimmen, zu der ein Objekt gehört, „cat1-Instanz“. „Cat“ kann nicht passieren. Obwohl der Minimalismus die Nachteile der Verwendung der Prototypenkette beseitigt (Eigenschaften können nicht privat sein, das Erstellen und Erben von Objekten ist nicht intuitiv), werden auch die Nachteile der Nichtverwendung der Prototypenkette aufgedeckt: Jedes Mal, wenn ein Wenn eine Instanz generiert wird, muss sie mehr Speicher beanspruchen.

Der obige Inhalt handelt von der minimalistischen Methode zum Schreiben von JavaScript.

Verwandte Empfehlungen:

JavaScript objektorientiert (minimalistischer Ansatz)_js objektorientiert

Methoden zur Behandlung von JavaScript-Ausnahmen

JavaScript-Simulation Drei Möglichkeiten zur Implementierung der Kapselung und ihre Unterschiede

Das obige ist der detaillierte Inhalt vonMinimalistische Methode zur Vervollständigung der JavaScript-Kapselung und -Vererbung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Apr 03, 2024 am 11:55 AM

Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert

Detaillierte Erläuterung der C++-Funktionsvererbung: Wie werden „Basisklassenzeiger' und „abgeleitete Klassenzeiger' bei der Vererbung verwendet? Detaillierte Erläuterung der C++-Funktionsvererbung: Wie werden „Basisklassenzeiger' und „abgeleitete Klassenzeiger' bei der Vererbung verwendet? May 01, 2024 pm 10:27 PM

Verwenden Sie bei der Funktionsvererbung „Basisklassenzeiger“ und „abgeleitete Klassenzeiger“, um den Vererbungsmechanismus zu verstehen: Wenn der Basisklassenzeiger auf das abgeleitete Klassenobjekt zeigt, wird eine Aufwärtstransformation durchgeführt und nur auf die Mitglieder der Basisklasse zugegriffen. Wenn ein abgeleiteter Klassenzeiger auf ein Basisklassenobjekt zeigt, wird eine Abwärtsumwandlung durchgeführt (unsicher) und muss mit Vorsicht verwendet werden.

Wie wirken sich Vererbung und Polymorphismus auf die Klassenkopplung in C++ aus? Wie wirken sich Vererbung und Polymorphismus auf die Klassenkopplung in C++ aus? Jun 05, 2024 pm 02:33 PM

Vererbung und Polymorphismus wirken sich auf die Kopplung von Klassen aus: Vererbung erhöht die Kopplung, da die abgeleitete Klasse von der Basisklasse abhängt. Polymorphismus reduziert die Kopplung, da Objekte über virtuelle Funktionen und Basisklassenzeiger konsistent auf Nachrichten reagieren können. Zu den Best Practices gehören der sparsame Umgang mit der Vererbung, die Definition öffentlicher Schnittstellen, das Vermeiden des Hinzufügens von Datenelementen zu Basisklassen und die Entkopplung von Klassen durch Abhängigkeitsinjektion. Ein praktisches Beispiel, das zeigt, wie Polymorphismus und Abhängigkeitsinjektion verwendet werden, um die Kopplung in einer Bankkontoanwendung zu reduzieren.

Ausführliche Erklärung der C++-Funktionsvererbung: Wie kann man Fehler bei der Vererbung debuggen? Ausführliche Erklärung der C++-Funktionsvererbung: Wie kann man Fehler bei der Vererbung debuggen? May 02, 2024 am 09:54 AM

Tipps zum Debuggen von Vererbungsfehlern: Stellen Sie sicher, dass die Vererbungsbeziehungen korrekt sind. Verwenden Sie den Debugger, um den Code schrittweise durchzugehen und Variablenwerte zu untersuchen. Stellen Sie sicher, dass Sie den virtuellen Modifikator richtig verwenden. Untersuchen Sie das Problem der Vererbungsdiamanten, das durch versteckte Vererbung verursacht wird. Suchen Sie nach nicht implementierten rein virtuellen Funktionen in abstrakten Klassen.

Die Beziehung zwischen js und vue Die Beziehung zwischen js und vue Mar 11, 2024 pm 05:21 PM

Die Beziehung zwischen js und vue: 1. JS als Eckpfeiler der Webentwicklung; 2. Der Aufstieg von Vue.js als Front-End-Framework; 3. Die komplementäre Beziehung zwischen JS und Vue; Vue.

Ausführliche Erklärung der C++-Funktionsvererbung: Wie versteht man die Beziehung „is-a' und „has-a' bei der Vererbung? Ausführliche Erklärung der C++-Funktionsvererbung: Wie versteht man die Beziehung „is-a' und „has-a' bei der Vererbung? May 02, 2024 am 08:18 AM

Detaillierte Erläuterung der C++-Funktionsvererbung: Beherrschen Sie die Beziehung zwischen „is-a“ und „has-a“ Was ist Funktionsvererbung? Funktionsvererbung ist eine Technik in C++, die in einer abgeleiteten Klasse definierte Methoden mit in einer Basisklasse definierten Methoden verknüpft. Es ermöglicht abgeleiteten Klassen, auf Methoden der Basisklasse zuzugreifen und diese zu überschreiben, wodurch die Funktionalität der Basisklasse erweitert wird. „Ist-ein“- und „Hat-ein“-Beziehungen Bei der Funktionsvererbung bedeutet die „Ist-ein“-Beziehung, dass die abgeleitete Klasse ein Untertyp der Basisklasse ist, d. h. die abgeleitete Klasse „erbt“ die Merkmale und das Verhalten von die Basisklasse. Die „has-a“-Beziehung bedeutet, dass die abgeleitete Klasse einen Verweis oder Zeiger auf das Basisklassenobjekt enthält, d. h. die abgeleitete Klasse „besitzt“ das Basisklassenobjekt. SyntaxDas Folgende ist die Syntax für die Implementierung der Funktionsvererbung: classDerivedClass:pu

„Einführung in die objektorientierte Programmierung in PHP: Vom Konzept zur Praxis' „Einführung in die objektorientierte Programmierung in PHP: Vom Konzept zur Praxis' Feb 25, 2024 pm 09:04 PM

Was ist objektorientierte Programmierung? Objektorientierte Programmierung (OOP) ist ein Programmierparadigma, das reale Entitäten in Klassen abstrahiert und Objekte zur Darstellung dieser Entitäten verwendet. Klassen definieren die Eigenschaften und das Verhalten von Objekten und Objekte instanziieren Klassen. Der Hauptvorteil von OOP besteht darin, dass Code einfacher zu verstehen, zu warten und wiederzuverwenden ist. Grundkonzepte von OOP Zu den Hauptkonzepten von OOP gehören Klassen, Objekte, Eigenschaften und Methoden. Eine Klasse ist der Bauplan eines Objekts, der seine Eigenschaften und sein Verhalten definiert. Ein Objekt ist eine Instanz einer Klasse und verfügt über alle Eigenschaften und Verhaltensweisen der Klasse. Eigenschaften sind Merkmale eines Objekts, das Daten speichern kann. Methoden sind Funktionen eines Objekts, die mit den Daten des Objekts arbeiten können. Vorteile von OOP Zu den Hauptvorteilen von OOP gehören: Wiederverwendbarkeit: OOP kann den Code erweitern

Die KI-Ära von JS ist da! Die KI-Ära von JS ist da! Apr 08, 2024 am 09:10 AM

Einführung in JS-Torch JS-Torch ist eine Deep-Learning-JavaScript-Bibliothek, deren Syntax PyTorch sehr ähnlich ist. Es enthält ein voll funktionsfähiges Tensorobjekt (kann mit verfolgten Farbverläufen verwendet werden), Deep-Learning-Ebenen und -Funktionen sowie eine automatische Differenzierungs-Engine. JS-Torch eignet sich für die Deep-Learning-Forschung in JavaScript und bietet viele praktische Tools und Funktionen zur Beschleunigung der Deep-Learning-Entwicklung. Image PyTorch ist ein Open-Source-Deep-Learning-Framework, das vom Meta-Forschungsteam entwickelt und gepflegt wird. Es bietet einen umfangreichen Satz an Tools und Bibliotheken zum Erstellen und Trainieren neuronaler Netzwerkmodelle. PyTorch ist einfach, flexibel und benutzerfreundlich konzipiert und verfügt über dynamische Berechnungsdiagrammfunktionen

See all articles