Es gibt drei Arten von Eigenschaften

JavaScript- Objektliterale erlauben Ihnen, direkt einfache Objekte (direkte Instanzen von Object) zu erstellen. Der folgende Code verwendet ein Objektliteral, um ein Objekt der Variablen jane zuzuweisen. Das Objekt hat die beiden Eigenschaften: name und describe. describe ist eine Methode:

var jane = {
    name: 'Jane',

    describe: function () {
        return 'Person named '+this.name;  // (1)
    },  // (2)
};

Sie könnten den Eindruck bekommen, dass Objekte nur Maps von Strings zu Werten sind. Aber sie sind mehr als das: sie sind echte Allzweckobjekte. Zum Beispiel können Sie Vererbung zwischen Objekten verwenden (siehe Ebene 2: Die Prototyp-Beziehung zwischen Objekten) und Sie können Objekte vor Änderungen schützen. Die Möglichkeit, Objekte direkt zu erstellen, ist eine der herausragenden Eigenschaften von JavaScript: Sie können mit konkreten Objekten beginnen (keine Klassen benötigt!) und Abstraktionen später einführen. Zum Beispiel sind Konstruktoren, die Fabriken für Objekte sind (wie in Ebene 3: Konstruktoren – Fabriken für Instanzen besprochen), grob ähnlich wie Klassen in anderen Sprachen.

Der Punktoperator bietet eine kompakte Syntax für den Zugriff auf Eigenschaften. Die Eigenschaftsschlüssel müssen Bezeichner sein (siehe Gültige Bezeichner). Wenn Sie Eigenschaften mit beliebigen Namen lesen oder schreiben möchten, müssen Sie den Klammeroperator verwenden (siehe Klammeroperator ([]): Zugriff auf Eigenschaften über berechnete Schlüssel).

Die Beispiele in diesem Abschnitt arbeiten mit dem folgenden Objekt

var jane = {
    name: 'Jane',

    describe: function () {
        return 'Person named '+this.name;
    }
};

> jane.name  // get property `name`
'Jane'
> jane.describe  // get property `describe`
[Function]

> jane.unknownProperty
undefined

> jane.describe()  // call method `describe`
'Person named Jane'

> jane.name = 'John';  // set property `name`
> jane.describe()
'Person named John'

> var obj = { hello: 'world' };
> delete obj.hello
true
> obj.hello
undefined

> var obj = { foo: 'a', bar: 'b' };

> obj.foo = undefined;
> Object.keys(obj)
[ 'foo', 'bar' ]

> delete obj.foo
true
> Object.keys(obj)
[ 'bar' ]

var obj = {};
Object.defineProperty(obj, 'canBeDeleted', {
    value: 123,
    configurable: true
});
Object.defineProperty(obj, 'cannotBeDeleted', {
    value: 456,
    configurable: false
});

> delete obj.cannotBeDeleted
false

> delete obj.doesNotExist
true
> delete obj.canBeDeleted
true

> delete obj.toString
true
> obj.toString // still there
[Function: toString]

Während Sie reservierte Wörter (wie var und function) nicht als Variablennamen verwenden können, können Sie sie als Eigenschaftsschlüssel verwenden:

> var obj = { var: 'a', function: 'b' };
> obj.var
'a'
> obj.function
'b'

Zahlen können als Eigenschaftsschlüssel in Objektliteralen verwendet werden, werden aber als Strings interpretiert. Der Punktoperator kann nur auf Eigenschaften zugreifen, deren Schlüssel Bezeichner sind. Daher benötigen Sie den Klammeroperator (im folgenden Beispiel gezeigt), um auf Eigenschaften zuzugreifen, deren Schlüssel Zahlen sind:

> var obj = { 0.7: 'abc' };
> Object.keys(obj)
[ '0.7' ]
> obj['0.7']
'abc'

Objektliterale erlauben Ihnen auch, beliebige Strings (die weder Bezeichner noch Zahlen sind) als Eigenschaftsschlüssel zu verwenden, aber Sie müssen sie in Anführungszeichen setzen. Auch hier benötigen Sie den Klammeroperator, um auf die Eigenschaftswerte zuzugreifen

> var obj = { 'not an identifier': 123 };
> Object.keys(obj)
[ 'not an identifier' ]
> obj['not an identifier']
123

Während der Punktoperator mit festen Eigenschaftsschlüsseln funktioniert, ermöglicht Ihnen der Klammeroperator, eine Eigenschaft über einen Ausdruck anzusprechen.

> var obj = { someProperty: 'abc' };

> obj['some' + 'Property']
'abc'

> var propKey = 'someProperty';
> obj[propKey]
'abc'

> var obj = { 'not an identifier': 123 };
> obj['not an identifier']
123

> var obj = { '6': 'bar' };
> obj[3+3]  // key: the string '6'
'bar'

> var obj = { myMethod: function () { return true } };
> obj['myMethod']()
true

> var obj = {};
> obj['anotherProperty'] = 'def';
> obj.anotherProperty
'def'

> var obj = { 'not an identifier': 1, prop: 2 };
> Object.keys(obj)
[ 'not an identifier', 'prop' ]
> delete obj['not an identifier']
true
> Object.keys(obj)
[ 'prop' ]

Denken Sie daran, dass Funktionen auch Objekte sind. Daher hat jede Funktion eigene Methoden. Drei davon werden in diesem Abschnitt vorgestellt und helfen beim Aufrufen von Funktionen. Diese drei Methoden werden in den folgenden Abschnitten verwendet, um einige der Fallstricke beim Aufrufen von Funktionen zu umgehen. Die kommenden Beispiele beziehen sich alle auf das folgende Objekt, jane:

var jane = {
    name: 'Jane',
    sayHelloTo: function (otherName) {
        'use strict';
        console.log(this.name+' says hello to '+otherName);
    }
};

jane.sayHelloTo('Tarzan');

jane.sayHelloTo.call(jane, 'Tarzan');

var func = jane.sayHelloTo;
func.call(jane, 'Tarzan');

jane.sayHelloTo('Tarzan');

jane.sayHelloTo.apply(jane, ['Tarzan']);

var func = jane.sayHelloTo;
func.apply(jane, ['Tarzan']);

function func() {
    console.log('this: '+this);
    console.log('arguments: '+Array.prototype.slice.call(arguments));
}
var bound = func.bind('abc', 1, 2);

> bound(3)
this: abc
arguments: 1,2,3

jane.sayHelloTo('Tarzan');

var func1 = jane.sayHelloTo.bind(jane);
func1('Tarzan');

var func2 = jane.sayHelloTo.bind(jane, 'Tarzan');
func2();

Nehmen wir an, JavaScript hätte einen Dreipunktoperator (...), der Arrays in tatsächliche Parameter umwandelt. Ein solcher Operator würde es Ihnen ermöglichen, Math.max() (siehe Andere Funktionen) mit Arrays zu verwenden. In diesem Fall wären die folgenden beiden Ausdrücke äquivalent

Math.max(...[13, 7, 30])
Math.max(13, 7, 30)

Für Funktionen können Sie den Effekt des Dreipunktoperators über apply() erzielen

> Math.max.apply(null, [13, 7, 30])
30

Der Dreipunktoperator wäre auch für Konstruktoren sinnvoll

new Date(...[2011, 11, 24]) // Christmas Eve 2011

Leider funktioniert apply() hier nicht, da es nur bei Funktions- oder Methodenaufrufen hilft, nicht bei Konstruktoraufrufen.

if (!Function.prototype.construct) {
    Function.prototype.construct = function(argArray) {
        if (! Array.isArray(argArray)) {
            throw new TypeError("Argument must be an array");
        }
        var constr = this;
        var nullaryFunc = Function.prototype.bind.apply(
            constr, [null].concat(argArray));
        return new nullaryFunc();
    };
}

> Date.construct([2011, 11, 24])
Sat Dec 24 2011 00:00:00 GMT+0100 (CET)

Function.prototype.construct = function(argArray) {
    var constr = this;
    var inst = Object.create(constr.prototype);
    var result = constr.apply(inst, argArray); // (1)

    // Check: did the constructor return an object
    // and prevent `this` from being the result?
    return result ? result : inst;
};

Wenn Sie eine Methode aus einem Objekt extrahieren, wird sie wieder zu einer echten Funktion. Ihre Verbindung zum Objekt ist getrennt, und sie funktioniert normalerweise nicht mehr richtig. Nehmen wir zum Beispiel das folgende Objekt, counter:

var counter = {
    count: 0,
    inc: function () {
        this.count++;
    }
}

Das Extrahieren von inc und dessen Aufruf (als Funktion!) schlägt fehl

> var func = counter.inc;
> func()
> counter.count  // didn’t work
0

Hier ist die Erklärung: Wir haben den Wert von counter.inc als Funktion aufgerufen. Daher ist this das globale Objekt und wir haben window.count++ ausgeführt. window.count existiert nicht und ist undefined. Das Anwenden des Operators ++ darauf setzt ihn auf NaN

> count  // global variable
NaN

> counter.inc = function () { 'use strict'; this.count++ };
> var func2 = counter.inc;
> func2()
TypeError: Cannot read property 'count' of undefined

> var func3 = counter.inc.bind(counter);
> func3()
> counter.count  // it worked!
1

function callIt(callback) {
    callback();
}

> callIt(counter.inc)
TypeError: Cannot read property 'count' of undefined

> callIt(counter.inc.bind(counter))
> counter.count  // one more than before
2

Sie verschachteln häufig Funktionsdefinitionen in JavaScript, da Funktionen Parameter sein können (z. B. Callbacks) und da sie an Ort und Stelle erstellt werden können, über Funktionsausdrücke. Dies birgt ein Problem, wenn eine Methode eine normale Funktion enthält und Sie das this der ersteren innerhalb der letzteren zugreifen möchten, da das this der Methode von this der normalen Funktion überschattet wird (die nicht einmal einen eigenen this benötigt). Im folgenden Beispiel versucht die Funktion bei (1), das this der Methode bei (2) zu erreichen:

var obj = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    loop: function () {
        'use strict';
        this.friends.forEach(
            function (friend) {  // (1)
                console.log(this.name+' knows '+friend);  // (2)
            }
        );
    }
};

Dies schlägt fehl, da die Funktion bei (1) ihr eigenes this hat, das hier undefined ist

> obj.loop();
TypeError: Cannot read property 'name' of undefined

Es gibt drei Möglichkeiten, dieses Problem zu umgehen.

loop: function () {
    'use strict';
    var that = this;
    this.friends.forEach(function (friend) {
        console.log(that.name+' knows '+friend);
    });
}

> obj.loop();
Jane knows Tarzan
Jane knows Cheeta

loop: function () {
    'use strict';
    this.friends.forEach(function (friend) {
        console.log(this.name+' knows '+friend);
    }.bind(this));  // (1)
}

loop: function () {
    'use strict';
    this.friends.forEach(function (friend) {
        console.log(this.name+' knows '+friend);
    }, this);
}

obj erbt die Eigenschaft describe; Sie können darauf zugreifen, als ob das Objekt selbst diese Eigenschaft hätte:

> obj.describe
[Function]

Immer wenn Sie über obj auf eine Eigenschaft zugreifen, beginnt JavaScript die Suche danach in diesem Objekt und fährt mit seinem Prototyp, dem Prototyp seines Prototyps usw. fort. Deshalb können wir proto.describe über obj.describe abrufen. Die Prototyp-Kette verhält sich, als wäre sie ein einzelnes Objekt. Diese Illusion wird beim Aufruf einer Methode aufrechterhalten: der Wert von this ist immer das Objekt, bei dem die Suche nach der Methode begann, nicht dort, wo die Methode gefunden wurde. Das ermöglicht der Methode den Zugriff auf alle Eigenschaften der Prototyp-Kette. Zum Beispiel

> obj.describe()
'name: obj'

Innerhalb von describe() ist this obj, was der Methode ermöglicht, auf obj.name zuzugreifen.

In einer Prototyp-Kette überschreibt eine Eigenschaft in einem Objekt eine Eigenschaft mit demselben Schlüssel in einem „späteren“ Objekt: die erstere Eigenschaft wird zuerst gefunden. Sie verbirgt die letztere Eigenschaft, auf die nicht mehr zugegriffen werden kann. Als Beispiel überschreiben wir die Methode proto.describe() in obj:

> obj.describe = function () { return 'overridden' };
> obj.describe()
'overridden'

Das ist ähnlich wie das Überschreiben von Methoden in klassenbasierten Sprachen funktioniert.

Prototypen sind hervorragend zum Teilen von Daten zwischen Objekten geeignet: mehrere Objekte erhalten denselben Prototyp, der alle gemeinsamen Eigenschaften enthält. Betrachten wir ein Beispiel. Die Objekte jane und tarzan enthalten beide dieselbe Methode, describe(). Das ist etwas, das wir durch Teilen vermeiden möchten:

var jane = {
    name: 'Jane',
    describe: function () {
        return 'Person named '+this.name;
    }
};
var tarzan = {
    name: 'Tarzan',
    describe: function () {
        return 'Person named '+this.name;
    }
};

Beide Objekte sind Personen. Ihre name-Eigenschaft ist unterschiedlich, aber wir könnten sie die Methode describe teilen lassen. Das tun wir, indem wir einen gemeinsamen Prototyp namens PersonProto erstellen und describe darin platzieren (Abbildung 17-2).

Abbildung 17-2. Die Objekte jane und tarzan teilen sich den Prototyp PersonProto und damit die Eigenschaft describe.

Der folgende Code erstellt die Objekte jane und tarzan, die sich den Prototyp PersonProto teilen

var PersonProto = {
    describe: function () {
        return 'Person named '+this.name;
    }
};
var jane = {
    [[Prototype]]: PersonProto,
    name: 'Jane'
};
var tarzan = {
    [[Prototype]]: PersonProto,
    name: 'Tarzan'
};

Und hier ist die Interaktion

> jane.describe()
Person named Jane
> tarzan.describe()
Person named Tarzan

Dies ist ein übliches Muster: die Daten befinden sich im ersten Objekt einer Prototyp-Kette, während Methoden sich in späteren Objekten befinden. JavaScripts Art der prototypischen Vererbung ist darauf ausgelegt, dieses Muster zu unterstützen: das Festlegen einer Eigenschaft beeinflusst nur das erste Objekt in einer Prototyp-Kette, während das Abrufen einer Eigenschaft die gesamte Kette berücksichtigt (siehe Festlegen und Löschen beeinflusst nur eigene Eigenschaften).

Bisher haben wir so getan, als könnten wir auf die interne Eigenschaft [[Prototype]] aus JavaScript zugreifen. Aber die Sprache erlaubt Ihnen das nicht. Stattdessen gibt es Funktionen zum Lesen des Prototyps und zum Erstellen eines neuen Objekts mit einem gegebenen Prototyp.

Object.create(proto, propDescObj?)

var PersonProto = {
    describe: function () {
        return 'Person named '+this.name;
    }
};
var jane = Object.create(PersonProto, {
    name: { value: 'Jane', writable: true }
});

> jane.describe()
'Person named Jane'

var jane = Object.create(PersonProto);
jane.name = 'Jane';

Object.getPrototypeOf(obj)

> Object.getPrototypeOf(jane) === PersonProto
true

Object.prototype.isPrototypeOf(obj)

> var A = {};
> var B = Object.create(A);
> var C = Object.create(B);
> A.isPrototypeOf(C)
true
> C.isPrototypeOf(A)
false

function getDefiningObject(obj, propKey) {
    obj = Object(obj); // make sure it’s an object
    while (obj && !{}.hasOwnProperty.call(obj, propKey)) {
        obj = Object.getPrototypeOf(obj);
        // obj is null if we have reached the end
    }
    return obj;
}

Einige JavaScript-Engines haben eine spezielle Eigenschaft zum Abrufen und Festlegen des Prototyps eines Objekts: __proto__. Sie bringt direkten Zugriff auf [[Prototype]] in die Sprache:

> var obj = {};

> obj.__proto__ === Object.prototype
true

> obj.__proto__ = Array.prototype
> Object.getPrototypeOf(obj) === Array.prototype
true

Es gibt mehrere Dinge, die Sie über __proto__ wissen müssen

Nur das Abrufen einer Eigenschaft berücksichtigt die vollständige Prototyp-Kette eines Objekts. Das Festlegen und Löschen ignoriert Vererbung und betrifft nur eigene Eigenschaften.

var proto = { foo: 'a' };
var obj = Object.create(proto);

> obj.foo
'a'
> obj.hasOwnProperty('foo')
false

> obj.foo = 'b';
> obj.foo
'b'

> obj.hasOwnProperty('foo')
true
> proto.foo
'a'

var proto = { foo: 'a' };
var obj = Object.create(proto);

> delete obj.foo
true
> obj.foo
'a'

> delete getDefiningObject(obj, 'foo').foo;
true
> obj.foo
undefined

Sie können entweder alle eigenen Eigenschaftsschlüssel auflisten oder nur die aufzählbaren:

Beachten Sie, dass Eigenschaften normalerweise aufzählbar sind (siehe Aufzählbarkeit: Best Practices), sodass Sie Object.keys() insbesondere für Objekte verwenden können, die Sie selbst erstellt haben.

Wenn Sie alle Eigenschaften (sowohl eigene als auch geerbte) eines Objekts auflisten möchten, haben Sie zwei Möglichkeiten.

Option 1 ist die Verwendung der Schleife

for («variable» in «object»)
    «statement»

zum Iterieren über die Schlüssel aller aufzählbaren Eigenschaften von object. Siehe for-in für eine ausführlichere Beschreibung.

Option 2 ist die Implementierung einer eigenen Funktion, die über alle Eigenschaften (nicht nur aufzählbare) iteriert. Zum Beispiel

function getAllPropertyNames(obj) {
    var result = [];
    while (obj) {
        // Add the own property names of `obj` to `result`
        result = result.concat(Object.getOwnPropertyNames(obj));
        obj = Object.getPrototypeOf(obj);
    }
    return result;
}

Sie können prüfen, ob ein Objekt eine Eigenschaft hat, oder ob eine Eigenschaft direkt innerhalb eines Objekts existiert:

> var obj = { hasOwnProperty: 1, foo: 2 };
> obj.hasOwnProperty('foo')  // unsafe
TypeError: Property 'hasOwnProperty' is not a function

> Object.prototype.hasOwnProperty.call(obj, 'foo')  // safe
true
> {}.hasOwnProperty.call(obj, 'foo')  // shorter
true

Die folgenden Beispiele basieren auf diesen Definitionen:

var proto = Object.defineProperties({}, {
    protoEnumTrue: { value: 1, enumerable: true },
    protoEnumFalse: { value: 2, enumerable: false }
});
var obj = Object.create(proto, {
    objEnumTrue: { value: 1, enumerable: true },
    objEnumFalse: { value: 2, enumerable: false }
});

Object.defineProperties() wird in Properties über Deskriptoren abrufen und definieren erklärt, aber es sollte ziemlich offensichtlich sein, wie es funktioniert: proto hat die eigenen Eigenschaften protoEnumTrue und protoEnumFalse und obj hat die eigenen Eigenschaften objEnumTrue und objEnumFalse (und erbt alle Eigenschaften von proto).

> Object.getPrototypeOf({}) === Object.prototype
true

> for (var x in obj) console.log(x);
objEnumTrue
protoEnumTrue

> Object.keys(obj)
[ 'objEnumTrue' ]

> Object.getOwnPropertyNames(obj)
[ 'objEnumTrue', 'objEnumFalse' ]

> 'toString' in obj
true
> obj.hasOwnProperty('toString')
false
> obj.hasOwnProperty('objEnumFalse')
true

Object.keys(obj).length

Das folgende Beispiel verwendet ein Objekt-Literal, um einen Setter und einen Getter für die Eigenschaft foo zu definieren:

var obj = {
    get foo() {
        return 'getter';
    },
    set foo(value) {
        console.log('setter: '+value);
    }
};

Hier ist die Interaktion

> obj.foo = 'bla';
setter: bla
> obj.foo
'getter'

Eine alternative Möglichkeit, Getter und Setter zu spezifizieren, sind Property-Deskriptoren (siehe Property Deskriptoren). Der folgende Code definiert dasselbe Objekt wie das vorherige Literal

var obj = Object.create(
    Object.prototype, {  // object with property descriptors
        foo: {  // property descriptor
            get: function () {
                return 'getter';
            },
            set: function (value) {
                console.log('setter: '+value);
            }
        }
    }
);

Getter und Setter werden von Prototypen geerbt:

> var proto = { get foo() { return 'hello' } };
> var obj = Object.create(proto);

> obj.foo
'hello'

Der gesamte Zustand eines Properties, sowohl seine Daten als auch seine Metadaten, wird in Attributen gespeichert. Dies sind Felder, die ein Property hat, ähnlich wie ein Objekt Properties hat. Attributschlüssel werden oft in doppelten Klammern geschrieben. Attribute sind für normale Properties und für Accessors (Getter und Setter) wichtig.

Die folgenden Attribute sind spezifisch für normale Properties

Die folgenden Attribute sind spezifisch für Accessors:

Alle Properties haben die folgenden Attribute:

Ein Property-Deskriptor ist eine Datenstruktur für die programmatische Arbeit mit Attributen. Er ist ein Objekt, das die Attribute eines Properties kodiert. Jedes der Eigenschaften eines Deskriptors entspricht einem Attribut. Zum Beispiel ist der folgende der Deskriptor eines schreibgeschützten Properties, dessen Wert 123 ist:

{
    value: 123,
    writable: false,
    enumerable: true,
    configurable: false
}

Sie können dasselbe Ziel, Unveränderlichkeit, über Accessors erreichen. Dann sieht der Deskriptor wie folgt aus

{
    get: function () { return 123 },
    enumerable: true,
    configurable: false
}

Property-Deskriptoren werden für zwei Arten von Operationen verwendet:

Die folgenden Operationen ermöglichen es Ihnen, die Attribute eines Properties über Property-Deskriptoren abzurufen und festzulegen:

Um eine identische Kopie eines Objekts zu erstellen, müssen Sie zwei Dinge richtig machen:

Die folgende Funktion führt eine solche Kopie durch

function copyObject(orig) {
    // 1. copy has same prototype as orig
    var copy = Object.create(Object.getPrototypeOf(orig));

    // 2. copy has all of orig’s properties
    copyOwnPropertiesFrom(copy, orig);

    return copy;
}

Die Eigenschaften werden mit dieser Funktion von orig nach copy kopiert

function copyOwnPropertiesFrom(target, source) {
    Object.getOwnPropertyNames(source)  // (1)
    .forEach(function(propKey) {  // (2)
        var desc = Object.getOwnPropertyDescriptor(source, propKey); // (3)
        Object.defineProperty(target, propKey, desc);  // (4)
    });
    return target;
};

Dies sind die beteiligten Schritte

Beachten Sie, dass diese Funktion der Funktion _.extend() in der Underscore.js-Bibliothek sehr ähnlich ist.

Die folgenden beiden Operationen sind sehr ähnlich:

Es gibt jedoch einige subtile Unterschiede

Wenn ein Objekt, obj, ein Property, foo, von einem Prototyp erbt und foo nicht beschreibbar ist, dann können Sie obj.foo nicht zuweisen:

var proto = Object.defineProperty({}, 'foo', {
    value: 'a',
    writable: false
});
var obj = Object.create(proto);

obj erbt das schreibgeschützte Property foo von proto. Im schludrigen Modus hat das Setzen des Properties keine Auswirkung

> obj.foo = 'b';
> obj.foo
'a'

Im strikten Modus erhalten Sie eine Ausnahme

> (function () { 'use strict'; obj.foo = 'b' }());
TypeError: Cannot assign to read-only property 'foo'

Dies passt zu der Vorstellung, dass Zuweisungen geerbte Properties ändern, aber nichtdestruktiv. Wenn ein geerbtes Property schreibgeschützt ist, möchten Sie alle Änderungen verbieten, auch die nichtdestruktiven.

Beachten Sie, dass Sie diesen Schutz umgehen können, indem Sie ein eigenes Property definieren (siehe vorheriger Unterabschnitt über den Unterschied zwischen Definition und Zuweisung)

> Object.defineProperty(obj, 'foo', { value: 'b' });
> obj.foo
'b'

Die allgemeine Regel ist, dass von Systemen erstellte Properties nicht aufzählbar sind, während von Benutzern erstellte Properties aufzählbar sind:

> Object.keys([])
[]
> Object.getOwnPropertyNames([])
[ 'length' ]

> Object.keys(['a'])
[ '0' ]

Dies gilt insbesondere für die Methoden der eingebauten Instanzprototypen

> Object.keys(Object.prototype)
[]
> Object.getOwnPropertyNames(Object.prototype)
[ hasOwnProperty',
  'valueOf',
  'constructor',
  'toLocaleString',
  'isPrototypeOf',
  'propertyIsEnumerable',
  'toString' ]

Der Hauptzweck der Enumerabilität ist es, der for-in-Schleife mitzuteilen, welche Properties sie ignorieren soll. Wie wir gerade gesehen haben, als wir Instanzen von eingebauten Konstruktoren betrachtet haben, wird alles, was nicht vom Benutzer erstellt wurde, von for-in ausgeblendet.

Die einzigen Operationen, die von der Enumerabilität betroffen sind, sind

Hier sind einige Best Practices, die Sie beachten sollten

Das Verhindern von Erweiterungen über:

Object.preventExtensions(obj)

macht es unmöglich, Properties zu obj hinzuzufügen. Zum Beispiel

var obj = { foo: 'a' };
Object.preventExtensions(obj);

Nun schlägt das Hinzufügen eines Properties im schludrigen Modus stillschweigend fehl

> obj.bar = 'b';
> obj.bar
undefined

und wirft im strikten Modus einen Fehler

> (function () { 'use strict'; obj.bar = 'b' }());
TypeError: Can't add property bar, object is not extensible

Sie können Properties jedoch immer noch löschen

> delete obj.foo
true
> obj.foo
undefined

Sie überprüfen, ob ein Objekt erweiterbar ist, über

Object.isExtensible(obj)

Versiegeln über

Object.seal(obj)

verhindert Erweiterungen und macht alle Properties „unkonfigurierbar“. Letzteres bedeutet, dass die Attribute (siehe Property-Attribute und Property-Deskriptoren) von Properties nicht mehr geändert werden können. Zum Beispiel bleiben schreibgeschützte Properties für immer schreibgeschützt.

Das folgende Beispiel zeigt, dass das Versiegeln alle Properties unkonfigurierbar macht

> var obj = { foo: 'a' };

> Object.getOwnPropertyDescriptor(obj, 'foo')  // before sealing
{ value: 'a',
  writable: true,
  enumerable: true,
  configurable: true }

> Object.seal(obj)

> Object.getOwnPropertyDescriptor(obj, 'foo')  // after sealing
{ value: 'a',
  writable: true,
  enumerable: true,
  configurable: false }

Sie können das Property foo immer noch ändern

> obj.foo = 'b';
'b'
> obj.foo
'b'

aber Sie können seine Attribute nicht ändern

> Object.defineProperty(obj, 'foo', { enumerable: false });
TypeError: Cannot redefine property: foo

Sie überprüfen, ob ein Objekt versiegelt ist, über

Object.isSealed(obj)

Einfrieren wird durchgeführt über:

Object.freeze(obj)

Es macht alle Properties nicht beschreibbar und versiegelt obj. Mit anderen Worten, obj ist nicht erweiterbar und alle Properties sind schreibgeschützt, und es gibt keine Möglichkeit, dies zu ändern. Betrachten wir ein Beispiel:

var point = { x: 17, y: -5 };
Object.freeze(point);

Auch hier erhalten Sie stille Fehler im schludrigen Modus

> point.x = 2;  // no effect, point.x is read-only
> point.x
17

> point.z = 123;  // no effect, point is not extensible
> point
{ x: 17, y: -5 }

Und Sie erhalten Fehler im strikten Modus

> (function () { 'use strict'; point.x = 2 }());
TypeError: Cannot assign to read-only property 'x'

> (function () { 'use strict'; point.z = 123 }());
TypeError: Can't add property z, object is not extensible

Sie überprüfen, ob ein Objekt eingefroren ist, über

Object.isFrozen(obj)

Das Schützen eines Objekts ist flach: es betrifft die eigenen Properties, aber nicht die Werte dieser Properties. Betrachten Sie zum Beispiel das folgende Objekt:

var obj = {
    foo: 1,
    bar: ['a', 'b']
};
Object.freeze(obj);

Obwohl Sie obj eingefroren haben, ist es nicht vollständig unveränderlich – Sie können den (veränderlichen) Wert des Properties bar ändern

> obj.foo = 2; // no effect
> obj.bar.push('c'); // changes obj.bar

> obj
{ foo: 1, bar: [ 'a', 'b', 'c' ] }

Zusätzlich hat obj den Prototyp Object.prototype, der ebenfalls veränderlich ist.

Wenn Sie den new-Operator manuell implementieren würden, sähe er ungefähr so aus:

function newOperator(Constr, args) {
    var thisValue = Object.create(Constr.prototype); // (1)
    var result = Constr.apply(thisValue, args);
    if (typeof result === 'object' && result !== null) {
        return result; // (2)
    }
    return thisValue;
}

In Zeile (1) sehen Sie, dass der Prototyp einer von einem Konstruktor Constr erstellten Instanz Constr.prototype ist.

Zeile (2) offenbart ein weiteres Merkmal des new-Operators: Sie können ein beliebiges Objekt aus einem Konstruktor zurückgeben, und es wird zum Ergebnis des new-Operators. Dies ist nützlich, wenn Sie möchten, dass ein Konstruktor eine Instanz eines Unterkonstruktors zurückgibt (ein Beispiel finden Sie in Beliebige Objekte von einem Konstruktor zurückgeben).

Leider wird der Begriff Prototyp in JavaScript mehrdeutig verwendet:

Normalerweise macht der Kontext klar, welcher der beiden Prototypen gemeint ist. Sollte eine Klärung notwendig sein, dann sind wir mit Prototyp zur Beschreibung der Beziehung zwischen Objekten festgefahren, da dieser Name über getPrototypeOf und isPrototypeOf in die Standardbibliothek gelangt ist. Wir müssen also einen anderen Namen für das von der prototype-Eigenschaft referenzierte Objekt finden. Eine Möglichkeit ist Konstruktor-Prototyp, aber das ist problematisch, da Konstruktoren auch Prototypen haben

> function Foo() {}
> Object.getPrototypeOf(Foo) === Function.prototype
true

Daher ist Instanz-Prototyp die beste Option.

Standardmäßig enthält jede Funktion C ein Instanz-Prototyp-Objekt C.prototype, dessen Eigenschaft constructor zurück auf C zeigt:

> function C() {}
> C.prototype.constructor === C
true

Da die constructor-Eigenschaft von jedem Instanz-Prototyp von jeder Instanz geerbt wird, können Sie sie verwenden, um den Konstruktor einer Instanz zu erhalten

> var o = new C();
> o.constructor
[Function: C]

C.prototype.constructor === C

> function f() {}
> f.prototype.constructor === f
true

// Avoid:
C.prototype = {
    method1: function (...) { ... },
    ...
};

// Prefer:
C.prototype.method1 = function (...) { ... };
...

C.prototype = {
    constructor: C,
    method1: function (...) { ... },
    ...
};

Der Operator instanceof

value instanceof Constr

bestimmt, ob value von dem Konstruktor Constr oder einem Unterkonstruktor erstellt wurde. Dies geschieht, indem geprüft wird, ob Constr.prototype in der Prototypenkette von value enthalten ist. Daher sind die folgenden beiden Ausdrücke äquivalent:

value instanceof Constr
Constr.prototype.isPrototypeOf(value)

Hier sind einige Beispiele

> {} instanceof Object
true

> [] instanceof Array  // constructor of []
true
> [] instanceof Object  // super-constructor of []
true

> new Date() instanceof Date
true
> new Date() instanceof Object
true

Wie erwartet, ist instanceof immer false für primitive Werte

> 'abc' instanceof Object
false
> 123 instanceof Number
false

Schließlich löst instanceof eine Ausnahme aus, wenn seine rechte Seite keine Funktion ist

> [] instanceof 123
TypeError: Expecting a function in instanceof check

> Object.create(null) instanceof Object
false
> Object.prototype instanceof Object
false

> Object.getPrototypeOf(Object.create(null))
null
> Object.getPrototypeOf(Object.prototype)
null

> typeof Object.create(null)
'object'
> typeof Object.prototype
'object'

if (myvar instanceof Array) ...  // Doesn’t always work

<head>
    <script>
        function test(arr) {
            var iframe = frames[0];

            console.log(arr instanceof Array); // false
            console.log(arr instanceof iframe.Array); // true
            console.log(Array.isArray(arr)); // true
        }
    </script>
</head>
<body>
    <iframe srcdoc="<script>window.parent.test([])</script>">
    </iframe>
</body>

Dieser Abschnitt gibt einige Tipps zur Implementierung von Konstruktoren.

function SloppyColor(name) {
    this.name = name;
}
var c = SloppyColor('green'); // no warning!

// No instance is created:
console.log(c); // undefined
// A global variable is created:
console.log(name); // green

function StrictColor(name) {
    'use strict';
    this.name = name;
}
var c = StrictColor('green');
// TypeError: Cannot set property 'name' of undefined

class Expression {
    // Static factory method:
    public static Expression parse(String str) {
        if (...) {
            return new Addition(...);
        } else if (...) {
            return new Multiplication(...);
        } else {
            throw new ExpressionException(...);
        }
    }
}
...
Expression expr = Expression.parse(someStr);

function Expression(str) {
    if (...) {
        return new Addition(..);
    } else if (...) {
        return new Multiplication(...);
    } else {
        throw new ExpressionException(...);
    }
}
...
var expr = new Expression(someStr);

Prototypen enthalten Eigenschaften, die von mehreren Objekten gemeinsam genutzt werden. Daher eignen sie sich gut für Methoden. Zusätzlich können Sie mit einer als nächstes beschriebenen Technik auch Anfangswerte für Instanz-Eigenschaften bereitstellen. Ich werde später erklären, warum dies nicht empfohlen wird.

Ein Konstruktor setzt normalerweise Instanz-Eigenschaften auf Anfangswerte. Wenn einer dieser Werte ein Standardwert ist, müssen Sie keine Instanz-Eigenschaft erstellen. Sie benötigen nur eine Prototyp-Eigenschaft mit demselben Schlüssel, deren Wert der Standardwert ist. Zum Beispiel:

/**
 * Anti-pattern: don’t do this
 *
 * @param data an array with names
 */
function Names(data) {
    if (data) {
        // There is a parameter
        // => create instance property
        this.data = data;
    }
}
Names.prototype.data = [];

Der Parameter data ist optional. Wenn er fehlt, erhält die Instanz keine data-Eigenschaft, sondern erbt stattdessen Names.prototype.data.

Dieser Ansatz funktioniert größtenteils: Sie können eine Instanz n von Names erstellen. Das Abrufen von n.data liest Names.prototype.data. Das Setzen von n.data erstellt eine neue eigene Eigenschaft in n und behält den gemeinsam genutzten Standardwert im Prototyp bei. Wir haben nur ein Problem, wenn wir den Standardwert ändern (anstatt ihn durch einen neuen Wert zu ersetzen).

> var n1 = new Names();
> var n2 = new Names();

> n1.data.push('jane'); // changes default value
> n1.data
[ 'jane' ]

> n2.data
[ 'jane' ]

Im vorherigen Beispiel hat push() das Array in Names.prototype.data geändert. Da dieses Array von allen Instanzen ohne eigene data-Eigenschaft gemeinsam genutzt wird, hat sich auch der Anfangswert von n2.data geändert.

function Names(data) {
    this.data = data || [];
}

function Names(data) {
    if (data) this.data = data;
}
Names.prototype = {
    constructor: Names, // (1)
    get data() {
        // Define, don’t assign
        // => avoid calling the (nonexistent) setter
        Object.defineProperty(this, 'data', {
            value: [],
            enumerable: true,
            configurable: false,
            writable: false
        });
        return this.data;
    }
};

Wenn dieselbe Eigenschaft (gleicher Schlüssel, gleiche Semantik, im Allgemeinen unterschiedliche Werte) in mehreren Prototypen vorhanden ist, wird sie als polymorph bezeichnet. Dann wird das Ergebnis des Lesens der Eigenschaft über eine Instanz dynamisch über den Prototyp dieser Instanz bestimmt. Nicht-polymorph verwendete Prototyp-Eigenschaften können durch Variablen ersetzt werden (was ihre nicht-polymorphe Natur besser widerspiegelt).

Sie können beispielsweise eine Konstante in einer Prototyp-Eigenschaft speichern und über this darauf zugreifen.

function Foo() {}
Foo.prototype.FACTOR = 42;
Foo.prototype.compute = function (x) {
    return x * this.FACTOR;
};

Diese Konstante ist nicht polymorph. Daher können Sie genauso gut über eine Variable darauf zugreifen.

// This code should be inside an IIFE or a module
function Foo() {}
var FACTOR = 42;
Foo.prototype.compute = function (x) {
    return x * FACTOR;
};

Hier ist ein Beispiel für polymorphe Prototyp-Eigenschaften mit unveränderlichen Daten. Durch das Tagging von Instanzen eines Konstruktors über Prototyp-Eigenschaften können Sie diese von Instanzen eines anderen Konstruktors unterscheiden:

function ConstrA() { }
ConstrA.prototype.TYPE_NAME = 'ConstrA';

function ConstrB() { }
ConstrB.prototype.TYPE_NAME = 'ConstrB';

Dank des polymorphen "Tags" TYPE_NAME können Sie die Instanzen von ConstrA und ConstrB unterscheiden, selbst wenn sie Realms überschreiten (dann funktioniert instanceof nicht; siehe Pitfall: crossing realms (frames or windows)).

Wenn ein Konstruktor aufgerufen wird, werden zwei Dinge erstellt: die Instanz des Konstruktors und eine Umgebung (siehe Environments: Managing Variables). Die Instanz soll vom Konstruktor initialisiert werden. Die Umgebung enthält die Parameter und lokalen Variablen des Konstruktors. Jede Funktion (einschließlich Methoden), die innerhalb des Konstruktors erstellt wird, behält eine Referenz auf die Umgebung – die Umgebung, in der sie erstellt wurde. Dank dieser Referenz hat sie immer Zugriff auf die Umgebung, auch nachdem der Konstruktor beendet ist. Diese Kombination aus Funktion und Umgebung wird als Closure bezeichnet (siehe Closures: Functions Stay Connected to Their Birth Scopes). Die Umgebung des Konstruktors ist somit ein Datenspeicher, der von der Instanz unabhängig ist und nur mit ihr in Beziehung steht, weil beide zur gleichen Zeit erstellt werden. Um sie richtig zu verbinden, müssen wir Funktionen haben, die in beiden Welten leben. Nach Douglas Crockfords Terminologie kann eine Instanz drei Arten von Werten zugeordnet sein (siehe Figure 17-4):

Abbildung 17-4. Wenn ein Konstruktor Constr aufgerufen wird, werden zwei Datenstrukturen erstellt: eine Umgebung für Parameter und lokale Variablen und eine zu initialisierende Instanz.

Die folgenden Abschnitte erklären jede Art von Wert genauer.

Constr.prototype.publicMethod = ...;

function Constr(...) {
    this.publicData = ...;
    ...
}

function Constr(...) {
    ...
    var that = this; // make accessible to private functions

    var privateData = ...;

    function privateFunction(...) {
        // Access everything
        privateData = ...;

        that.publicData = ...;
        that.publicMethod(...);
    }
    ...
}

function Constr(...) {
    ...
    this.privilegedMethod = function (...) {
        // Access everything
        privateData = ...;
        privateFunction(...);

        this.publicData = ...;
        this.publicMethod(...);
    };
}

function StringBuilder() {
    var buffer = [];
    this.add = function (str) {
        buffer.push(str);
    };
    this.toString = function () {
        return buffer.join('');
    };
}
// Can’t put methods in the prototype!

> var sb = new StringBuilder();
> sb.add('Hello');
> sb.add(' world!');
> sb.toString()
’Hello world!’

Für die meisten nicht sicherheitskritischen Anwendungen ist Privatsphäre eher ein Hinweis für API-Kunden: „Das müssen Sie nicht sehen.“ Das ist der Hauptvorteil der Kapselung – Verbergen von Komplexität. Obwohl intern mehr passiert, müssen Sie nur den öffentlichen Teil einer API verstehen. Die Idee einer Namenskonvention besteht darin, Kunden über die Privatsphäre zu informieren, indem der Schlüssel einer Eigenschaft gekennzeichnet wird. Ein vorangestellter Unterstrich wird dafür oft verwendet.

Schreiben wir das vorherige StringBuilder-Beispiel neu, sodass der Puffer in einer Eigenschaft _buffer gespeichert wird, die aber nur konventionsgemäß privat ist.

function StringBuilder() {
    this._buffer = [];
}
StringBuilder.prototype = {
    constructor: StringBuilder,
    add: function (str) {
        this._buffer.push(str);
    },
    toString: function () {
        return this._buffer.join('');
    }
};

Hier sind einige Vor- und Nachteile der Privatsphäre über gekennzeichnete Eigenschaftsschlüssel:

Ein Problem bei einer Namenskonvention für private Eigenschaften ist, dass Schlüssel kollidieren können (z. B. ein Schlüssel von einem Konstruktor mit einem Schlüssel von einem Unterkonstruktor oder ein Schlüssel von einem Mixin mit einem Schlüssel von einem Konstruktor). Sie können solche Kollisionen unwahrscheinlicher machen, indem Sie längere Schlüssel verwenden, die zum Beispiel den Namen des Konstruktors enthalten. Dann würde im vorherigen Fall die private Eigenschaft _buffer _StringBuilder_buffer heißen. Wenn ein solcher Schlüssel zu lang für Ihren Geschmack ist, haben Sie die Möglichkeit, ihn zu reifizieren, indem Sie ihn in einer Variablen speichern:

var KEY_BUFFER = '_StringBuilder_buffer';

Wir greifen nun über this[KEY_BUFFER] auf die privaten Daten zu.

var StringBuilder = function () {
    var KEY_BUFFER = '_StringBuilder_buffer';

    function StringBuilder() {
        this[KEY_BUFFER] = [];
    }
    StringBuilder.prototype = {
        constructor: StringBuilder,
        add: function (str) {
            this[KEY_BUFFER].push(str);
        },
        toString: function () {
            return this[KEY_BUFFER].join('');
        }
    };
    return StringBuilder;
}();

Wir haben eine IIFE um StringBuilder gewickelt, damit die Konstante KEY_BUFFER lokal bleibt und den globalen Namensraum nicht verschmutzt.

Reifizierte Eigenschaftsschlüssel ermöglichen die Verwendung von UUIDs (universally unique identifiers) in Schlüsseln. Zum Beispiel über Robert Kieffers node-uuid.

var KEY_BUFFER = '_StringBuilder_buffer_' + uuid.v4();

KEY_BUFFER hat jedes Mal, wenn der Code ausgeführt wird, einen anderen Wert. Er kann zum Beispiel so aussehen:

_StringBuilder_buffer_110ec58a-a0f2-4ac4-8393-c866d813b8d1

Lange Schlüssel mit UUIDs machen Schlüsselkonflikte praktisch unmöglich.

Diese Unterabschnitt erklärt, wie globale Daten für Singleton-Objekte, Konstruktoren und Methoden privat gehalten werden können, über IIFEs (siehe Introducing a New Scope via an IIFE). Diese IIFEs erstellen neue Umgebungen (siehe Environments: Managing Variables), in denen Sie die privaten Daten platzieren.

var obj = function () {  // open IIFE

    // public
    var self = {
        publicMethod: function (...) {
            privateData = ...;
            privateFunction(...);
        },
        publicData: ...
    };

    // private
    var privateData = ...;
    function privateFunction(...) {
        privateData = ...;
        self.publicData = ...;
        self.publicMethod(...);
    }

    return self;
}(); // close IIFE

var StringBuilder = function () { // open IIFE
    var KEY_BUFFER = '_StringBuilder_buffer_' + uuid.v4();

    function StringBuilder() {
        this[KEY_BUFFER] = [];
    }
    StringBuilder.prototype = {
        // Omitted: methods accessing this[KEY_BUFFER]
    };
    return StringBuilder;
}(); // close IIFE

var obj = {
    method: function () {  // open IIFE

        // method-private data
        var invocCount = 0;

        return function () {
            invocCount++;
            console.log('Invocation #'+invocCount);
            return 'result';
        };
    }()  // close IIFE
};

> obj.method()
Invocation #1
'result'
> obj.method()
Invocation #2
'result'

Instanzeigenschaften werden im Konstruktor selbst eingerichtet, daher beinhaltet das Vererben der Instanzeigenschaften des Superkonstruktors das Aufrufen dieses Konstruktors:

function Sub(prop1, prop2, prop3, prop4) {
    Super.call(this, prop1, prop2);  // (1)
    this.prop3 = prop3;  // (2)
    this.prop4 = prop4;  // (3)
}

Wenn Sub über new aufgerufen wird, bezieht sich sein impliziter Parameter this auf eine frische Instanz. Sie übergibt diese Instanz zuerst an Super (1), das seine Instanzeigenschaften hinzufügt. Danach richtet Sub seine eigenen Instanzeigenschaften ein (2,3). Der Trick ist, Super nicht über new aufzurufen, da dies eine frische Superinstanz erzeugen würde. Stattdessen rufen wir Super als Funktion auf und übergeben die aktuelle (Sub-)Instanz als Wert von this.

Gemeinsam genutzte Eigenschaften wie Methoden werden im Instanzprototyp gespeichert. Daher müssen wir einen Weg finden, damit Sub.prototype alle Eigenschaften von Super.prototype erbt. Die Lösung besteht darin, Sub.prototype den Prototyp Super.prototype zu geben.

Dies ist der Code, der dies erreicht.

Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;
Sub.prototype.methodB = ...;
Sub.prototype.methodC = ...;

Object.create() erzeugt ein frisches Objekt, dessen Prototyp Super.prototype ist. Danach fügen wir Subs Methoden hinzu. Wie in The constructor Property of Instances erklärt, müssen wir auch die Eigenschaft constructor einrichten, da wir den ursprünglichen Instanzprototyp ersetzt haben, wo er den korrekten Wert hatte.

Abbildung 17-6 zeigt, wie Sub und Super nun zusammenhängen. Subs Struktur ähnelt tatsächlich dem, was ich in Abbildung 17-5 skizziert habe. Das Diagramm zeigt nicht die Instanzeigenschaften, die durch den im Diagramm erwähnten Funktionsaufruf eingerichtet werden.

Abbildung 17-6. Der Konstruktor Sub erbt den Konstruktor Super, indem er ihn aufruft und Sub.prototype zu einem Prototyp von Super.prototype macht.

„Sicherstellen, dass instanceof funktioniert“ bedeutet, dass jede Instanz von Sub auch eine Instanz von Super sein muss. Abbildung 17-7 zeigt, wie die Prototypenkette von subInstance, einer Instanz von Sub, aussieht: Ihr erster Prototyp ist Sub.prototype und ihr zweiter Prototyp ist Super.prototype.

Abbildung 17-7. subInstance wurde vom Konstruktor Sub erstellt. Es hat die beiden Prototypen Sub.prototype und Super.prototype.

Beginnen wir mit einer einfacheren Frage: Ist subInstance eine Instanz von Sub? Ja, das ist es, denn die folgenden beiden Aussagen sind äquivalent (die letztere kann als Definition der ersteren betrachtet werden).

subInstance instanceof Sub
Sub.prototype.isPrototypeOf(subInstance)

Wie bereits erwähnt, ist Sub.prototype einer der Prototypen von subInstance, daher sind beide Aussagen wahr. Ebenso ist subInstance auch eine Instanz von Super, denn die folgenden beiden Aussagen gelten:

subInstance instanceof Super
Super.prototype.isPrototypeOf(subInstance)

Wir überschreiben eine Methode in Super.prototype, indem wir eine Methode mit demselben Namen zu Sub.prototype hinzufügen. methodB ist ein Beispiel, und in Abbildung 17-7 sehen wir, warum es funktioniert: Die Suche nach methodB beginnt in subInstance und findet Sub.prototype.methodB vor Super.prototype.methodB.

Um Super-Aufrufe zu verstehen, müssen Sie den Begriff Home-Objekt kennen. Das Home-Objekt einer Methode ist das Objekt, das die Eigenschaft besitzt, deren Wert die Methode ist. Zum Beispiel ist das Home-Objekt von Sub.prototype.methodB Sub.prototype. Das Super-Aufrufen einer Methode foo beinhaltet drei Schritte:

Daher sieht der Code der Submethode wie folgt aus. Sie ruft sich selbst per Super-Aufruf auf, sie ruft die Methode auf, die sie überschrieben hat.

Sub.prototype.methodB = function (x, y) {
    var superResult = Super.prototype.methodB.call(this, x, y); // (1)
    return this.prop3 + ' ' + superResult;
}

Eine Möglichkeit, den Super-Aufruf unter (1) zu lesen, ist wie folgt: Beziehen Sie sich direkt auf die Supermethode und rufen Sie sie mit dem aktuellen this auf. Wenn wir sie jedoch in drei Teile aufteilen, finden wir die oben genannten Schritte:

Bis jetzt haben wir immer auf Supermethoden und Superkonstruktoren Bezug genommen, indem wir den Namen des Superkonstruktors genannt haben. Diese Art der Festkodierung macht Ihren Code weniger flexibel. Sie können sie vermeiden, indem Sie den Superprototyp einer Eigenschaft von Sub zuweisen:

Sub._super = Super.prototype;

Dann sehen der Aufruf des Superkonstruktors und einer Supermethode wie folgt aus:

function Sub(prop1, prop2, prop3, prop4) {
    Sub._super.constructor.call(this, prop1, prop2);
    this.prop3 = prop3;
    this.prop4 = prop4;
}
Sub.prototype.methodB = function (x, y) {
    var superResult = Sub._super.methodB.call(this, x, y);
    return this.prop3 + ' ' + superResult;
}

Das Einrichten von Sub._super wird normalerweise von einer Hilfsfunktion gehandhabt, die auch den Subprototyp mit dem Superprototyp verbindet. Zum Beispiel:

function subclasses(SubC, SuperC) {
    var subProto = Object.create(SuperC.prototype);
    // Save `constructor` and, possibly, other methods
    copyOwnPropertiesFrom(subProto, SubC.prototype);
    SubC.prototype = subProto;
    SubC._super = SuperC.prototype;
};

Dieser Code verwendet die Hilfsfunktion copyOwnPropertiesFrom(), die in Copying an Object gezeigt und erklärt wird.

Als konkretes Beispiel nehmen wir an, dass der Konstruktor Person bereits existiert:

function Person(name) {
    this.name = name;
}
Person.prototype.describe = function () {
    return 'Person called '+this.name;
};

Wir möchten nun den Konstruktor Employee als Unterkonstruktor von Person erzeugen. Dies geschieht manuell und sieht wie folgt aus:

function Employee(name, title) {
    Person.call(this, name);
    this.title = title;
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.describe = function () {
    return Person.prototype.describe.call(this)+' ('+this.title+')';
};

Hier ist die Interaktion

> var jane = new Employee('Jane', 'CTO');
> jane.describe()
Person called Jane (CTO)
> jane instanceof Employee
true
> jane instanceof Person
true

Die Hilfsfunktion subclasses() aus dem vorherigen Abschnitt vereinfacht den Code von Employee etwas und vermeidet die harte Kodierung des Superkonstruktors Person.

function Employee(name, title) {
    Employee._super.constructor.call(this, name);
    this.title = title;
}
Employee.prototype.describe = function () {
    return Employee._super.describe.call(this)+' ('+this.title+')';
};
subclasses(Employee, Person);

Integrierte Konstruktoren verwenden denselben Unterklassenansatz, der in diesem Abschnitt beschrieben wird. Beispielsweise ist Array ein Unterkonstruktor von Object. Daher sieht die Prototypenkette einer Instanz von Array wie folgt aus:

> var p = Object.getPrototypeOf

> p([]) === Array.prototype
true
> p(p([])) === Object.prototype
true
> p(p(p([]))) === null
true

Vor ECMAScript 5 und Object.create() war eine häufig verwendete Lösung, den Unterprototyp zu erstellen, indem der Superkonstruktor aufgerufen wurde:

Sub.prototype = new Super();  // Don’t do this

Dies wird unter ECMAScript 5 nicht empfohlen. Der Prototyp wird alle Instanzeigenschaften von Super haben, die er nicht benötigt. Daher ist es besser, das oben erwähnte Muster (mit Object.create()) zu verwenden.

Die folgenden beiden Methoden werden verwendet, um ein Objekt in einen primitiven Wert umzuwandeln:

Die Umwandlung in Zahl und Zeichenfolge (ob implizit oder explizit) baut auf der Umwandlung in ein Primitiv auf (Details siehe Algorithmus: ToPrimitive()-Umwandlung eines Wertes in ein Primitiv). Deshalb können Sie die oben genannten beiden Methoden verwenden, um diese Umwandlungen zu konfigurieren. valueOf() wird von der Umwandlung in eine Zahl bevorzugt.

> 3 * { valueOf: function () { return 5 } }
15

toString() wird von der Umwandlung in eine Zeichenfolge bevorzugt.

> String({ toString: function () { return 'ME' } })
'Result: ME'

Die Umwandlung in einen booleschen Wert ist nicht konfigurierbar; Objekte werden immer als true betrachtet (siehe Umwandlung in Boolesch).

Diese Methode gibt eine lokalitätsspezifische Zeichenfolgendarstellung eines Objekts zurück. Die Standardimplementierung ruft toString() auf. Die meisten Engines gehen nicht über diese Unterstützung für diese Methode hinaus. Die ECMAScript Internationalization API (siehe Die ECMAScript Internationalization API), die von vielen modernen Engines unterstützt wird, überschreibt sie jedoch für mehrere integrierte Konstruktoren.

Die folgenden Methoden helfen bei der prototypischen Vererbung und Eigenschaften:

Das Aufrufen einer Methode generisch ist ziemlich umständlich:

Object.prototype.hasOwnProperty.call(obj, 'propKey')

Sie können dies verkürzen, indem Sie auf hasOwnProperty über eine Instanz von Object zugreifen, wie sie durch ein leeres Objektliteral {} erstellt wird:

{}.hasOwnProperty.call(obj, 'propKey')

Ähnlich sind die folgenden beiden Ausdrücke äquivalent:

Array.prototype.join.call(str, '-')
[].join.call(str, '-')

Der Vorteil dieses Musters ist, dass es weniger umständlich ist. Aber es ist auch weniger selbsterklärend. Die Leistung sollte kein Problem sein (zumindest langfristig), da Engines statisch feststellen können, dass die Literale keine Objekte erstellen sollen.

Dies sind einige Beispiele für generische Methoden in Aktion:

Die generische Verwendung von Array-Methoden auf einfachen Objekten gibt Einblick in deren Funktionsweise.

Es gibt einige Objekte in JavaScript, die sich wie ein Array anfühlen, aber tatsächlich keins sind. Das bedeutet, dass sie zwar indizierten Zugriff und eine length-Eigenschaft haben, aber keine der Array-Methoden (forEach(), push, concat() usw.). Das ist bedauerlich, aber wie wir sehen werden, ermöglichen generische Array-Methoden eine Lösung.

Der Begriff Array-ähnlich kann auch als Vertrag zwischen generischen Array-Methoden und Objekten betrachtet werden. Die Objekte müssen bestimmte Anforderungen erfüllen, andernfalls funktionieren die Methoden nicht für sie. Die Anforderungen sind:

Die folgende Liste enthält alle Methoden, die gemäß der ECMAScript-Sprachspezifikation generisch sind:

Die Operationen, die Eigenschaften lesen, können in zwei Arten unterteilt werden:

Sie müssen sorgfältig zwischen diesen Arten von Operationen wählen, wenn Sie die Einträge eines Objekt-als-Map lesen. Um zu verstehen, warum, betrachten wir das folgende Beispiel:

var proto = { protoProp: 'a' };
var obj = Object.create(proto);
obj.ownProp = 'b';

obj ist ein Objekt mit einer eigenen Eigenschaft, deren Prototyp proto ist, der ebenfalls eine eigene Eigenschaft hat. proto hat den Prototyp Object.prototype, wie alle Objekte, die durch Objektliterale erstellt werden. Daher erbt obj Eigenschaften sowohl von proto als auch von Object.prototype.

Wir möchten, dass obj als Map mit dem einzelnen Eintrag interpretiert wird:

ownProp: 'b'

Das heißt, wir möchten geerbte Eigenschaften ignorieren und nur eigene Eigenschaften berücksichtigen. Sehen wir uns an, welche Lesevorgänge obj auf diese Weise interpretieren und welche nicht. Beachten Sie, dass wir für Objekte-als-Maps normalerweise beliebige Eigenschaftsschlüssel verwenden möchten, die in Variablen gespeichert sind. Das schließt die Punktnotation aus.

> 'ownProp' in obj  // ok
true
> 'unknown' in obj  // ok
false
> 'toString' in obj  // wrong, inherited from Object.prototype
true
> 'protoProp' in obj  // wrong, inherited from proto
true

> obj.hasOwnProperty('ownProp')  // ok
true
> obj.hasOwnProperty('unknown')  // ok
false
> obj.hasOwnProperty('toString')  // ok
false
> obj.hasOwnProperty('protoProp')  // ok
false

> for (propKey in obj) console.log(propKey)
ownProp
protoProp

> Object.keys(obj)
[ 'ownProp' ]

> obj['toString']
[Function: toString]

function getOwnProperty(obj, propKey) {
    // Using hasOwnProperty() in this manner is problematic
    // (explained and fixed later)
    return (obj.hasOwnProperty(propKey)
            ? obj[propKey] : undefined);
}

> getOwnProperty(obj, 'toString')
undefined

Die Funktion getOwnProperty() hat die Methode hasOwnProperty() auf obj aufgerufen. Normalerweise ist das in Ordnung:

> getOwnProperty({ foo: 123 }, 'foo')
123

Wenn Sie jedoch eine Eigenschaft zu obj hinzufügen, deren Schlüssel hasOwnProperty ist, überschreibt diese Eigenschaft die Methode Object.prototype.hasOwnProperty() und getOwnProperty() funktioniert nicht mehr.

> getOwnProperty({ hasOwnProperty: 123 }, 'foo')
TypeError: Property 'hasOwnProperty' is not a function

Sie können dieses Problem beheben, indem Sie direkt auf hasOwnProperty() verweisen. Dies vermeidet, dass sie über obj gefunden wird:

function getOwnProperty(obj, propKey) {
    return (Object.prototype.hasOwnProperty.call(obj, propKey)
            ? obj[propKey] : undefined);
}

Wir haben hasOwnProperty() generisch aufgerufen (siehe Generische Methoden: Ausleihen von Methoden aus Prototypen).

In vielen JavaScript-Engines ist die Eigenschaft __proto__ (siehe Die spezielle Eigenschaft __proto__) besonders: Das Abrufen ermittelt den Prototyp eines Objekts, und das Setzen ändert den Prototyp eines Objekts. Deshalb kann das Objekt keine Kartendaten in einer Eigenschaft speichern, deren Schlüssel '__proto__' ist. Wenn Sie den Map-Schlüssel '__proto__' zulassen möchten, müssen Sie ihn maskieren, bevor Sie ihn als Eigenschaftsschlüssel verwenden:

function get(obj, key) {
    return obj[escapeKey(key)];
}
function set(obj, key, value) {
    obj[escapeKey(key)] = value;
}
// Similar: checking if key exists, deleting an entry

function escapeKey(key) {
    if (key.indexOf('__proto__') === 0) {  // (1)
        return key+'%';
    } else {
        return key;
    }
}

Wir müssen auch die maskierte Version von '__proto__' (usw.) maskieren, um Kollisionen zu vermeiden; das heißt, wenn wir den Schlüssel '__proto__' als '__proto__%' maskieren, müssen wir auch den Schlüssel '__proto__%' maskieren, damit er keinen '__proto__'-Eintrag ersetzt. Das ist es, was in Zeile (1) passiert.

Mark S. Miller erwähnt die realen Auswirkungen dieses Fallstricks in einer E-Mail.

Sie erstellen ein Objekt ohne Prototyp wie folgt:

var dict = Object.create(null);

Ein solches Objekt ist eine bessere Map (Wörterbuch) als ein normales Objekt, weshalb dieses Muster manchmal als Dict-Muster (dict für dictionary) bezeichnet wird. Untersuchen wir zunächst normale Objekte und finden dann heraus, warum Prototyp-lose Objekte bessere Maps sind.

> Object.getPrototypeOf({}) === Object.prototype
true
> Object.getPrototypeOf(Object.prototype)
null

> console.log('Result: '+obj)
TypeError: Cannot convert object to primitive value

Es gibt viele Anwendungen für die Verwendung von Objekten als Maps. Wenn alle Eigenschaftsschlüssel statisch bekannt sind (zur Entwicklungszeit), müssen Sie nur sicherstellen, dass Sie die Vererbung ignorieren und nur eigene Eigenschaften betrachten. Wenn beliebige Schlüssel verwendet werden können, sollten Sie sich an eine Bibliothek wenden, um die in diesem Abschnitt genannten Fallstricke zu vermeiden. Hier sind zwei Beispiele: