Welche Techniken können verwendet werden, um eine Klasse in JavaScript zu definieren, und was sind ihre Nachteile?

Question

Ich ziehe es vor, OOP in großen Projekten wie dem, an dem ich gerade arbeite, zu verwenden. Ich muss mehrere Klassen in JavaScript erstellen, aber wenn ich mich nicht irre, gibt es zumindest ein paar Möglichkeiten, das zu tun. Wie sieht die Syntax aus und warum sollte man es auf diese Weise tun?

Ich möchte die Verwendung von Bibliotheken von Drittanbietern vermeiden - zumindest am Anfang.
Auf der Suche nach weiteren Antworten fand ich den Artikel Objektorientierte Programmierung mit JavaScript, Teil I: Vererbung - Doc JavaScript das die objektorientierte Programmierung in JavaScript behandelt. Gibt es einen besseren Weg, um Vererbung durchzuführen?

Answer 1

Der einfache Weg ist:

function Foo(a) {
  var that=this;

  function privateMethod() { .. }

  // public methods
  that.add = function(b) {
    return a + b;
  };
  that.avg = function(b) {
    return that.add(b) / 2; // calling another public method
  };
}

var x = new Foo(10);
alert(x.add(2)); // 12
alert(x.avg(20)); // 15

Der Grund für that ist das this kann an etwas anderes gebunden werden, wenn Sie eine Methode als Ereignisbehandler angeben, so dass Sie den Wert bei der Instanziierung speichern und später verwenden können.

Edit: Es ist definitiv nicht der beste Weg, nur ein einfacher Weg. Ich warte auch auf gute Antworten!

Answer 2

Wahrscheinlich möchten Sie einen Typ mit Hilfe des Faltmusters erstellen:

    // Here is the constructor section.
    var myType = function () {
        var N = {}, // Enclosed (private) members are here.
            X = this; // Exposed (public) members are here.

        (function ENCLOSED_FIELDS() {
            N.toggle = false;
            N.text = '';
        }());

        (function EXPOSED_FIELDS() {
            X.count = 0;
            X.numbers = [1, 2, 3];
        }());

        // The properties below have access to the enclosed fields.
        // Careful with functions exposed within the closure of the
        // constructor, each new instance will have it's own copy.
        (function EXPOSED_PROPERTIES_WITHIN_CONSTRUCTOR() {
            Object.defineProperty(X, 'toggle', {
                get: function () {
                    var before = N.toggle;
                    N.toggle = !N.toggle;
                    return before;
                }
            });

            Object.defineProperty(X, 'text', {
                get: function () {
                    return N.text;
                },
                set: function (value) {
                    N.text = value;
                }
            });
        }());
    };

    // Here is the prototype section.
    (function PROTOTYPE() {
        var P = myType.prototype;

        (function EXPOSED_PROPERTIES_WITHIN_PROTOTYPE() {
            Object.defineProperty(P, 'numberLength', {
                get: function () {
                    return this.numbers.length;
                }
            });
        }());

        (function EXPOSED_METHODS() {
            P.incrementNumbersByCount = function () {
                var i;
                for (i = 0; i < this.numbers.length; i++) {
                    this.numbers[i] += this.count;
                }
            };
            P.tweak = function () {
                if (this.toggle) {
                    this.count++;
                }
                this.text = 'tweaked';
            };
        }());
    }());

Dieser Code gibt Ihnen einen Typ namens myType . Es wird interne private Felder mit der Bezeichnung umzuschalten. y Text . Es wird auch diese exponierten Mitglieder haben: die Felder zählen y Zahlen die Eigenschaften umzuschalten. , Text y AnzahlLänge die Methoden incrementNumbersByCount y zwicken. .

Das Faltmuster wird hier ausführlich beschrieben: Javascript Folding Pattern

Answer 3

Code Golf für @liammclennan's respuesta .

var Animal = function (args) {
  return {
    name: args.name,

    getName: function () {
      return this.name; // member access
    },

    callGetName: function () {
      return this.getName(); // method call
    }
  };
};

var cat = Animal({ name: 'tiger' });
console.log(cat.callGetName());

Answer 4

MooTools (My Object Oriented Tools) basiert auf der Idee der Klassen . Sie können sogar erweitern und mit Vererbung implementieren.

Wenn gemeistert, macht es für lächerlich wiederverwendbar, leistungsstarke Javascript.

Answer 5

Objektbasierte Klassen mit Vererbung

var baseObject = 
{
     // Replication / Constructor function
     new : function(){
         return Object.create(this);   
     },

    aProperty : null,
    aMethod : function(param){
      alert("Heres your " + param + "!");
    },
}

newObject = baseObject.new();
newObject.aProperty = "Hello";

anotherObject = Object.create(baseObject); 
anotherObject.aProperty = "There";

console.log(newObject.aProperty) // "Hello"
console.log(anotherObject.aProperty) // "There"
console.log(baseObject.aProperty) // null

Einfach, süß und schnell erledigt.