JavaScript OOP-objektorientiert

Objektorientierte Programmierung (OOP) ist ein Programmierparadigma und auch eine Methode zur Programmentwicklung. Ein Objekt bezieht sich auf eine Instanz einer Klasse. Es verwendet Objekte als grundlegende Einheit des Programms, wobei Programme und Daten darin eingefasst werden, um die Wiederverwendbarkeit, Flexibilität und Skalierbarkeit der Software zu verbessern. - Wikipedia

Im Allgemeinen umfasst objektorientiert: Vererbung, Einkapselung, Polymorphismus, Abstraktion

Vererbung der Objektform

Leichte Kopie

 var Person = {Name: 'Allin', Alter: 18, Adresse: {Home: 'Home', Office: 'Office',} sclools: ['x', 'z'],}; var programmierer = {Sprache: 'js',}; {}; für (var prop in p) {c [prop] = p [prop]; }} erweitert (Person, Programm); Programere.Name; // Allinprogramer.Address.Home; // HomeProgramer.address.home = 'House'; //houseparson.address.Home; // Haus

Aus den obigen Ergebnissen ist der Fehler der flachen Kopie, dass das Ändern des Wertes des Referenztyps im untergeordneten Objekt den Wert im übergeordneten Objekt beeinflusst, da in der flachen Kopie des Referenztyps nur die Adresse kopiert und auf dieselbe Kopie im Speicher verweist.

Tiefe Kopie

 Funktion expenddeeply (p, c) {var c = c || {}; für (var prop in p) {if (typeof p [prop] === "Objekt") {c [prop] = (p [prop] .Constructor === Array)? []: {}; ExtendDeeply (P [Prop], C [Prop]); } else {c [prop] = p [prop]; }}}

Verwenden Sie eine Rekursion für das tiefe Kopieren, damit die Änderung von Unterobjekten das übergeordnete Objekt nicht beeinflusst.

 ExtendDeeply (Person, Programmiererin); Programmiererin. // HOME verwendet Anrufe und gilt für die Ernenfunktion Eltern () {this.name = "abc"; this.address = {home: "home"};} function child () {parent.call (this); this.language = "js"; } Object.create () in es5 var p = {name: 'allin'}; var obj = Object.create (o); obj.name; // Allin

Object.create () als Alternative zum neuen Bediener wird erst nach ES5 veröffentlicht. Wir können diese Methode auch selbst simulieren:

 // simulieren Sie das Object.create () Methodenfunktion mycreate (o) {Funktion f () {}; F.Prototype = o; o = neu f (); return o;} var p = {name: 'allin'}; var obj = mycreate (o); obj.name; // Allin

Derzeit haben die neuesten Versionen der wichtigsten Browser (einschließlich IE9) diese Methode bereitgestellt. Wenn Sie auf einen alten Browser stoßen, können Sie den folgenden Code selbst zur Bereitstellung selbst verwenden.

 if (! object.create) {Object.create = Funktion (o) {Funktion f () {} f.prototype = o; Neue f () zurückgeben; }; }

Erbschaft von Klassen

 Object.Create () Funktionsperson (Name, Alter) {} Person.Prototype.headCount = 1; Person.Prototype.eat = function () {console.log ('eating ...'); // Erstellen Sie einen Vererbungsbeziehungsprogrammierer.Prototype.Constructor = Programmierer; // Ändern Sie den Zeig des Konstruktors

Rufen Sie die Methode der Elternklassen auf

 Funktionsperson (Name, Alter) {this.name = name; this.age = Age;} Person.Prototype.headCount = 1; Person.Prototype.eat = function () {console.log ('esse ...'); // Rufen Sie den Konstruktor der übergeordneten Klasse} programmer.Prototype = Object.create (Person.Prototyp); Programmer.Prototype.Constructor = Programmer; Programmer Person.Prototype.eat.Apply (this, Argumente); // Rufen Sie die Methode in der übergeordneten Klasse an} an}

Paket

Namespace

JS hat keinen Namespace, daher kann es mit Objekten simuliert werden.

 var app = {}; // Namespace App // Modul 1App.Module1 = {name: 'allin', f: function () {console.log ('Hi Robot'); }}; app.module1.name; // "Allin" app.module1.f (); // Hallo Roboter

Statische Mitglieder

 Funktionsperson (Name) {var age = 100; this.name = name;} // statische Mitgliedsperson.walk = function () {console.log ('static');}; Person.Walk (); // statisch

Privat und öffentlich

 Funktionsperson (ID) {// private Eigenschaften und Methoden var name = 'allin'; var Work = function () {console.log (this.id); }; // öffentliche Eigenschaften und Methoden this.id = id; this.say = function () {console.log ('say Hallo'); Arbeit.Call (dies); };}; var p1 = neue Person (123); p1.name; // undefinedp1.id; // 123p1.say (); // Hallo 123 sag

Modular

 var modulea; modulea = function () {var prop = 1; Funktion func () {} return {func: func, prop: prop};} (); // Die anonyme Funktion sofort ausführen

Prop, Func wird nicht in den globalen Bereich weitergegeben. Oder eine andere Art zum Schreiben, verwenden Sie neue

 modulea = new Function () {var prop = 1; Funktion func () {} this.func = func; this.prop = prop;}

Polymorph

Simulationsmethode nachladen

Das Argumenteattribut kann die Anzahl der tatsächlichen Parameter eines Funktionsaufrufs erhalten und dies verwenden, um die Überladung der Methode zu simulieren.

 Funktion Demo (a, b) {console.log (Demo.Length); // die Anzahl der formalen Parameter console.log (Argumente.length) erhalten; // Die Anzahl der tatsächlichen Parameter konsole.log (Argumente [0]); // der erste tatsächliche Parameter 4 -Konsole.log (Argumente [1]); // der zweite tatsächliche Parameter 5} Demo (4, 5, 6); // Implementieren Sie die Hinzufügung der Funktion der tatsächlichen Parameter variabler Länge add () {var total = 0; für (var i = argumente.length-1; i> = 0; i-) {Total += Argumente [i]; } return Total;} console.log (add (1)); // Implementieren Sie die Hinzufügung der Funktion der tatsächlichen Parameter variabler Länge add () {var total = 0; für (var i = argumente.length-1; i> = 0; i-) {Total += Argumente [i]; } return Total;} console.log (add (1)); // 1console.log (add (1, 2, 3)); // 7 // im Fall der verschiedenen Parameter Funktion fontSize () {var ele = document.getElementById ('JS'); if (Argumente.length == 0) {return ele.style.fontSize; } else {ele.style.fontsize = argumente [0]; }} fontsize (18); console.log (fontSize ()); // Bei verschiedenen Typenfunktionen function () {var ele = document.getElementById ('JS'); if (typeof argumente [0] === "Objekt") {für (var p in Argumenten [0]) {ele.style [p] = argumente [0] [p]; }} else {ele.style.fontsize = argumente [0]; Ele.Style.BackgroundColor = Argumente [1]; }} Einstellung (18, 'rot'); Einstellung ({fontSize: 20, HintergrundColor: 'Green'});

Methode umschreiben

 Funktion f () {} var f = new f (); // ff.run = function () {console.log ('fff');} f.run (); // fff

Zusammenfassung Klasse

Neuen Fehler werfen (''); Im Konstruktor wirft eine Ausnahme aus. Dies verhindert, dass diese Klasse direkt aufgerufen wird.

 Funktion detektorbase () {Neuen Fehler werfen ('Abstract -Klasse kann nicht direkt aufgerufen werden!');} detektorbase.prototype {Neuen Fehler werfen ('error');}; // var d = new detektorbase (); // Uncortn Fehler: Abstract -Klasse kann nicht direkt aufgerufen werden! Funktion linkDeTector () {} linkDeTector.Prototype = Object.Create (DetectorBase.Prototyp); LinkDetektor (); console.log (l); // linkDeTector {} __ proto__: linkDeTectorl.detect (); // Erkennung Start ... l.init (); // Unerleichter Fehler: Fehler