Frage an oop, object, javascript – Was ist der richtige Weg, um eine Javascript-Klasse zu erstellen?

9

Ich versuche herauszufinden, wie ich meine Javascript-Klassen (oder Singleton-Objekte) richtig konstruieren kann.

var obj = new Object();
obj.foo = 'bar';
obj.method = function() { ...}

var obj = {
    foo : 'bar',
    method : function() { ...}
}

var obj = function(){}
obj.prototype = {
    foo : 'bar',
    method: function() { ... }
}

Ich möchte in der Lage sein, einige Eigenschaften festzulegen und die verfügbaren Methoden zuzuweisen. Ich möchte auch in der Lage sein, Dinge wie zu verwendenmixins Auf die Objekte kann ich also diese Objekte mit Dingen wie erweiternVeranstaltungen.

@Xeoncross: Nicht, dass ich es wüsste. :-) T.J. Crowder
@Xeoncross - Sie haben auch gemachtnew Boolean() ;) Derek 朕會功夫
@Xeoncross Sie haben gemachtnew Window auch, aber du kannst es nicht benutzen;) Niet the Dark Absol
und neues Array und neue Nummer und neu ... Besser, das Literal zu verwenden elclanrs

Deine Antwort

4   die antwort
8

wie ich meine Javascript-Klassen (oder Singleton-Objekte) richtig konstruieren kann.

Es gibt einen großen Unterschied zwischen diesen ("Klassen" und Singleton-Objekten). Ihre ersten Beispiele sind Einzelobjekte (Singletons). Ihr drittes (letztes) Beispiel erstellt eineKonstruktorfunktion Auf diese Weise können Sie mehrere Objekte mit demselben Prototyp erstellen. ich würde empfehlenvermehrend dasprototype Eigenschaft in der Konstruktorfunktion, anstatt sie zu ersetzen, wie Sie es tun, z.

var Thingy = function() {   // Or use a function declaration rather than expression
    // Optional initialization code here
};
Thingy.prototype.foo = 'bar';
Thingy.prototype.method = function() {
    // Method code here
};

(Konstruktorfunktionen beginnen standardmäßig mit einem Großbuchstaben.)

Welche Sie verwenden (Singleton- oder Konstruktorfunktion), hängt davon ab, was Sie benötigen.

Ab ES2015 (auch bekannt als "ES6") ist es einfacher, obwohl es keine neue Syntax zum Definieren einer Nicht-Methoden-Prototyp-Eigenschaft gibt (Ihrefoo); es wird wahrscheinlich einmal in ES2017 oder ES2018 gebendieser Vorschlag bewegt sich vorwärts, aber bis dahin:

class Thingy {
    constructor() {
        // Optional initialization code here
    }
    method() {
    // Method code here
    }
}
Thingy.prototype.foo = 'bar';

Wenn Sie sich mit Vererbungshierarchien befassen müssen, ist in der alten ES5-Syntax einiges an Installationsaufwand erforderlich:

var Base = function() {
};
Base.prototype.method = function(arg1) {
    // ...
};

var Derived = function() {
    Base.call(this);
};
Derived.prototype = Object.create(Base.prototype);
Derived.prototype.constructor = Derived;
Derived.prototype.method = function(arg1) {
    // Using Base's `method`, if desired, is a bit ugly:
    Base.prototype.method.call(this, arg1);
};

... aus diesem Grund sahen Sie früher Bibliotheken wie die von PrototypeClass Zeug, oder mein eigenesAbstammung; Diese sind jedoch durch die ES2015-Syntax veraltet, was es ausgesprochen einfach macht:

class Base {
    method(arg1) {
        // ...
    }
}
class Derived extends Base {
    method(arg1) {
        // Use's the superclass's `method`, if desired, is easy:
        super.method(arg1);
    }
}

Sind dieTitel Ihrer Frage:

Was ist der richtige Weg, um eine Javascript-Klasse zu erstellen?

Es gibt mehrere gleichermaßen korrekte Möglichkeiten, "Klassen" von Objekten in JavaScript zu erstellen, da JavaScript eine sehr flexible Sprache ist. Es gibt Standard-Konstruktorfunktionen, "Builder" -Funktionen,Object.create (in ES5-fähigen Umgebungen), mit denen Sie direktere prototypische Vererbung durchführen können, und mehrere andere. Eines der großartigen Dinge an JavaScript ist, dass Sie Ihren "Klassenstil" auswählen können.

1

ng suchen, sollten Sie ein Framework verwenden.

Backbone.js hat alles was Sie brauchen, einschließlich Mixins und ein Event-System.

Wenn Sie auch einige Widgets benötigen, ziehen Sie in Betracht

qooxdooExtJS

Beide bieten eine saubere Architektur und können ohne Widgets verwendet werden, erfordern jedoch etwas mehr Lernaufwand als Backbone.

Die Vererbungsstruktur, die diese Frameworks bereitstellen, ähnelt stark der üblichen klassenbasierten Struktur (denken Sie an Java). Das liegt daran, dass sie intern spezielle Objekte erstellen, die lediglich als Objekte dienenprototypes für andere und nehmen damit die Rolle von Klassen ein.

Zum Beispiel, wenn Sie anrufenExt.define('MyClass', {extend: 'ParentClass', mixins: foo, ... }), dann erzeugt Ext einefunction "MyClass"und ein anonymes Objekt (MyClass.prototype) enthält die von Ihnen angegebenen Methoden.

0

die ES5 unterstützt, können Sie dies tun:

var Person = {
  foo: ...,
  bar: ...
};

var Mike = Object.create(Person, { baz: ... });
1

Sie können auch Folgendes verwenden:

function O(x,y) {
   this.x=x;
   this.y=y;
   this.method=function() {...}
   return this;
}

var o=new O(0,0);

Verwandte Fragen