diff options
Diffstat (limited to 'files/de/web/javascript/reference/global_objects/object')
21 files changed, 4142 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html new file mode 100644 index 0000000000..5e88304f5f --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html @@ -0,0 +1,150 @@ +--- +title: Object.prototype.__defineGetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p>This feature is deprecated in favor of defining getters using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer syntax</a> or the {{jsxref("Object.defineProperty()")}} API. While this feature is widely implemented, it is only described in the <a href="https://tc39.github.io/ecma262/#sec-additional-ecmascript-features-for-web-browsers">ECMAScript specification</a> because of legacy usage. This method should not be used since better alternatives exist.</p> +</div> + +<p>Die <code><strong>__defineGetter__</strong></code> Methode bindet eine Eigenschaft des Objects an eine Funktion, die aufgerufen wird, wenn das Object angesehen wird.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>prop</code></dt> + <dd><code>Ein String der den Namen der zur Funktion gebundenen Eigenschaft enthält</code></dd> + <dt><code>func</code></dt> + <dd><code>Eine Funktion die zur Eigenschaft gebunden wird.</code></dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Die <code>__defineGetter__</code> erlaubt einen {{jsxref("Operators/get", "getter", "", 1)}} auf ein Object zu erstellen.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">// Nicht standard und veraltete Weise + +var o = {}; +o.__defineGetter__('gimmeFive', function() { return 5; }); +console.log(o.gimmeFive); // 5 + + +// Üblicher Weg + +// Mithilfe der get Methode +var o = { get gimmeFive() { return 5; } }; +console.log(o.gimmeFive); // 5 + +// Mithilfe von Object.defineProperty +var o = {}; +Object.defineProperty(o, 'gimmeFive', { + get: function() { + return 5; + } +}); +console.log(o.gimmeFive); // 5 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<ul> + <li>Starting with Firefox 48 {{geckoRelease(48)}}, this method can no longer be called at the global scope without any object. A {{jsxref("TypeError")}} will be thrown otherwise. Previously, the global object was used in these cases automatically, but this is no longer the case ({{bug(1253016)}}).</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li> + <li>{{jsxref("Operators/get", "get")}} operator</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JS Guide: Defining Getters and Setters</a></li> + <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Blog Post] Deprecation of __defineGetter__ and __defineSetter__</a></li> + <li>{{bug(647423)}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/assign/index.html b/files/de/web/javascript/reference/global_objects/object/assign/index.html new file mode 100644 index 0000000000..0359e1e5c9 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/assign/index.html @@ -0,0 +1,277 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Global_Objects/Object/assign +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +<div>{{JSRef}}</div> + +<p>Die Methode <strong><code>Object.assign()</code></strong> kopiert die Werte aller aufzählbaren, eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt. Es wird das Zielobjekt zurückgegeben.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Object.assign(<var>target</var>, ...<var>sources</var>)</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>target</code></dt> + <dd>Das Zielobjekt.</dd> + <dt><code>sources</code></dt> + <dd>Das(Die) Quellobjekt(e).</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das Zielobjekt.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Eigenschaften in dem Zielobjekt werden von Eigenschaften aus dem Quellobjekt überschrieben, wenn sie den gleichen Schlüssel haben.</p> + +<p>Die Methode <code>Object.assign()</code> kopiert nur <em>aufzählbare</em> und <em>eigene</em> Eigenschaften eines Quellobjekts ins Zielobjekt. Sie verwendet <code>[[Get]]</code> bei der Quelle und <code>[[Set]]</code> beim Ziel, d.h. es werden getters und setters aufgerufen. Daher <em>weist</em> es Eigenschaften zu statt sie nur zu kopieren oder neue Eigenschaften zu definieren. Daher ist die Methode ungeeignet, um neue Eigenschaften zu einem Prototypen hinzufügen wenn die Quellen getters enthalten. Zum Kopieren von Eigenschaftsdefinitionen, einschließlich ihrer Aufzählbarkeit, in Prototypen sollten daher {{jsxref("Object.getOwnPropertyDescriptor()")}} und {{jsxref("Object.defineProperty()")}} verwendet werden.</p> + +<p>Sowohl {{jsxref("String")}}- als auch {{jsxref("Symbol")}}-Eigenschaften werden kopiert.</p> + +<p>Im Fehlerfall, weil z.B. eine Eigenschaft schreibgeschützt ist, wird ein {{jsxref("TypeError")}} erzeugt. Das Zielobjekt kann verändert sein, wenn ein Eigenschaft schon zuvor hinzugefügt wurde.</p> + +<p>Es gilt zu beachten, dass <code>Object.assign()</code> keine Ausnahme bei {{jsxref("null")}} oder {{jsxref("undefined")}} Quellwerten erzeugt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Klonen_eines_Objekts">Klonen eines Objekts</h3> + +<pre class="brush: js">var obj = { a: 1 }; +var copy = Object.assign({}, obj); +console.log(copy); // { a: 1 } +</pre> + +<h3 id="Warnung_bei_tiefem_Clonen">Warnung bei tiefem Clonen</h3> + +<p>Für tiefes Clonen müssen andere Alternativen eingesetzt werden, weil <code>Object.assign()</code> Werte von Eigenschaften kopiert. Wenn ein Quellwert eine Referenz zu einem Objekt ist, wird nur die Referenz kopiert.</p> + +<pre class="brush: js">function test() { + 'use strict'; + + let obj1 = { a: 0 , b: { c: 0}}; + let obj2 = Object.assign({}, obj1); + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj1.a = 1; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj2.a = 2; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} + + obj2.b.c = 3; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} + + // Deep Clone + obj1 = { a: 0 , b: { c: 0}}; + let obj3 = JSON.parse(JSON.stringify(obj1)); + obj1.a = 4; + obj1.b.c = 4; + console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}} +} + +test();</pre> + +<h3 id="Objekte_zusammenführen">Objekte zusammenführen</h3> + +<pre class="brush: js">var o1 = { a: 1 }; +var o2 = { b: 2 }; +var o3 = { c: 3 }; + +var obj = Object.assign(o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed. +</pre> + +<h3 id="Objekte_mit_gleichen_Eigenschaften_zusammenführen">Objekte mit gleichen Eigenschaften zusammenführen</h3> + +<pre class="brush: js">var o1 = { a: 1, b: 1, c: 1 }; +var o2 = { b: 2, c: 2 }; +var o3 = { c: 3 }; + +var obj = Object.assign({}, o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 }</pre> + +<p>Eigenschaften werden von anderen Objekten mit gleichen Eigenschaften später in Parameterreihenfolge überschrieben.</p> + +<h3 id="Kopieren_von_Symboltyp-Eigenschaften">Kopieren von Symboltyp-Eigenschaften</h3> + +<pre class="brush: js">var o1 = { a: 1 }; +var o2 = { [Symbol('foo')]: 2 }; + +var obj = Object.assign({}, o1, o2); +console.log(obj); // { a: 1, [Symbol("foo")]: 2 } (siehe Bug 1207182 in Firefox) +Object.getOwnPropertySymbols(obj); // [Symbol(foo)]</pre> + +<h3 id="Eigenschaften_der_Prototypkette_und_nicht_aufzählbare_Eigenschaften_können_nicht_kopiert_werden">Eigenschaften der Prototypkette und nicht aufzählbare Eigenschaften können nicht kopiert werden</h3> + +<pre class="brush: js">var obj = Object.create({ foo: 1 }, { // foo is on obj's prototype chain. + bar: { + value: 2 // bar is a non-enumerable property. + }, + baz: { + value: 3, + enumerable: true // baz is an own enumerable property. + } +}); + +var copy = Object.assign({}, obj); +console.log(copy); // { baz: 3 } +</pre> + +<h3 id="Primitive_Datentypen_werden_in_Objekte_gepackt">Primitive Datentypen werden in Objekte gepackt</h3> + +<pre class="brush: js">var v1 = 'abc'; +var v2 = true; +var v3 = 10; +var v4 = Symbol('foo'); + +var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// Primitives will be wrapped, null and undefined will be ignored. +// Note, only string wrappers can have own enumerable properties. +console.log(obj); // { "0": "a", "1": "b", "2": "c" } +</pre> + +<h3 id="Fehler_unterbrechen_den_laufenden_Kopiervorgang">Fehler unterbrechen den laufenden Kopiervorgang</h3> + +<pre class="brush: js">var target = Object.defineProperty({}, 'foo', { + value: 1, + writable: false +}); // target.foo is a read-only property + +Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); +// TypeError: "foo" is read-only +// The Exception is thrown when assigning target.foo + +console.log(target.bar); // 2, the first source was copied successfully. +console.log(target.foo2); // 3, the first property of the second source was copied successfully. +console.log(target.foo); // 1, exception is thrown here. +console.log(target.foo3); // undefined, assign method has finished, foo3 will not be copied. +console.log(target.baz); // undefined, the third source will not be copied either. +</pre> + +<h3 id="Kopieren_von_Zugriffsmethoden">Kopieren von Zugriffsmethoden</h3> + +<pre class="brush: js">var obj = { + foo: 1, + get bar() { + return 2; + } +}; + +var copy = Object.assign({}, obj); +console.log(copy); +// { foo: 1, bar: 2 }, the value of copy.bar is obj.bar's getter's return value. + +// This is an assign function that copies full descriptors +function completeAssign(target, ...sources) { + sources.forEach(source => { + let descriptors = Object.keys(source).reduce((descriptors, key) => { + descriptors[key] = Object.getOwnPropertyDescriptor(source, key); + return descriptors; + }, {}); + // by default, Object.assign copies enumerable Symbols too + Object.getOwnPropertySymbols(source).forEach(sym => { + let descriptor = Object.getOwnPropertyDescriptor(source, sym); + if (descriptor.enumerable) { + descriptors[sym] = descriptor; + } + }); + Object.defineProperties(target, descriptors); + }); + return target; +} + +var copy = completeAssign({}, obj); +console.log(copy); +// { foo:1, get bar() { return 2 } } +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Dieses {{Glossary("Polyfill","polyfill")}} unterstützt keine Symboleigenschaften, da ES5 ohnehin keine Symbole hat:</p> + +<pre class="brush: js">if (typeof Object.assign != 'function') { + // Must be writable: true, enumerable: false, configurable: true + Object.defineProperty(Object, "assign", { + value: function assign(target, varArgs) { // .length of function is 2 + 'use strict'; + if (target == null) { // TypeError if undefined or null + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource != null) { // Skip over if undefined or null + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }, + writable: true, + configurable: true + }); +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.assign")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li><a href="/de/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Aufzählbarkeit und Zugehörigkeit von Eigenschaften</a></li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/constructor/index.html b/files/de/web/javascript/reference/global_objects/object/constructor/index.html new file mode 100644 index 0000000000..d524a73679 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/constructor/index.html @@ -0,0 +1,192 @@ +--- +title: Object.prototype.constructor +slug: Web/JavaScript/Reference/Global_Objects/Object/constructor +tags: + - JavaScript + - Object + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Gibt eine Referenz zur {{jsxref("Global_Objects/Object", "Object")}}-Funktion, welche die Instanz vom Prototyp herstellt. Merke: Der Wert dieser Eigenschaft ist eine Referenz auf die Funktion selbst und kein String mit dem Funktionsnamen als Inhalt. Der Wert ist nur lesbar für primitive Werte, wie <code>1</code>, <code>true</code> und <code>"test"</code>.</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Alle Objekte erben eine constructor- Eigenschaft von ihrem <code>prototype</code>:</p> + +<pre class="brush: js">var o = {}; +o.constructor === Object; // true + +var a = []; +a.constructor === Array; // true + +var n = new Number(3); +n.constructor === Number; // true +</pre> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example:_Displaying_the_constructor_of_an_object" name="Example:_Displaying_the_constructor_of_an_object">Beispiel: zeigen den Konstruktor von einem Objekt an</h3> + +<p>Das folgende Beispiel erzeugt einen Prototyp: <code>Tree</code>, und ein Objekt von jenem Typ: <code>theTree</code>. Das Beispiel zeigt danach die Konstruktor-Eigenschaft vom <code>Objekt:theTree</code> an.</p> + +<pre class="brush: js">function Tree(name) { + this.name = name; +} + +var theTree = new Tree('Redwood'); +console.log('theTree.constructor is ' + theTree.constructor); +</pre> + +<p>Das Beispiel erzeugt folgende Ausgabe:</p> + +<pre class="brush: js">theTree.constructor is function Tree(name) { + this.name = name; +} +</pre> + +<h3 id="Example:_Changing_the_constructor_of_an_object" name="Example:_Changing_the_constructor_of_an_object">Beispiel: Veränderung des Konstruktors eines Objekts</h3> + +<p>Das folgende Beispiel zeigt, wie man den Konstruktorwert eines generischen Objekts verändert. Nur <code>true</code>, <code>1</code> und <code>"test"</code> werden nicht von der Veränderung betroffen, da sie nur lesbare (read-only) native Konstruktoren haben. Dieses Beispiel zeigt, dass es nicht immer sicher ist, sich auf die Konstruktor-Eigenschaft eines Objekts zu verlassen.</p> + +<pre class="brush:js">function Type () {} + +var types = [ + new Array(), + [], + new Boolean(), + true, // bleibt unverändert + new Date(), + new Error(), + new Function(), + function () {}, + Math, + new Number(), + 1, // bleibt unverändert + new Object(), + {}, + new RegExp(), + /(?:)/, + new String(), + 'test' // bleibt unverändert +]; + +for (var i = 0; i < types.length; i++) { + types[i].constructor = Type; + types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()]; +} + +console.log(types.join('\n')); +</pre> + +<p>Das Beispiel zeigt folgende Ausgabe:</p> + +<pre class="brush: js">function Type() {},false, +function Type() {},false, +function Type() {},false,false +function Boolean() { + [native code] +},false,true +function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600 +function Type() {},false,Error +function Type() {},false,function anonymous() { + +} +function Type() {},false,function () {} +function Type() {},false,[object Math] +function Type() {},false,0 +function Number() { + [native code] +},false,1 +function Type() {},false,[object Object] +function Type() {},false,[object Object] +function Type() {},false,/(?:)/ +function Type() {},false,/(?:)/ +function Type() {},false, +function String() { + [native code] +},false,тест +</pre> + +<h2 id="Specifications" name="Specifications">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>ECMAScript 1 te Edition.</td> + <td>Standard</td> + <td>Ausgangsdefinition: Implementiert in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browserunterstützung</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basis- unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis- unterstützungt</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/de/web/javascript/reference/global_objects/object/create/index.html b/files/de/web/javascript/reference/global_objects/object/create/index.html new file mode 100644 index 0000000000..824ae41561 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/create/index.html @@ -0,0 +1,268 @@ +--- +title: Object.create() +slug: Web/JavaScript/Reference/Global_Objects/Object/create +tags: + - Methode(2) + - Méthode + - Objekt + - Referenz +translation_of: Web/JavaScript/Reference/Global_Objects/Object/create +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>Die <code><strong>Object.create()</strong></code> Methode erstellt ein neues Objekt mit dem angegebenen Prototype object und ggf. zusätzlichen Eigenschaften (properties).</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.create(<var>proto</var>[, <var>propertiesObject</var>])</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>proto</code></dt> + <dd>Das Objekt, welches als Prototype object des zu erstellenden Objekts verwendet wird.</dd> + <dt><code>propertiesObject</code></dt> + <dd>Optional. Falls angegeben und nicht {{jsxref("Global_Objects/undefined", "undefined")}}, ein Objekt dessen aufzählbare eigene Eigenschaften (properties, d.h.: Eigenschaften, die für das Objekt selbst definiert wurden und nicht in der prototype chain) als Eigenschaften dem neu erstellten Objekt hinzugefügt werden. Die Eigenschaften entsprechen dem zweiten Parameter von {{jsxref("Object.defineProperties()")}}.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein neu erzeugtes Objekt mit dem angegebenen Prototype object und den angebenenen Eigenschaften (properties).</p> + +<h3 id="Throws" name="Throws">Ausnahmen</h3> + +<p>Eine {{jsxref("Global_Objects/TypeError", "TypeError")}}-Ausnahme wird ausgelöst, wenn der <code>proto</code>-Parameter weder {{jsxref("Global_Objects/null", "null")}} noch ein Objekt ist.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example:_Classical_inheritance_with_Object.create" name="Example:_Classical_inheritance_with_Object.create">Beispiel: Klassenbasierte Vererbung mit <code>Object.create()</code></h3> + +<p>Im folgenden sehen Sie ein Beispiel wie man <code>Object.create()</code> verwenden kann, um klassenbasierte Vererbung zu realisieren. JavaScript unterstützt nur einzelne Vererbung.</p> + +<pre class="brush: js">// Shape - superclass +function Shape() { + this.x = 0; + this.y = 0; +} + +// superclass method +Shape.prototype.move = function(x, y) { + this.x += x; + this.y += y; + console.info('Shape moved.'); +}; + +// Rectangle - subclass +function Rectangle() { + Shape.call(this); // call super constructor. +} + +// subclass extends superclass +Rectangle.prototype = Object.create(Shape.prototype); +Rectangle.prototype.constructor = Rectangle; + +var rect = new Rectangle(); + +console.log('Is rect an instance of Rectangle? ' + (rect instanceof Rectangle)); // true +console.log('Is rect an instance of Shape? ' + (rect instanceof Shape)); // true +rect.move(1, 1); // Outputs, 'Shape moved.' +</pre> + +<p>Wenn Sie von mehreren Objekten erben wollen, können mixins verwendet werden.</p> + +<pre class="brush: js">function MyClass() { + SuperClass.call(this); + OtherSuperClass.call(this); +} + +MyClass.prototype = Object.create(SuperClass.prototype); // inherit +mixin(MyClass.prototype, OtherSuperClass.prototype); // mixin + +MyClass.prototype.myMethod = function() { + // do a thing +}; +</pre> + +<p>Die <code>mixin</code> Funktion kopiert die Funktionen des superclass Prototypen in den subclass Prototyp. Die mixin Funktion muss vom Benutzer bereitgestellt werden. Ein Beispiel für eine mixin-ähnliche Funktion ist <a href="http://api.jquery.com/jQuery.extend/">jQuery.extend()</a>.</p> + +<h3 id="Example:_Using_propertiesObject_argument_with_Object.create" name="Example:_Using_propertiesObject_argument_with_Object.create">Beispiel: Benutzung des <code>propertiesObject</code> Parameters von <code>Object.create()</code></h3> + +<pre class="brush: js">var o; + +// create an object with null as prototype +o = Object.create(null); + + +o = {}; +// is equivalent to: +o = Object.create(Object.prototype); + + +// Example where we create an object with a couple of sample properties. +// (Note that the second parameter maps keys to *property descriptors*.) +o = Object.create(Object.prototype, { + // foo is a regular 'value property' + foo: { writable: true, configurable: true, value: 'hello' }, + // bar is a getter-and-setter (accessor) property + bar: { + configurable: false, + get: function() { return 10; }, + set: function(value) { console.log('Setting `o.bar` to', value); } +/* with ES5 Accessors our code can look like this + get function() { return 10; }, + set function(value) { console.log('setting `o.bar` to', value); } */ + } +}); + + +function Constructor() {} +o = new Constructor(); +// is equivalent to: +o = Object.create(Constructor.prototype); +// Of course, if there is actual initialization code in the +// Constructor function, the Object.create() cannot reflect it + + +// create a new object whose prototype is a new, empty object +// and a adding single property 'p', with value 42 +o = Object.create({}, { p: { value: 42 } }); + +// by default properties ARE NOT writable, enumerable or configurable: +o.p = 24; +o.p; +// 42 + +o.q = 12; +for (var prop in o) { + console.log(prop); +} +// 'q' + +delete o.p; +// false + +// to specify an ES3 property +o2 = Object.create({}, { + p: { + value: 42, + writable: true, + enumerable: true, + configurable: true + } +}); +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p>Dieser Polyfill deckt den Hauptanwendungsfall, die Erzeugung eines neuen Objektes für das ein Prototyp ausgewählt wurde, ab.</p> + +<p>Bitte beachten Sie, dass dieses Polyfill im Gegensatz zum echten ES5 <code>Object.create</code> den Einsatz von <code>null</code> als Prototyp-Parameter aufgrund einer Einschränkung von ECMAScript vor Version 5 nicht unterstützt.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> Object<span class="punctuation token">.</span>create <span class="operator token">!=</span> <span class="string token">'function'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + Object<span class="punctuation token">.</span>create <span class="operator token">=</span> <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>undefined<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> Temp <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span> + <span class="keyword token">return</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>prototype<span class="punctuation token">,</span> propertiesObject<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>prototype <span class="operator token">!==</span> <span class="function token">Object</span><span class="punctuation token">(</span>prototype<span class="punctuation token">)</span> <span class="operator token">&&</span> prototype <span class="operator token">!==</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">throw</span> <span class="function token">TypeError</span><span class="punctuation token">(</span><span class="string token">'Argument must be an object, or null'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + Temp<span class="punctuation token">.</span>prototype <span class="operator token">=</span> prototype <span class="operator token">||</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>propertiesObject <span class="operator token">!==</span> undefined<span class="punctuation token">)</span> <span class="punctuation token">{</span> + Object<span class="punctuation token">.</span><span class="function token">defineProperties</span><span class="punctuation token">(</span>Temp<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> propertiesObject<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">var</span> result <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Temp</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + Temp<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span> + <span class="comment token">// to imitate the case of Object.create(null)</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>prototype <span class="operator token">===</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + result<span class="punctuation token">.</span>__proto__ <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">return</span> result<span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("11.60")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatOperaMobile("11.50")}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>Basierend auf <a href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p> + +<h2 id="See_also" name="See_also">Zusätzliches Material</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>John Resig's post on <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/de/web/javascript/reference/global_objects/object/defineproperty/index.html new file mode 100644 index 0000000000..7120abb08e --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/defineproperty/index.html @@ -0,0 +1,413 @@ +--- +title: Object.defineProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +tags: + - Méthode + - Objekt +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +--- +<div>{{JSRef}}</div> + +<p>Die Methode <code><strong>Object.defineProperty()</strong></code> definiert eine neue Eigenschaft direkt auf ein Objekt, oder modifiziert eine Eigenschaft. Schließlich gibt die Funktion das Objekt zurück.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Das Objekt, welchem die neue Eigenschaft zugewiesen werden soll.</dd> + <dt><code>prop</code></dt> + <dd>Der Name der Eigenschaft, welche hinzugefügt oder modifiziert werden soll.</dd> + <dt><code>descriptor</code></dt> + <dd>Die Beschreibung/ der Wert, welche die neue Eigenschaft annehmen soll.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das Objekt, welches behandelt wurde.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Diese Methode erlaubt präzises Hinzufügen oder Modifizieren von Eigenschaften eines Objektes. Normal property addition through assignment creates properties which show up during property enumeration ({{jsxref("Statements/for...in", "for...in")}} loop or {{jsxref("Object.keys")}} method), whose values may be changed, and which may be {{jsxref("Operators/delete", "deleted", "", 1)}}. This method allows these extra details to be changed from their defaults. Standardmäßig sind Werte die mit <code>Object.defineProperty()</code> hinzugefügt wurden unveränderbar.</p> + +<p>Attribut Deskriptoren unterscheiden sich in zwei Varianten: Daten Deskriptoren und Zugiffsdeskriptoren. Ein <em>Datendeskriptor</em> ist ein Attribut welches einen Wert hat das schreibbar oder nicht schreibbar sein kann. Ein <em>Zugriffsdeskriptor</em> ist ein Attribut das mit einem "getter/setter Paar" beschrieben wird. Ein Deskriptor muss von einer dieser beiden Arten sein, er kann nicht beides sein.</p> + +<p>Beide, Daten- und Zugriffsdeskriptoren sind Objekte. Sie teilen die folgenden benötigten Objektschlüssel:</p> + +<dl> + <dt><code>configurable</code></dt> + <dd><code>true</code> if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.<br> + <strong>Defaults to <code>false</code>.</strong></dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> if and only if this property shows up during enumeration of the properties on the corresponding object.<br> + <strong>Defaults to <code>false</code>.</strong></dd> +</dl> + +<p>Ein Datendeskriptor hat außerdem die folgenden, optionalen Schlüssel:</p> + +<dl> + <dt><code>value</code></dt> + <dd>The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).<br> + <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> + <dt><code>writable</code></dt> + <dd><code>true</code> if and only if the value associated with the property may be changed with an {{jsxref("Operators/Assignment_Operators", "assignment operator", "", 1)}}.<br> + <strong>Defaults to <code>false</code>.</strong></dd> +</dl> + +<p>Ein Zugriffsdeskriptor hat außerdem die folgenden, optionalen Schlüssel:</p> + +<dl> + <dt><code>get</code></dt> + <dd>A function which serves as a getter for the property, or {{jsxref("undefined")}} if there is no getter. The function return will be used as the value of property.<br> + <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> + <dt><code>set</code></dt> + <dd>A function which serves as a setter for the property, or {{jsxref("undefined")}} if there is no setter. The function will receive as only argument the new value being assigned to the property.<br> + <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> +</dl> + +<p>Bear in mind that these options are not necessarily the descriptor's own properties, and properties inherited from the prototype chain will be considered too. In order to ensure these defaults are preserved you might freeze the {{jsxref("Object.prototype")}} upfront or specify all options explicitly.</p> + +<pre class="brush: js">// being explicit +Object.defineProperty(obj, 'key', { + enumerable: false, + configurable: false, + writable: false, + value: 'static' +}); + +// recycling same object +function withValue(value) { + var d = withValue.d || ( + withValue.d = { + enumerable: false, + writable: false, + configurable: false, + value: null + } + ); + d.value = value; + return d; +} +// ... and ... +Object.defineProperty(obj, 'key', withValue('static')); + +// if freeze is available, prevents adding or +// removing the object prototype properties +// (value, get, set, enumerable, writable, configurable) +(Object.freeze || Object)(Object.prototype); +</pre> + +<h2 id="Examples">Examples</h2> + +<p>If you want to see how to use the <code>Object.defineProperty</code> method with a <em>binary-flags-like</em> syntax, see <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">additional examples</a>.</p> + +<h3 id="Creating_a_property">Creating a property</h3> + +<p>When the property specified doesn't exist in the object, <code>Object.defineProperty()</code> creates a new property as described. Fields may be omitted from the descriptor, and default values for those fields are imputed. All of the Boolean-valued fields default to <code>false</code>. The <code>value</code>, <code>get</code>, and <code>set</code> fields default to {{jsxref("undefined")}}. A property which is defined without <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> is called “generic” and is “typed” as a data descriptor.</p> + +<pre class="brush: js">var o = {}; // Creates a new object + +// Example of an object property added with defineProperty with a data property descriptor +Object.defineProperty(o, 'a', { + value: 37, + writable: true, + enumerable: true, + configurable: true +}); +// 'a' property exists in the o object and its value is 37 + +// Example of an object property added with defineProperty with an accessor property descriptor +var bValue = 38; +Object.defineProperty(o, 'b', { + get: function() { return bValue; }, + set: function(newValue) { bValue = newValue; }, + enumerable: true, + configurable: true +}); +o.b; // 38 +// 'b' property exists in the o object and its value is 38 +// The value of o.b is now always identical to bValue, unless o.b is redefined + +// You cannot try to mix both: +Object.defineProperty(o, 'conflict', { + value: 0x9f91102, + get: function() { return 0xdeadbeef; } +}); +// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors +</pre> + +<h3 id="Modifying_a_property">Modifying a property</h3> + +<p>When the property already exists, <code>Object.defineProperty()</code> attempts to modify the property according to the values in the descriptor and the object's current configuration. If the old descriptor had its <code>configurable</code> attribute set to <code>false</code> (the property is said to be “non-configurable”), then no attribute besides <code>writable</code> can be changed. In that case, it is also not possible to switch back and forth between the data and accessor property types.</p> + +<p>If a property is non-configurable, its <code>writable</code> attribute can only be changed to <code>false</code>.</p> + +<p>A {{jsxref("TypeError")}} is thrown when attempts are made to change non-configurable property attributes (besides the <code>writable</code> attribute) unless the current and new values are the same.</p> + +<h4 id="Writable_attribute">Writable attribute</h4> + +<p>When the <code>writable</code> property attribute is set to <code>false</code>, the property is said to be “non-writable”. It cannot be reassigned.</p> + +<pre class="brush: js">var o = {}; // Creates a new object + +Object.defineProperty(o, 'a', { + value: 37, + writable: false +}); + +console.log(o.a); // logs 37 +o.a = 25; // No error thrown (it would throw in strict mode, even if the value had been the same) +console.log(o.a); // logs 37. The assignment didn't work. +</pre> + +<p>As seen in the example, trying to write into the non-writable property doesn't change it but doesn't throw an error either.</p> + +<h4 id="Enumerable_attribute">Enumerable attribute</h4> + +<p>The <code>enumerable</code> property attribute defines whether the property shows up in a {{jsxref("Statements/for...in", "for...in")}} loop and {{jsxref("Object.keys()")}} or not.</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { value: 1, enumerable: true }); +Object.defineProperty(o, 'b', { value: 2, enumerable: false }); +Object.defineProperty(o, 'c', { value: 3 }); // enumerable defaults to false +o.d = 4; // enumerable defaults to true when creating a property by setting it + +for (var i in o) { + console.log(i); +} +// logs 'a' and 'd' (in undefined order) + +Object.keys(o); // ['a', 'd'] + +o.propertyIsEnumerable('a'); // true +o.propertyIsEnumerable('b'); // false +o.propertyIsEnumerable('c'); // false +</pre> + +<h4 id="Configurable_attribute">Configurable attribute</h4> + +<p>The <code>configurable</code> attribute controls at the same time whether the property can be deleted from the object and whether its attributes (other than <code>writable</code>) can be changed.</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { + get: function() { return 1; }, + configurable: false +}); + +Object.defineProperty(o, 'a', { configurable: true }); // throws a TypeError +Object.defineProperty(o, 'a', { enumerable: true }); // throws a TypeError +Object.defineProperty(o, 'a', { set: function() {} }); // throws a TypeError (set was undefined previously) +Object.defineProperty(o, 'a', { get: function() { return 1; } }); // throws a TypeError (even though the new get does exactly the same thing) +Object.defineProperty(o, 'a', { value: 12 }); // throws a TypeError + +console.log(o.a); // logs 1 +delete o.a; // Nothing happens +console.log(o.a); // logs 1 +</pre> + +<p>If the <code>configurable</code> attribute of <code>o.a</code> had been <code>true</code>, none of the errors would be thrown and the property would be deleted at the end.</p> + +<h3 id="Adding_properties_and_default_values">Adding properties and default values</h3> + +<p>It's important to consider the way default values of attributes are applied. There is often a difference between simply using dot notation to assign a value and using <code>Object.defineProperty()</code>, as shown in the example below.</p> + +<pre class="brush: js">var o = {}; + +o.a = 1; +// is equivalent to: +Object.defineProperty(o, 'a', { + value: 1, + writable: true, + configurable: true, + enumerable: true +}); + + +// On the other hand, +Object.defineProperty(o, 'a', { value: 1 }); +// is equivalent to: +Object.defineProperty(o, 'a', { + value: 1, + writable: false, + configurable: false, + enumerable: false +}); +</pre> + +<h3 id="Custom_Setters_and_Getters">Custom Setters and Getters</h3> + +<p>Example below shows how to implement a self-archiving object. When <code>temperature</code> property is set, the <code>archive</code> array gets a log entry.</p> + +<pre class="brush: js">function Archiver() { + var temperature = null; + var archive = []; + + Object.defineProperty(this, 'temperature', { + get: function() { + console.log('get!'); + return temperature; + }, + set: function(value) { + temperature = value; + archive.push({ val: temperature }); + } + }); + + this.getArchive = function() { return archive; }; +} + +var arc = new Archiver(); +arc.temperature; // 'get!' +arc.temperature = 11; +arc.temperature = 13; +arc.getArchive(); // [{ val: 11 }, { val: 13 }] +</pre> + +<p>or</p> + +<pre class="brush: js">var pattern = { + get: function () { + return 'I always return this string, whatever you have assigned'; + }, + set: function () { + this.myname = 'this is my name string'; + } +}; + + +function TestDefineSetAndGet() { + Object.defineProperty(this, 'myproperty', pattern); +} + + +var instance = new TestDefineSetAndGet(); +instance.myproperty = 'test'; +console.log(instance.myproperty); // I always return this string, whatever you have assigned + +console.log(instance.myname); // this is my name string + +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatIE("9")}} [1]</td> + <td>{{CompatOpera("11.60")}}</td> + <td>{{CompatSafari("5.1")}} [2]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOperaMobile("11.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Internet Explorer 8 only on DOM objects and with some non-standard behaviors.</p> + +<p>[2] Also supported in Safari 5, but not on DOM objects.</p> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<h3 id="Redefining_the_length_property_of_an_Array_object">Redefining the <code>length</code> property of an <code>Array</code> object</h3> + +<p>It is possible to redefine the {{jsxref("Array.length", "length")}} property of arrays, subject to the usual redefinition restrictions. (The {{jsxref("Array.length", "length")}} property is initially non-configurable, non-enumerable, and writable. Thus on an unaltered array it is possible to change the {{jsxref("Array.length", "length")}} property's value, or to make it non-writable. It is not allowed to change its enumerability or configurability, or if it is non-writable to change its value or writability.) However, not all browsers permit this redefinition.</p> + +<p>Firefox 4 through 22 will throw a {{jsxref("TypeError")}} on any attempt whatsoever (whether permitted or not) to redefine the {{jsxref("Array.length", "length")}} property of an array.</p> + +<p>Versions of Chrome which implement <code>Object.defineProperty()</code> in some circumstances ignore a length value different from the array's current {{jsxref("Array.length", "length")}} property. In some circumstances changing writability seems to silently not work (and not throw an exception). Also, relatedly, some array-mutating methods like {{jsxref("Array.prototype.push")}} don't respect a non-writable length.</p> + +<p>Versions of Safari which implement <code>Object.defineProperty()</code> ignore a <code>length</code> value different from the array's current {{jsxref("Array.length", "length")}} property, and attempts to change writability execute without error but do not actually change the property's writability.</p> + +<p>Only Internet Explorer 9 and later, and Firefox 23 and later, appear to fully and correctly implement redefinition of the {{jsxref("Array.length", "length")}} property of arrays. For now, don't rely on redefining the {{jsxref("Array.length", "length")}} property of an array to either work, or to work in a particular manner. And even when you <em>can</em> rely on it, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">there's really no good reason to do so</a>.</p> + +<h3 id="Internet_Explorer_8_specific_notes">Internet Explorer 8 specific notes</h3> + +<p>Internet Explorer 8 implemented a <code>Object.defineProperty()</code> method that could <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">only be used on DOM objects</a>. A few things need to be noted:</p> + +<ul> + <li>Trying to use <code>Object.defineProperty()</code> on native objects throws an error.</li> + <li>Property attributes must be set to some values. <code>Configurable</code>, <code>enumerable</code> and <code>writable</code> attributes should all be set to <code>true</code> for data descriptor and <code>true</code> for <code>configurable</code>, <code>false</code> for <code>enumerable</code> for accessor descriptor.(?) Any attempt to provide other value(?) will result in an error being thrown.</li> + <li>Reconfiguring a property requires first deleting the property. If the property isn't deleted, it stays as it was before the reconfiguration attempt.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Object.prototype.watch()")}}</li> + <li>{{jsxref("Object.prototype.unwatch()")}}</li> + <li>{{jsxref("Operators/get", "get")}}</li> + <li>{{jsxref("Operators/set", "set")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Additional <code>Object.defineProperty</code> examples</a></li> + <li>{{jsxref("Reflect.defineProperty()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/entries/index.html b/files/de/web/javascript/reference/global_objects/object/entries/index.html new file mode 100644 index 0000000000..4ac921f62b --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/entries/index.html @@ -0,0 +1,168 @@ +--- +title: Object.entries() +slug: Web/JavaScript/Reference/Global_Objects/Object/entries +tags: + - Entries + - Iterieren + - JavaScript + - Méthode + - Objekt + - Referenz + - Schleife +translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.entries()</strong></code><strong> </strong>ist eine Methode für Objekte. Zurückgegeben wird ein Array mit den Eigenschaften des Objektes. Diese Eigenschaften werden in Key-Value-Paaren als zählbare strings zurückgegeben.</p> + +<p>Im Gegensatz zur {{jsxref("Statements/for...in", "for...in")}}-Schleife werden dabei nicht die constructor- Eigenschaften zurückgegeben, die das Objekt von seinem <code>prototype</code> geerbt hat.</p> + +<div> +<p>Die Reihenfolge der Key-Value-Paare ist dabei die gleiche wie bei einer {{jsxref("Statements/for...in", "for...in")}}-Schleife. Sie hängt nicht davon ab, wie das ursprüngliche Objekt aufgebaut ist. Ist eine bestimmte Reihenfolge erwünscht, muss der Array sortiert werden:<br> + <code>Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));</code>.</p> + +<p> </p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Ein Objekt besitzt Eigenschaften in Form von Key-Value-Paaren. </dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Zurückgegeben wird ein Array mit den Key-Value-Paaren (<code>[key, value]</code>) eines Objektes in Form von zählbaren strings.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>Object.entries()</code> erzeugt einen Array auf Basis eines Objekts. Die Eigenschaften des Objekts werden im Array als Key-Value-Paare gespeichert.<br> + Die Reihenfolge der Eigenschaften ist dabei gleich einer manuellen Iteration über das Objekt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; +console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] + +// Array-ähnliches Objekt +const obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] + +// Array-ähnliches Objekt mit zufälliger Reihenfolge der Keys +const anObj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] + +// getFoo- Eigenschaft ist nicht zählbar +const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } }); +myObj.foo = 'bar'; +console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ] + +// Das Argument, das kein Objekt ist, wird in ein Objekt umgewandelt +console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] + +// Gibt einen Leeren Array zurück, da primitive Datentypen keine eigenen Eigenschaften haben +console.log(Object.entries(100)); // [ ] + +// Elegant über Key-Value-Paare iterieren +const obj = { a: 5, b: 7, c: 9 }; +for (const [key, value] of Object.entries(obj)) { + console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +} + +// Mit array extras über Key-Value-Paare iterieren +Object.entries(obj).forEach(([key, value]) => { + console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +}); +</pre> + +<h3 id="Ein_Object_in_ein_Map-Objekt_umwandeln">Ein <code>Object</code> in ein <code>Map-Objekt</code> umwandeln</h3> + +<p>Der {{jsxref("Map", "new Map()")}}-constructor akzeptiert zählbare <code>entries</code>. Mithilfe von <code>Object.entries</code> kann ein {{jsxref("Object")}} in ein {{jsxref("Map")}}-Objekt umgewandelt werden:</p> + +<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; +const map = new Map(Object.entries(obj)); +console.log(map); // Map { foo: "bar", baz: 42 } +</pre> + +<h3 id="Durch_das_Object_iterieren">Durch das <code>Object</code> iterieren</h3> + +<p>Mit der Technik der <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung">destrukturierenden Zuweisung</a> kann durch Objekte iteriert werden.</p> + +<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; +Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Um <code>Object.entries</code> auch in älteren Umgebungen zu nutzen, die diese Methode nicht nativ unterstützen, sind Polyfills im <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> (ohne IE) order im <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a>-Repository finden. Untenstehender Polyfill ist ebenfalls verwendbar:</p> + +<pre class="brush: js">if (!Object.entries) { + Object.entries = function( obj ){ + var ownProps = Object.keys( obj ), + i = ownProps.length, + resArray = new Array(i); // preallocate the Array + while (i--) + resArray[i] = [ownProps[i], obj[ownProps[i]]]; + + return resArray; + }; +} +</pre> + +<p>Sollten Sie auch IE < 9 unterstützen müssen, brauchen sie jedoch zusätzlich den <code>Object.keys</code>-Polyfill, zu finden auf {{jsxref("Object.keys")}}.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td> + <td>{{Spec2('ES8')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.entries")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.fromEntries()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/freeze/index.html b/files/de/web/javascript/reference/global_objects/object/freeze/index.html new file mode 100644 index 0000000000..b0379d636c --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/freeze/index.html @@ -0,0 +1,253 @@ +--- +title: Object.freeze() +slug: Web/JavaScript/Reference/Global_Objects/Object/freeze +tags: + - ECMAScript5 + - JavaScript + - Methode(2) + - Objekt +translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze +--- +<div>{{JSRef}}</div> + +<p>Die Methode <code><strong>Object.freeze()</strong></code> <strong>friert</strong> ein Objekt <strong>ein</strong>. Ein eingefrorenes Objekt kann nicht mehr geändert werden. Das Einfrieren eines Objekts verhindert, dass neue Eigenschaften hinzugefügt oder existierende entfernt und die Aufzählbarkeit, Konfigurierbarkeit oder Schreibbarkeit vorhandener Eigenschaften und deren Werte geändert werden können. Durch das Einfrieren eines Objekts wird außerdem verhindert, dass der Prototyp geändert wird. <code>freeze()</code> gibt das gleiche Objekt zurück, das übergeben wurde.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.freeze(<var>obj</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Das einzufrierende Objekt.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Das Objekt, welches an die Funktion übergeben wurde.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Zum Eigenschaftssatz eines eingefrorenen Objekts kann nichts hinzugefügt oder daraus entfernt werden. Jeder Versuch, dies zu tun, schlägt fehl, entweder im Hintergrund oder durch Auslösen einer {{jsxref("TypeError")}} Exception (meistens, jedoch nicht ausschließlich, wenn im {{jsxref("Strict_mode", "strikten Modus", "", 1)}}).</p> + +<p>Bei Dateneigenschaften eines eingefrorenen Objekts können Werte nicht geändert werden. Die Attribute für Beschreibbarkeit und Konfigurierbarkeit werden auf false gesetzt. Accessor-Eigenschaften (Getter und Setter) funktionieren gleich (und lassen einen nach wie vor in dem Glauben etwas zu ändern). Beachten Sie, dass Werte, die Objekte sind, immer noch geändert werden können, es sei denn, sie werden ebenfalls eingefroren. Da ein Array ein Objekt ist, kann es eingefroren werden. Danach können seine Elemente nicht mehr geändert und keine Elemente hinzugefügt oder entfernt werden.</p> + +<p><code>freeze()</code> gibt das gleiche Objekt zurück, das an die Funktion übergeben wurde. Es wird <em>keine</em> eingefrorene Kopie erstellt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Objekte_einfrieren">Objekte einfrieren</h3> + +<pre class="brush: js">var obj = { + prop: function() {}, + foo: 'bar' +}; + +// Vor dem Einfrieren: neue Eigenschaften können hinzugefügt +// und vorhandene Eigenschaften geändert oder entfernt werden +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + +// Einfrieren +var o = Object.freeze(obj); + +// Der Rückgabewert ist dasselbe Objekt, das übergeben wurde +o === obj; // true + +// Das Objekt ist eingefroren +Object.isFrozen(obj); // === true + +// Jetzt schlagen sämtliche Änderungen fehl +obj.foo = 'quux'; // nichts passiert, im Stillen +// fügt die Eigenschaft nicht hinzu, im Stillen +obj.quaxxor = 'the friendly duck'; + +// Im strikten Modus lösen solche Versuche TypeErrors aus +function fail(){ + 'use strict'; + obj.foo = 'sparky'; // löst TypeError aus + delete obj.foo; // löst TypeError aus + delete obj.quaxxor; // gibt true zurück, da Attribut 'quaxxor' nie hinzugefügt wurde + obj.sparky = 'arf'; // löst TypeError aus +} + +fail(); + +// Versuchte Änderungen über Object.defineProperty; +// beide Anweisungen lösen TypeError aus +Object.defineProperty(obj, 'ohai', { value: 17 }); +Object.defineProperty(obj, 'foo', { value: 'eit' }); + +// Der prototype kann ebenfalls nicht geändert werden +// beide Anweisungen lösen TypeError aus +Object.setPrototypeOf(obj, { x: 20 }) +obj.__proto__ = { x: 20 } +</pre> + +<h3 id="Arrays_einfrieren">Arrays einfrieren</h3> + +<pre class="brush: js">let a = [0]; +Object.freeze(a); // Das Array kann nicht mehr geändert werden + +a[0]=1; // schlägt still fehl +a.push(2); // schlägt still fehl + +// Im strikten Modus lösen solche Versuche TypeErrors aus +function fail() { + "use strict" + a[0] = 1; + a.push(2); +} + +fail();</pre> + +<p>Das eingefrorene Objekt ist <em>unveränderlich</em> (engl. <em>immutable</em>). Es ist jedoch nicht notwendigerweise <em>konstant</em>. Das folgende Beispiel zeigt, dass ein eingefrorenes Objekt nicht konstant ist (Einfrieren ist flach).</p> + +<pre class="brush: js">obj1 = { + internal: {} +}; + +Object.freeze(obj1); +obj1.internal.a = 'aValue'; + +obj1.internal.a // 'aValue'</pre> + +<p>Um ein konstantes Objekt zu sein, muss der gesamte Referenzgraph (direkte und indirekte Verweise auf andere Objekte) nur unveränderliche eingefrorene Objekte referenzieren. Das eingefrorene Objekt wird als unveränderlich (immutable) bezeichnet, da der gesamte <em>Objektzustand</em> (Werte und Verweise auf andere Objekte) innerhalb des gesamten Objekts fix ist. Beachten Sie, dass Strings, Zahlen und Booleans immer unveränderlich (immutable) und Funktionen und Arrays Objekte sind.</p> + +<h4 id="Was_ist_flaches_Einfrieren">Was ist "flaches Einfrieren"?</h4> + +<p>Das Ergebnis des Aufrufs von <code>Object.freeze(<var>object</var>)</code> gilt nur für die unmittelbaren Eigenschaften von <code>object</code> selbst und verhindert, dass zukünftige Eigenschaften hinzugefügt, entfernt oder Werte auf <em>diesem</em> <code>object</code> neu zugewiesen werden. Wenn der Wert dieser Eigenschaften selbst Objekte sind, werden diese Objekte nicht eingefroren und können das Ziel von Eigenschaftszusatz-, Entfernungs- oder Wertzuordnungsvorgängen sein.</p> + +<pre class="brush: js">var employee = { + name: "Mayank", + designation: "Developer", + address: { + street: "Rohini", + city: "Delhi" + } +}; + +Object.freeze(employee); + +employee.name = "Dummy"; // schlägt im nicht-strikten Modus still fehl +employee.address.city = "Noida"; // Attribute von Kind-Objekt können geändert werden + +console.log(employee.address.city) // Ausgabe: "Noida" +</pre> + +<p>Um ein Objekt unveränderlich zu machen, frieren Sie rekursiv jede Eigenschaft vom Typ <code>object</code> ein (deep freeze). Verwenden Sie das Muster im Einzelfall basierend auf Ihrem Entwurf, wenn Sie wissen, dass das Objekt keine {{interwiki("wikipedia", "Zyklus_(Graphentheorie)", "Zyklen")}} im Referenzgraph enthält, andernfalls kommt es zu einer Endlosschleife. Eine Verbesserung von <code>deepFreeze()</code> wäre eine interne Funktion, die ein Argument für einen Pfad (z. B. ein Array) empfängt, sodass Sie den Aufruf von <code>deepFreeze()</code> rekursiv unterdrücken können, wenn ein Objekt gerade unveränderlich gemacht wird. Es besteht weiterhin die Gefahr, dass ein Objekt eingefroren wird, das nicht eingefroren werden sollte, wie z. B. [window].</p> + +<pre class="brush: js">function deepFreeze(object) { + + // Abrufen der definierten Eigenschaftsnamen des Objekts + var propNames = Object.getOwnPropertyNames(object); + + // Eigenschaften vor dem eigenen Einfrieren einfrieren + + for (let name of propNames) { + let value = object[name]; + + object[name] = value && typeof value === "object" ? + deepFreeze(value) : value; + } + + return Object.freeze(object); +} + +var obj2 = { + internal: { + a: null + } +}; + +deepFreeze(obj2); + +obj2.internal.a = 'anotherValue'; // schlägt im nicht-strikten Modus still fehl +obj2.internal.a; // null +</pre> + +<h2 id="Nutzungshinweise">Nutzungshinweise</h2> + +<p>Wenn das Argument für diese Methode kein Objekt (ein Primitiv) ist, führt dies in ES5 zu einem {{jsxref("TypeError")}}. In ES2015 wird ein Nicht-Objekt-Argument wie ein eingefrorenes gewöhnliches Objekt behandelt und einfach zurückgegeben.</p> + +<pre class="brush: js">> Object.freeze(1) +TypeError: 1 is not an object // ES5 Code + +> Object.freeze(1) +1 // ES2015 Code +</pre> + +<p>Ein {{domxref("ArrayBufferView")}} mit Elementen verursacht einen {{jsxref("TypeError")}}, da diese Ansichten über den Arbeitsspeicher sind und auf jeden Fall andere mögliche Probleme verursachen können:</p> + +<pre class="brush: js">> Object.freeze(new Uint8Array(0)) // Keine Elemente +Uint8Array [] + +> Object.freeze(new Uint8Array(1)) // Hat Elemente +TypeError: Cannot freeze array buffer views with elements + +> Object.freeze(new DataView(new ArrayBuffer(32))) // Keine Elemente +DataView {} + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // Keine Elemente +Float64Array [] + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Hat Elemente +TypeError: Cannot freeze array buffer views with elements +</pre> + +<p>Beachten Sie, da die drei Standard-Eigenschaften (<code>buf.byteLength</code>, <code>buf.byteOffset</code> und <code>buf.buffer</code>) schreibgeschützt sind (wie die Eigenschaften eines {{jsxref("ArrayBuffer")}} oder {{jsxref("SharedArrayBuffer")}}) gibt es keinen Grund, diese einzufrieren.</p> + +<h3 id="Vergleich_zu_Object.seal()">Vergleich zu <code>Object.seal()</code></h3> + +<p>Vorhandene Eigenschaften in Objekten, die mit {{jsxref("Object.seal()")}} versiegelt wurden, können geändert werden. Vorhandene Eigenschaften in Objekten, die mit <code>Object.freeze()</code> eingefroren wurden, werden unveränderlich gemacht.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.builtins.Object.freeze")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/getownpropertynames/index.html b/files/de/web/javascript/reference/global_objects/object/getownpropertynames/index.html new file mode 100644 index 0000000000..1e76977b49 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/getownpropertynames/index.html @@ -0,0 +1,201 @@ +--- +title: Object.getOwnPropertyNames() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +tags: + - german +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +--- +<div>{{JSRef}}</div> + +<p>Die <strong><code>Object.getOwnPropertyNames()</code></strong> Methode gibt einen Array mit allen Eigenschaftsnamen (aufzählbar oder nicht) zurück, welche direkt auf einem Objekt gefunden werden. </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.getOwnPropertyNames(<var>obj</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Das Objekt dessen aufzählbaren und nicht aufzählbaren Eigenschaftsnamen gesucht sind. </dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Object.getOwnPropertyNames () gibt ein Array zurück, dessen Elemente Strings sind, die den aufzählbar und nicht aufzählbar Eigenschaften direkt auf dem Objekt gefunden werden. Die Reihenfolge der Enumerable-Objekte im Array steht im Einklang mit der Benutzung von einer exponierten Schleife {{jsxref ("Statements / for ... in", "for ... in")}} (oder durch {{jsxref ("Object.keys () ")}}) über die Eigenschaften des Objekts. Die Reihenfolge der nicht-aufzählbar Objekte im Array, und unter den aufzählbare Eigenschaften, ist nicht definiert.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Benutzung_von_Object.getOwnPropertyNames()"><code>Benutzung von Object.getOwnPropertyNames()</code></h3> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; +console.log(Object.getOwnPropertyNames(arr).sort()); // logs '0,1,2,length' + +// Array-like object +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.getOwnPropertyNames(obj).sort()); // logs '0,1,2' + +// Logging property names and values using Array.forEach +Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) { + console.log(val + ' -> ' + obj[val]); +}); +// logs +// 0 -> a +// 1 -> b +// 2 -> c + +// non-enumerable property +var my_obj = Object.create({}, { + getFoo: { + value: function() { return this.foo; }, + enumerable: false + } +}); +my_obj.foo = 1; + +console.log(Object.getOwnPropertyNames(my_obj).sort()); // logs 'foo,getFoo' +</pre> + +<p>Wenn Sie nur die aufzählbare Eigenschaften möchten, kann man die Funktion {{jsxref ("Object.keys ()")}} benutzen. Alternativ können auch Schlaufen {{jsxref ("Statements / for ... in", "for ... in")}} verwendet werden (dies gibt nicht nur die aufzählbaren Eigenschaften des Objektes, sondern auch entlang der Prototypkette zurück. Behoben kann diese mit der Methode {{jsxref ("Object.prototype.hasOwnProperty ()", "hasOwnProperty ()" )}}).</p> + +<p>Items welche sich im Prototype chain befinden, werden nicht aufgelistet.</p> + +<pre class="brush: js">function ParentClass() {} +ParentClass.prototype.inheritedMethod = function() {}; + +function ChildClass() { + this.prop = 5; + this.method = function() {}; +} +ChildClass.prototype = new ParentClass; +ChildClass.prototype.prototypeMethod = function() {}; + +console.log( + Object.getOwnPropertyNames( + new ChildClass() // ['prop', 'method'] + ) +); +</pre> + +<h3 id="Nur_unzählige_Eigenschaften">Nur unzählige Eigenschaften</h3> + +<p>Es wird die {{jsxref("Array.prototype.filter()")}} Funktion benötigt um alle zählbaren Schlüssel (erhalten mit {{jsxref("Object.keys()")}}) von einer Liste mit allen Schlüsseln (erhalten mit <code>Object.getOwnPropertyNames()</code>) zu vergleichen, welches nur die unzähligen Eigenschaften zurück lässt.</p> + +<pre class="brush: js">var target = myObject; +var enum_and_nonenum = Object.getOwnPropertyNames(target); +var enum_only = Object.keys(target); +var nonenum_only = enum_and_nonenum.filter(function(key) { + var indexInEnum = enum_only.indexOf(key); + if (indexInEnum == -1) { + // not found in enum_only keys mean the key is non-enumerable, + // so return true so we keep this in the filter + return true; + } else { + return false; + } +}); + +console.log(nonenum_only); +</pre> + +<h2 id="Notizen">Notizen</h2> + +<p>Wenn bei ES5 das Argument der Methode kein primitives Objekt ist, wird der Funktionsaufruf ein {{jsxref("TypeError")}} werfen. In ES6 wird ein nicht-Objekt Argument automatisch in ein Objekt gecasted.</p> + +<pre class="brush: js">Object.getOwnPropertyNames('foo'); +// TypeError: "foo" is not an object (ES5 code) + +Object.getOwnPropertyNames('foo'); +// ['length', '0', '1', '2'] (ES6 code) +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initialdefinition. Implementiert in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basissupport</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basissupport</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="SpiderMonkey-spezifische_Notizen">SpiderMonkey-spezifische Notizen</h2> + +<p> </p> + +<p>Vor SpiderMonkey 28 {{geckoRelease("28")}}, ignorierte die Funktion <code>Object.getOwnPropertyNames</code> unaufgelöste Eigenschaften eines {{jsxref("Error")}} Objektes. Dieser Fehler wurde in den letzten Versionen behoben ({{bug("724768")}}).</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Array.forEach()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/de/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..cb2c6c0028 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,133 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>Object.getPrototypeOf()</strong></code> Methode gibt den Prototyp (den Wert der internen <code>[[Prototype]]</code> Eigenschaft) des angegebenen Objekts <em>obj</em> zurück</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Das Objekt, dessen Prototyp zurückgegeben werden soll.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Der Prototyp des Objekts <em>obj</em> wird zurückgegeben. Wenn keine Eigenschaften vererbt werden, wird {{jsxref("null")}} zurück gegeben.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">var proto = {}; +var obj = Object.create(proto); +Object.getPrototypeOf(obj) === proto; // true +</pre> + +<h2 id="Notizen">Notizen</h2> + +<p>In ES5 wird eine {{jsxref("TypeError")}} exception geworfen, falls der Parameter obj kein Objekt ist . In ES2015 wird der Parameter <em>obj</em> in ein {{jsxref("Object")}} umgewandelt.</p> + +<pre class="brush: js">Object.getPrototypeOf('foo'); +// TypeError: "foo" is not an object (ES5 code) +Object.getPrototypeOf('foo'); +// String.prototype (ES2015 code) +</pre> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12.10")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Opera-spezfische_Notizen">Opera-spezfische Notizen</h2> + +<p>Even though older Opera versions don't support <code>Object.getPrototypeOf()</code> yet, Opera supports the non-standard {{jsxref("Object.proto", "__proto__")}} property since Opera 10.50.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__proto__")}}</li> + <li>John Resig's post on <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/de/web/javascript/reference/global_objects/object/hasownproperty/index.html new file mode 100644 index 0000000000..1d990d3bfa --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/hasownproperty/index.html @@ -0,0 +1,203 @@ +--- +title: Object.prototype.hasOwnProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +tags: + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +--- +<div>{{JSRef}}</div> + +<p>Die Methode <code><strong>hasOwnProperty() </strong></code>gibt einen boolean Wert zurück abhängig von der Existenz des gegebenen <strong>Attributs</strong> in einem <strong>Objekt.</strong></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>obj</var>.hasOwnProperty(<var>prop</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Der Name des Attributs auf dessen Existenz im Objekt geprüft wird</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein {{jsxref("Boolean")}} der besagt, ob eine Eigenschaft in dem gegebenen Objekte vorhanden ist oder nicht.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Jedes untergeordnete Objekt / jeder untergeordneter Wert in einem Objekt trägt die hasOwnProperty Methode mit sich. Diese Methode ermöglicht das Nachfragen eines untergeordneten Wertes/Objekts innerhalb eines Objekts. Anders als die {{jsxref("Operators/in", "in")}} Methode ermöglicht die hasOwnProperty Methode keinen Zugriff auf die Kindeskinder eines Objekts.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einsatz_von_hasOwnProperty_zur_Überprüfung_der_Existenz_eines_Attributs_in_einem_Objekt">Einsatz von hasOwnProperty zur Überprüfung der Existenz eines Attributs in einem Objekt</h3> + +<p>Das folgende Beispiel prüft ob das Objekt <code>o</code> ein Attribut mit dem Namen <code>prop</code> beinhaltet.</p> + +<pre class="brush: js">o = new Object(); +o.prop = 'exists'; + +function changeO() { + o.newprop = o.prop; + delete o.prop; +} + +o.hasOwnProperty('prop'); // gibt true zurück +changeO(); +o.hasOwnProperty('prop'); // gibt false zurück +</pre> + +<h3 id="Direkter_Nachfolger_vs_Geerbtes_Attribut">Direkter Nachfolger vs Geerbtes Attribut</h3> + +<p>Das folgende Beispiel unterscheidet zwischen direkten Kind-Attributen eines Objekts und den Attributen die durch die prototype - Verarbeitung entstehen.</p> + +<pre class="brush: js">o = new Object(); +o.prop = 'exists'; +o.hasOwnProperty('prop'); // gibt true zurück +o.hasOwnProperty('toString'); // gibt false zurück +o.hasOwnProperty('hasOwnProperty'); // gibt false zurück +</pre> + +<h3 id="Über_die_Eigenschaften_eines_Objektes_iterieren">Über die Eigenschaften eines Objektes iterieren</h3> + +<p>Das folgende Beispiel zeigt, wie man über die Eigenschaften eines Objektes iteriert ohne vererbte Eigenschaften auszuführen. Zu Beachten ist, dass eine {{jsxref("Statements/for...in", "for...in")}} Schleife nur über zählbare (enumerable) Eigenschaften iteriert, jedoch sollte man durch diese Einschränkung nicht annehmen, dass nicht-zählbare Eigenschaften gezeigt werden, denn <code>hasOwnProperty</code> selbst kann nur auf zählbare Eigenschaften angewendet werden (wie auch die {{jsxref("Object.getOwnPropertyNames()")}} Funktion):</p> + +<pre class="brush: js">var buz = { + fog: 'stack' +}; + +for (var name in buz) { + if (buz.hasOwnProperty(name)) { + console.log('this is fog (' + name + ') for sure. Value: ' + buz[name]); + } + else { + console.log(name); // toString or something else + } +} +</pre> + +<h3 id="Einsatz_von_hasOwnProperty_als_Eigenschaftsname">Einsatz von <code>hasOwnProperty</code> als Eigenschaftsname</h3> + +<p>JavaScript schützt die den Eigenschaftsnamen <code>hasOwnProperty</code> nicht. Dadurch ist es möglich, dass ein Objekt eine Eigenschaft mit diesem namen hat. Das ermöglicht es eine externe <code>hasOwnProperty</code> Funktion zu benutzen:</p> + +<pre class="brush: js">var foo = { + hasOwnProperty: function() { + return false; + }, + bar: 'Here be dragons' +}; + +foo.hasOwnProperty('bar'); // always returns false + +// Use another Object's hasOwnProperty and call it with 'this' set to foo +({}).hasOwnProperty.call(foo, 'bar'); // true + +// It's also possible to use the hasOwnProperty property from the Object prototype for this purpose +Object.prototype.hasOwnProperty.call(foo, 'bar'); // true +</pre> + +<p>Zu beachten ist, dass im letzten Fall kein neues Objekt erstellt wird.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>iOS WebKit<br> + <sup><sub>(Safari/Chrome/Firefox/etc)</sub></sup></th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften">Aufzählbarkeit und Zugehörigkeit von Eigenschaften</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li><a href="/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Vererbung und die Prototypenkette</a></li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/index.html b/files/de/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..55eb55035d --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,186 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Der <code><strong>Object</strong></code>-Konstruktor erstellt ein Objekt</p> + +<h2 id="Syntax" name="Syntax">Konstruktor</h2> + +<pre class="syntaxbox"><code><code>// Object Initialisierer / Literal +{ <em>[ NameWertPaar1 [, NameWertPaar2 [, ...NameWertPaarN] ] ]</em> } + +// Konstruktor-Form +</code>new Object( <em>[ Wert ]</em> )</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt>NameWertPaar1, NameWertPaar2, ... NameWertPaarN</dt> + <dd>Paare von Namen (<code><strong>String</strong></code>) und Werten (eines beliebigen Typs) bei denen der Name durch ein Doppelpunkt vom Wert getrennt ist.</dd> +</dl> + +<dl> + <dt>Wert</dt> + <dd>Ein Wert eines beliebigen Typs.</dd> +</dl> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Der <code>Object</code> Konstruktor erstellt ein Objekt für den übergebenen Wert. Wenn der Wert {{jsxref("null")}} oder {{jsxref("undefined")}} ist, wird ein leeres <code>Object</code> erstellt und zurückgegeben. Ansonsten wird ein Objekt des Typs erstellt, welcher dem übergebenen Wert entspricht. Sollte der Wert bereits ein vom Typ <code>Object</code> sein, wird dieses zurückgeggeben.</p> + +<p>Wenn sie nicht als Konstruktor aufgerufen wird (d.h. ohne <code>new</code>), verhält sich die Funktion <code>Object</code> genau so wie <code>new Object()</code>.</p> + +<p>Siehe auch den <a href="/de/docs/Web/JavaScript/Reference/Operators/Objekt_Initialisierer">Object Intialisierer / Literal Syntax</a>.</p> + +<h2 id="Properties" name="Properties">Eigenschaften des <code>Object</code> Konstruktors</h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>Hat den Wert 1.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Erlaubt es neue Eigenschaften zu allen Objekten des Typs Object hinzuzufügen.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methoden des <code>Object</code> Konstruktors</h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>Kopiert die Werte aller <strong>eigenen</strong>, aufzählbaren Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Erstellt ein neues Objekt mit dem angegebenen Protoyp-Objekt und optionalen Eigenschaften.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Fügt eine neue Eigenschaft einem bestimmten Objekt hinzu, welche durch Zusatzinformationen beschrieben wird.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Fügt mehrere Eigenschaften einem bestimmten Objekt hinzu, welche durch Zusatzinformationen beschrieben werden.</dd> + <dt>{{jsxref("Object.entries()")}}</dt> + <dd>Gibt ein Array zurück, welches alle <strong>eigenen</strong>, aufzählbaren String-Eigenschaften in der Form von <code>[Name, Wert]</code>-Paaren enthält.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd><strong>Friert</strong> ein Objekt <strong>ein</strong>: Die Eigenschaften können nicht mehr geändert oder gelöscht werden.</dd> + <dt>{{jsxref("Object.fromEntries()")}}</dt> + <dd>Erstellt ein Objekt aus einer Liste von <code>[Name, Wert]</code>-Paaren (kehrt {{jsxref("Object.entries")}} um).</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Gibt die Zusatzinformationen einer bestimmten <strong>eigenen</strong> Eigenschaft zurück.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt> + <dd>Gibt ein Objekt zurück, welches die Zusatzinformationen aller <strong>eigenen</strong> Eigenschaften enthält.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Gibt ein Array zurück, welches die Namen aller <strong>eigenen</strong>, aufzählbaren und nicht-aufzählbaren Eigenschaften enthält.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>Gibt ein Array zurück, welches die Symbole aller <strong>eigenen</strong> Eigenschaften enthält.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Gibt den Protoypen des angegebenen Objekts zurück.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>Vergleicht ob zwei Werte den gleichen Wert haben.</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Gibt an, ob ein Objekt erweitert werden kann (ob neue Eigenschaften angelegt werden können).</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Gibt an, ob ein Objekt eingefroren ist.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Gibt an, ob ein Objekt versiegelt ist.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Gibt ein Array zurück, welches die Namen aller <strong>eigenen</strong> aufzählbaren String-Eigenschaften enthält.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Verbietet das ein Objekt erweitert werden kann.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Verbietet das Eigenschaften gelöscht werden können - versiegelt das Objekt.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>Legt den Prototyp fest (z.Bsp. die interne <code>[[Prototype]]</code> Eigenschaft)</dd> + <dt>{{jsxref("Object.values()")}}</dt> + <dd>Gibt ein Array zurück, welches die Werte aller <strong>eigenen</strong> aufzählbaren String-Eigenschaften enthält.</dd> +</dl> + +<h2 id="Object_instances" name="Object_instances"><code>Object</code> Instanzen und das Prototyp-Objekt</h2> + +<p>Alle Objekte in JavaScript stammen von <code>Object</code> ab; alle Objekte bekommen die Methoden und Eigenschaften vom {{jsxref("Object.prototype")}} vererbt, jedoch können sie überschrieben werden. Zum Beispiel können Prototypen andere Kontruktoren die <code>constructor</code>-Eigenschaft überschreiben oder aber ihre eigene <code>toString()</code> Methode implementieren. Änderungen am <code>Object</code> Prototypen wirken sich auch auf alle anderen Objekte aus, es sei denn die Eigenschaften oder Methoden sind entlang der Prototyp-Kette schon überschrieben worden.</p> + +<h3 id="Properties_of_Object_instances" name="Properties_of_Object_instances">Eigenschaften</h3> + +<div>{{ page('/de/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Attribute') }}</div> + +<h3 id="Methods_of_Object_instances" name="Methods_of_Object_instances">Methoden</h3> + +<div>{{ page('/de/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methoden') }}</div> + +<h2 id="Eine_Eigenschaft_von_einem_Objekt_löschen">Eine Eigenschaft von einem Objekt löschen</h2> + +<p>Es gibt keine Methode von <code>Object</code> selbst, um eine Eigenschaft zu löschen (wie z.Bsp. <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Map/delete">Map.prototype.delete()</a></code>). Um das zu erreichen, muss der <a href="/de/docs/Web/JavaScript/Reference/Operators/delete">delete Operator</a> benutzt werden.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example.3A_Using_Object_given_undefined_and_null_types" name="Example.3A_Using_Object_given_undefined_and_null_types"><code>Object</code> mit <code>undefined</code> und <code>null</code> Typen nutzen</h3> + +<p>Die folgenden Beispiele speichern ein leeres <code>Object</code> in <code>o</code>:</p> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Object_nutzen_um_Boolean-Objekte_zu_erstellen"><code>Object</code> nutzen um <code>Boolean</code>-Objekte zu erstellen</h3> + +<p>Die folgenden Beispiele speichern {{jsxref("Boolean")}}-Objekte in <code>o</code>:</p> + +<pre class="brush: js">// das gleiche wie: var o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js">// das gleiche wie: var o = new Boolean(false); +var o = new Object(Boolean()); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.<br> + In JavaScript 1.0 implementiert</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p><code>Object.assign</code>, <code>Object.getOwnPropertySymbols</code>, <code>Object.setPrototypeOf</code> und <code>Object.is</code> hinzugefügt</p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td><code>Object.entries</code>, <code>Object.values</code> und <code>Object.getOwnPropertyDescriptors</code> hinzugefügt.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{Compat("javascript.builtins.Object")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Objekt_Initialisierer">Object initializer</a></li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/is/index.html b/files/de/web/javascript/reference/global_objects/object/is/index.html new file mode 100644 index 0000000000..348dbeebe9 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/is/index.html @@ -0,0 +1,120 @@ +--- +title: Object.is() +slug: Web/JavaScript/Reference/Global_Objects/Object/is +tags: + - ECMAScript 2015 + - Experimental + - Expérimental(2) + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/is +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Die <code><strong>Object.is()</strong></code> Methode entscheidet, ob zwei Werte <a href="/en-US/docs/Web/JavaScript/Guide/Sameness">die gleichen Werte sind</a>.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>var <var>isSame</var> = Object.is(<var>value1</var>, <var>value2</var>);</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>value1</code></dt> + <dd>Der erste Wert zum vergleichen.</dd> + <dt><code>value2</code></dt> + <dd>Der zweite Wert zum vergleichen.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><span class="short_text" id="result_box" lang="en"><span><code>Object.is()</code> bestimmt, ob zwei Werte <a href="/en-US/docs/Web/JavaScript/Guide/Sameness" title="/en-US/docs/Web/JavaScript/Guide/Sameness"><dfn>gleich sind</dfn></a>. </span></span><span class="short_text" lang="en"><span>Dabei gelten zwei Werte genau dann als gleich, wenn eine der folgenden Bedingungen zutrifft:</span></span></p> + +<ul> + <li><span class="short_text" lang="en"><span>beide sind <code>undefined</code></span></span></li> + <li><span class="short_text" lang="en"><span>beide sind <code>null</code></span></span></li> + <li><span class="short_text" lang="en"><span>beide sind <code>true</code> oder beide sind <code>false</code></span></span></li> + <li><span class="short_text" lang="en"><span>beide sind Strings mit selber Länge und den selben Zeichen</span></span></li> + <li><span class="short_text" lang="en"><span>beide sind das selbe Objekt</span></span></li> + <li><span class="short_text" lang="en"><span>beide sind Zahlen und eine der folgenden Bedingungen trifft zu:</span></span> + <ul> + <li>beide sind <code>+0</code></li> + <li>beide sind <code>-0</code></li> + <li>beide sind <code>NaN</code></li> + <li>beide sind nicht Null, beide sind nicht <code>NaN</code> und beide haben den selben Zahlenwert</li> + </ul> + </li> +</ul> + +<p>Dies ist <em>nicht</em> das selbe wie der <code>==</code>-Operator. Dieser verwendet verschiedene, situationsabhängige Typ-Umwandlungen auf beiden Seiten bevor auf Gleichheit getestet wird (was z.B. dazu führt, dass der Ausdruck <code>"" == false</code> zu <code>true</code> ausgewertet wird). <code>Object.is</code> hingegen wandelt keinen der beiden Werte um.</p> + +<p>Es ist ebenfalls nicht das selbe wie der strikte <code>===</code>-Operator. Dieser – ebenso wie der <code>==</code>-Operator – behandelt zum Beispiel <code>+0</code> und <code>-0</code> als identisch während <code>NaN</code> und <code>NaN</code> als nicht identisch behandelt werden.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">Object.is('foo', 'foo'); // true +Object.is(window, window); // true + +Object.is('foo', 'bar'); // false +Object.is([], []); // false + +var test = { a: 1 }; +Object.is(test, test); // true + +Object.is(null, null); // true + +// Special Cases +Object.is(0, -0); // false +Object.is(-0, -0); // true +Object.is(NaN, 0/0); // true +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Object.</code> ist eine vorgeschlagene Ergänzung des ECMA-262 Standard; als solcher könnte dieser nicht von allen Browser verstanden werden. Du kannst drum herum arbeiten, indem du den folgenden Code an den Anfang deines Scripts packst. Das erlaubt dir die <code>Object.is Methode</code> zu verwenden, auch wenn es keine eingebaute Unterstützung dafür gibt.</p> + +<pre><code>if (!Object.is) { + Object.is = function(x, y) { + // SameValue algorithm + if (x === y) { // Steps 1-5, 7-10 + // Steps 6.b-6.e: +0 != -0 + return x !== 0 || 1 / x === 1 / y; + } else { + // Step 6.a: NaN == NaN + return x !== x && y !== y; + } + }; +}</code></pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.is', 'Object.is')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.is")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Sameness">JavaScript Guide: Sameness</a> — ein Vergleich aller drei eingebauten Gleichheitseinrichtungen</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/isextensible/index.html b/files/de/web/javascript/reference/global_objects/object/isextensible/index.html new file mode 100644 index 0000000000..a54bb5f6c4 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/isextensible/index.html @@ -0,0 +1,153 @@ +--- +title: Object.isExtensible() +slug: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +tags: + - ECMAScript 5 + - Erweiterbarkeit + - JavaScript + - Méthode + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +--- +<div>{{JSRef}}</div> + +<p>Die Methode <strong><code>Object.isExtensible()</code></strong> bestimmt, ob ein Objekt erweiterbar ist. Das heißt, es können dem Objekt neue Eigenschaften hinzugefügt werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.isExtensible(<var>obj</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Das Objekt, das überprüft werden soll.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein {{jsxref("Boolean")}}, der angibt, ob das übergebene Objekt erweiterbar ist.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Standardmäßig sind Objekte erweiterbar: Es ist möglich, ihnen neue Eigenschaften zuzuweisen und sie dadurch zu verändern. In Engines, die {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} unterstützen, kann auch deren __proto__ Eigenschaft geändert werden. Ein Objekt kann mittels {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}} oder {{jsxref("Object.freeze()")}} explizit als nicht-erweiterbar markiert werden.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">// Neue Objekte sind erweiterbar. +var empty = {}; +Object.isExtensible(empty); // === true + +// ...aber das kann sich ändern. +Object.preventExtensions(empty); +Object.isExtensible(empty); // === false + +// Versiegelte Objekte sind per Definition nicht erweiterbar. +var sealed = Object.seal({}); +Object.isExtensible(sealed); // === false + +// Eingefrorene Objekte sind ebenfalls per Definition nicht erweiterbar. +var frozen = Object.freeze({}); +Object.isExtensible(frozen); // === false +</pre> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>In ES5 muss das Argument der Methode ein echtes Objekt sein. Ist dies nicht der Fall, wird ein {{jsxref("TypeError")}} geworfen. In ES2015 hingegen wird ein Nicht-Objekt einfach als nicht-erweiterbares Objekt behandelt, sodass von der Methode <code>false </code>zurückgegeben wird.</p> + +<pre class="brush: js">Object.isExtensible(1); +// TypeError: 1 is not an object (ES5 code) + +Object.isExtensible(1); +// false (ES2015 code) +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("6")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zusätzliches_Material">Zusätzliches Material</h2> + +<ul> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.isExtensible()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/de/web/javascript/reference/global_objects/object/isfrozen/index.html new file mode 100644 index 0000000000..fedcba2572 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/isfrozen/index.html @@ -0,0 +1,173 @@ +--- +title: Object.isFrozen() +slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.isFrozen()</strong></code> gibt an ob ein Objekt {{jsxref("Object.freeze()", "eingefroren", "", 1)}} ist.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.isFrozen(<var>obj</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Das Objekt, welches überprüft werden soll.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein {{jsxref("Boolean")}}-Wert, der angibt ob das Objekt eingefroren ist oder nicht.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Ein Objekt gilt dann und nur dann als eingefroren, wenn es nicht {{jsxref("Object.isExtensible()", "erweiterbar", "", 1)}} ist, all seine Eigenschaften nicht konfigurierbar sind und all seine Daten-Eigenschaften (d.h. Eigenschaften die nicht durch Getter oder Setter definiert sind) nicht schreibbar sind.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">// Ein neues Objekt ist erweiterbar, also nicht eingefroren. +Object.isFrozen({}); // === false + +// An leeres Objekt, das nicht erweiterbar ist, +// ist sinnlos eingefroren. +var sinnlos = Object.preventExtensions({}); +Object.isFrozen(sinnlos); // === true + +// Ein neues Objekt mit einer einzelnen Eigenschaft, ist auch erweiterbar, +// ergo nicht eingefroren. +var eineEigenschaft = { p: 42 }; +Object.isFrozen(eineEigenschaft); // === false + +// Das Objekt nicht erweiterbar zu machen, friert es nicht ein, +// da die Eigenschaft immer nocht konfigurierbar und schreibbar ist. +Object.preventExtensions(eineEigenschaft); +Object.isFrozen(eineEigenschaft); // === false + +// ...wenn man die Eigenschaft aber löscht, +// wird das Objekt sinnlos +delete eineEigenschaft.p; +Object.isFrozen(eineEigenschaft); // === true + +// Ein nicht erweiterbares Objekt, mit einer nicht schreibbaren +// jedoch konifgurierbaren Eigenschaft gilt als nicht eingefroren. +var nichtSchreibbar = { e: 'plep' }; +Object.preventExtensions(nichtSchreibbar); +Object.defineProperty(nichtSchreibbar, 'e', { + writable: false +}); // `e` wird nicht schreibbar +Object.isFrozen(nichtSchreibbar); // === false + +// Wird diese Eigenschaft nicht konfigurierbar, +// so friert das Objekt ein. +Object.defineProperty(nichtSchreibbar, 'e', { + configurable: false +}); // `e` wird nicht konfigurierbar +Object.isFrozen(nichtSchreibbar); // === true + +// Ein nicht erweiterbares Objekt, mit einer nicht konfigurierbaren +// jedoch schreibbaren Eigenschaft gilt ebenfalls als nicht eingefroren. +var nichtKonfigurierbar = { release: 'the kraken!' }; +Object.preventExtensions(nichtKonfigurierbar); +Object.defineProperty(nichtKonfigurierbar, 'release', { + configurable: false +}); +Object.isFrozen(nichtKonfigurierbar); // === false + +// Wird diese Eigenschaft nicht schreibbar, +// so friert das Objekt ein. +Object.defineProperty(nichtKonfigurierbar, 'release', { + writable: false +}); +Object.isFrozen(nichtKonfigurierbar); // === true + +// Ein nicht erweiterbares Objekt, mit einer konfigurierbaren +// dynamischen Eigenschaft (get/set) ist nicht eingefroren. +var dynamisch = { get food() { return 'yum'; } }; +Object.preventExtensions(dynamisch); +Object.isFrozen(dynamisch); // === false + +// ABER, wird diese Eigenschaft nicht konfigurierbar, +// friert das Objekt ein. +Object.defineProperty(dynamisch, 'food', { + configurable: false +}); +Object.isFrozen(dynamisch); // === true + +// Am Ende ist die einfachste Methode um ein Objekt einzufrieren, +// Object.freeze aufzurufen. +var eingefroren = { 1: 81 }; +Object.isFrozen(eingefroren); // === false +Object.freeze(eingefroren); +Object.isFrozen(eingefroren); // === true + +// Per Definition ist ein eingefrorenes Objekt nicht erweiterbar. +Object.isExtensible(eingefroren); // === false + +// Und es ist ebenfalls versiegelt. +Object.isSealed(eingefroren); // === true +</pre> + +<h2 id="Anmerkungen">Anmerkungen</h2> + +<p>In ES5, wirft die Methode einen {{jsxref("TypeError")}}, wenn der Parameter kein primitives Objekt ist.</p> + +<p>In ES2015 wird der Parameter, sollte er kein primitives Objekt sein, als bereits eingefrorenes Objekt betrachtet und gibt dementsprechend einfach <code>true</code> zurück.</p> + +<pre class="brush: js">Object.isFrozen(1); +// TypeError: 1 is not an object (ES5 code) + +Object.isFrozen(1); +// true (ES2015 code) +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. In JavaScript 1.8.5 implementiert.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.isFrozen")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/keys/index.html b/files/de/web/javascript/reference/global_objects/object/keys/index.html new file mode 100644 index 0000000000..5fda29ca15 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/keys/index.html @@ -0,0 +1,206 @@ +--- +title: Object.keys() +slug: Web/JavaScript/Reference/Global_Objects/Object/keys +tags: + - ECMAScript5 + - JavaScript + - JavaScript 1.8.5 + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys +--- +<div>{{JSRef}}</div> + +<p>Die <strong><code>Object.keys()</code></strong> Funktion gibt ein Array zurück, das die eigenen aufzählbaren Eigenschaften des Objektes in der selben Reihenfolge enthält wie in der {{jsxref("Statements/for...in", "for...in")}} Schleife (der Unterschied zwischen diesen beiden Varianten besteht darin, dass eine for-in Schleife auch die aufzählbaren Eigenschaften der Prototypen beinhaltet).</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.keys(<var>obj</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>ein Objekt, dessen aufzählbare eigene Eigenschaften zurückgegeben werden sollen</dd> +</dl> + +<h3 id="Description" name="Description">Rückgabewert</h3> + +<p>Ein Array mit Strings, die alle aufzählbare Eigenschaften des gegebenen Objektes repräsentieren.</p> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p><code>Object.keys()</code> liefert ein Array, dessen Elemente Strings sind, welche die aufzählbaren Eigenschaften des Objekts respräsentieren. Die Reihenfolge der Eigenschaften ist die selbe wie bei einer for-in Schleife über das Objekt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; +console.log(Object.keys(arr)); // console: ['0', '1', '2'] + +// array like object +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.keys(obj)); // console: ['0', '1', '2'] + +// array like object with random key ordering +var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.keys(an_obj)); // console: ['2', '7', '100'] + +// getFoo is property which isn't enumerable +var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 1; + +console.log(Object.keys(my_obj)); // console: ['foo']</pre> + +<p><span style="line-height: 1.5;">Die Liste aller eigenen aufzählbaren und nicht-aufzählbaren Eigenschaften eines Objekt erhält man mit der Funktion {{jsxref("Object.getOwnPropertyNames()")}}.</span></p> + +<h2 id="Notes" name="Notes">Notizen</h2> + +<p>In ES5 wird, wenn das Argument für die Funktion kein Objekt ist, ein {{jsxref("TypeError")}} Fehler geworfen. In ES2015 wird das Argument, welches kein Objekt ist, in ein Objekt umgewandelt, das aber nicht mehr dem eigentlichen Wert entspricht (siehe Beispiel).</p> + +<pre class="brush: js">> Object.keys("foo") +TypeError: "foo" is not an object // ES5 code + +> Object.keys("foo") +["0", "1", "2"] // ES2015 code +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Kopieren Sie das folgende Code-Schnipsel, um <code>Object.keys()</code> auch in älteren Umgebungen ohne native Unterstützung nutzen zu können:</p> + +<pre class="brush: js">// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys +if (!Object.keys) { + Object.keys = (function() { + 'use strict'; + var hasOwnProperty = Object.prototype.hasOwnProperty, + hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'), + dontEnums = [ + 'toString', + 'toLocaleString', + 'valueOf', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'constructor' + ], + dontEnumsLength = dontEnums.length; + + return function(obj) { + if (typeof obj !== 'function' && (typeof obj !== 'object' || obj === null)) { + throw new TypeError('Object.keys called on non-object'); + } + + var result = [], prop, i; + + for (prop in obj) { + if (hasOwnProperty.call(obj, prop)) { + result.push(prop); + } + } + + if (hasDontEnumBug) { + for (i = 0; i < dontEnumsLength; i++) { + if (hasOwnProperty.call(obj, dontEnums[i])) { + result.push(dontEnums[i]); + } + } + } + return result; + }; + }()); +} +</pre> + +<p>Bitte beachten Sie, dass der obenstehende Code auch die Namen der nicht-aufzählbaren Eigenschaften im IE7 (und evtl. auch im IE8) berücksichtigt, wenn ein Objekt aus einem anderen Fenster übergeben wird.</p> + +<p>Ein einfaches Polyfill finden Sie außerdem hier: <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Object.keys Browser Compatibility</a>.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommantar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.values()")}} {{experimental_inline}}</li> + <li>{{jsxref("Object.entries()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/observe/index.html b/files/de/web/javascript/reference/global_objects/object/observe/index.html new file mode 100644 index 0000000000..df68348028 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/observe/index.html @@ -0,0 +1,199 @@ +--- +title: Object.observe() +slug: Web/JavaScript/Reference/Global_Objects/Object/observe +tags: + - Beobachter + - Data-Binding + - Deprecated + - JavaScript + - Méthode + - Object + - Veraltet +translation_of: Archive/Web/JavaScript/Object.observe +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Die <strong><code>Object.observe()</code></strong> Methode kann genutzt werden, um auf Änderungen an einem Objekt asynchron zu reagieren. Sie bietet einen Stream der Änderungen in der Reihenfolge ihres Auftretens. Da die Methode veraltet ist und Beschränkungen aufweist, sollte lieber ein {{jsxref("Proxy")}} Objekt verwendet werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.observe(<var>obj</var>, <var>callback</var>[, <var>acceptList</var>])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Das Objekt, das beobachtet werden soll.</dd> + <dt><code>callback</code></dt> + <dd>Eine Callback-Funktion, die jedes mal aufgerufen wird, wenn eine Änderung am Objekt vorgenommen wird + <dl> + <dt><code>changes</code></dt> + <dd>Ein Array von Objekten, die die vorgenommenen Änderungen repräsentieren. Die Eigenschaften der Objekte sind jeweils + <ul> + <li><strong><code>name</code></strong>: Der Name der Eigenschaft, welche geändert wurde</li> + <li><strong><code>object</code></strong>: Das (bereits) geänderte Objekt.</li> + <li><strong><code>type</code></strong>: Ein String der Angibt, welcher Art die vorgenommene Änderung war. Entspricht <code>"add"</code>, <code>"update"</code>, oder <code>"delete"</code>.</li> + <li><strong><code>oldValue</code></strong>: Existiert nur, wenn der type <code>"update"</code> oder <code>"delete"</code> ist. Der ursprüngliche Wert vor der Änderung.</li> + </ul> + </dd> + </dl> + </dd> + <dt><code>acceptList</code></dt> + <dd>Eine Liste von Änderungstypen die für das gegebene Objekt und jeweilige Callback beobachtet werden sollen. Standardmäßig <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code> .</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>callback</code> wird jedes mal aufgerufen, wenn das <code>obj</code> geändert wird. Die Funktion erhält dabei die Liste aller Änderungen in chronologischer Reihenfolge ihres Auftretens.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Ausgabe_aller_sechs_Änderungsarten">Ausgabe aller sechs Änderungsarten</h3> + +<pre class="brush: js">var obj = { + foo: 0, + bar: 1 +}; + +Object.observe(obj, function(changes) { + console.log(changes); +}); + +obj.baz = 2; +// [{name: 'baz', object: <obj>, type: 'add'}] + +obj.foo = 'hello'; +// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}] + +delete obj.baz; +// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}] + +Object.defineProperty(obj, 'foo', {writable: false}); +// [{name: 'foo', object: <obj>, type: 'reconfigure'}] + +Object.setPrototypeOf(obj, {}); +// [{name: '__proto__', object: <obj>, type: 'setPrototype', oldValue: <prototype>}] + +Object.seal(obj); +// [ +// {name: 'foo', object: <obj>, type: 'reconfigure'}, +// {name: 'bar', object: <obj>, type: 'reconfigure'}, +// {object: <obj>, type: 'preventExtensions'} +// ] +</pre> + +<h3 id="Data_Binding">Data Binding</h3> + +<pre class="brush: js">// A user model +var user = { + id: 0, + name: 'Brendan Eich', + title: 'Mr.' +}; + +// Create a greeting for the user +function updateGreeting() { + user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!'; +} +updateGreeting(); + +Object.observe(user, function(changes) { + changes.forEach(function(change) { + // Any time name or title change, update the greeting + if (change.name === 'name' || change.name === 'title') { + updateGreeting(); + } + }); +}); +</pre> + +<h3 id="Eigens_definierter_Änderungstyp">Eigens definierter Änderungstyp</h3> + +<pre class="brush: js">// A point on a 2D plane +var point = {x: 0, y: 0, distance: 0}; + +function setPosition(pt, x, y) { + // Performing a custom change + Object.getNotifier(pt).performChange('reposition', function() { + var oldDistance = pt.distance; + pt.x = x; + pt.y = y; + pt.distance = Math.sqrt(x * x + y * y); + return {oldDistance: oldDistance}; + }); +} + +Object.observe(point, function(changes) { + console.log('Distance change: ' + (point.distance - changes[0].oldDistance)); +}, ['reposition']); + +setPosition(point, 3, 4); +// Distance change: 5 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal for ECMAScript 7</a>.</p> + +<h2 id="Browserunterstützung">Browserunterstützung</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: See {{bug(800355)}}</p> + +<p>[2]: See relevant <a href="https://dev.modern.ie/platform/status/objectobserve/">MS Edge platform status entry</a></p> + +<h2 id="Siehe_Auch">Siehe Auch</h2> + +<ul> + <li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/proto/index.html b/files/de/web/javascript/reference/global_objects/object/proto/index.html new file mode 100644 index 0000000000..6c085634e7 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/proto/index.html @@ -0,0 +1,196 @@ +--- +title: Object.prototype.__proto__ +slug: Web/JavaScript/Reference/Global_Objects/Object/proto +translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto +--- +<div class="warning"> +<p><strong>Achtung:</strong> Das Ändern des <code>[[Prototype]]</code> von einem Objekt, in der Art wie moderne JavaScript Engines den Zugriff auf Eigenschaften optimieren, ist eine sehr langsame Operation - in <strong><em>jedem</em></strong> Browser und JavaScript-Engine. Die Auswirkungen auf die Perfomance der veränderten Vererbung sind subtil und weit verstreut und sind nicht einfach auf die Zeit des Zugriffs von <code>obj.__proto__ = ...</code> Ausdruck limitiert, sondern können sich auf jeden Code erstrecken, der Zugriff auf ein Objekt hat, dessen <code>[[Prototype]]</code> geändert wurde. Wenn du dir um die Perfomance sorgen machst, dann solltest du das Setzen des <code>[[Prototype]]</code> auf ein Objekt vermeiden. Stattdessen kannst du ein neues Objekt mit dem gewünschten <code>[[Prototype]]</code> mit {{jsxref("Object.create()")}} erstellen.</p> +</div> + +<div class="warning"> +<p><strong>Achtung:</strong> Während <code>Object.prototype.__proto__</code> von den meisten Browsern unterstützt wird, ist seine Existenz und exaktes Verhalten nur in der ECMAScript 2015 Spezifikation als Vermächtnis-Funktion standardisiert, um die Kompatibilität für Web-Browser zu gewährleisten. Für bessere Unterstützung wird stattdessen empfohlen {{jsxref("Object.getPrototypeOf()")}} zu nutzen.</p> +</div> + +<div>{{JSRef}}</div> + +<p>Die <code>__proto__</code> Eigenschaft von {{jsxref("Object.prototype")}} ist eine Zugriffs-Eigenschaft (ein Erhalten- und Setzen-Funktion), welche den internen <code>[[Prototype]]</code> (entweder ein Objekt oder {{jsxref("Global_Objects/null", "null")}}) des Objektes, auf das zugegriffen wird, freilegt.</p> + +<p>Die Nutzung von <code>__proto__</code> ist umstritten und wird nicht mehr empfohlen. Es war niemals ein Originalteil<em> </em>in der EcmaScript Sprach-Spezifikation, doch haben moderne Browser entschieden es trotzdem zu implementieren. Erst vor kurzem wurde die <code>__proto__</code> Eigenschaft als Standard in die ECMAScript 2015 Sprach-Spezifikation aufgenommen, um die Kompatibiliät von modernen Web-Browsern sicherzustellen, sodass es in der Zukunft unterstützt wird. Es ist veraltet zu Gunsten von {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} und {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}} (obgleich das Setzen des <code>[[Prototype]]</code> eines Objektes immer noch eine langsame Operation ist und daher vermieden werden sollte, wenn Performance eine Rolle spielt).</p> + +<p>Die <code>__proto__</code> Eigenschaft kann auch in einer Objekt-Literal-Definition verwendet werden, um das Objekt [[Prototyp]] bei der Erstellen zu setzen - als Alternative zu {{jsxref("Object.create()")}}. See: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">var Circle = function () {}; +var shape = {}; +var circle = new Circle(); + +// Setzt den Objekt Prototypen. +// DEPRECATED. Dies ist nur eine beispielhafte Verwendung und sollte NICHT in produktivem Code verwendet werden. +shape.__proto__ = circle; + +// Liefert den Objekt Prototypen zurück +console.log(shape.__proto__ === circle); // true +</pre> + +<pre class="brush: js">var shape = function () { +}; +var p = { + a: function () { + console.log('aaa'); + } +}; +shape.prototype.__proto__ = p; + +var circle = new shape(); + +circle.a();//aaa + +console.log(shape.prototype === circle.__proto__);//true + +//oder + +var shape = function () { +}; +var p = { + a: function () { + console.log('a'); + } +}; + +var circle = new shape(); +circle.__proto__ = p; + + +circle.a(); // a + +console.log(shape.prototype === circle.__proto__);//false + +//oder + +function test() { +} +test.prototype.myname = function () { + console.log('myname'); + +} +var a = new test() + +console.log(a.__proto__ === test.prototype);//true + +a.myname();//myname + + +//oder + +var fn = function () { +}; +fn.prototype.myname = function () { + console.log('myname'); +} + +var obj = { + __proto__: fn.prototype +}; + + +obj.myname();//myname +</pre> + +<p>Anmerkung: das sind zwei Unterstriche, gefolgt von den fünf Zeichen "Proto", gefolgt von zwei weiteren Unterstrichen.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>The <code>__proto__</code> getter function exposes the value of the internal <code>[[Prototype]]</code> of an object. For objects created using an object literal, this value is {{jsxref("Object.prototype")}}. For objects created using array literals, this value is {{jsxref("Array.prototype")}}. For functions, this value is {{jsxref("Function.prototype")}}. For objects created using <code>new fun</code>, where <code>fun</code> is one of the built-in constructor functions provided by JavaScript ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, and so on — including new constructors added as JavaScript evolves), this value is always <code>fun.prototype</code>. For objects created using <code>new fun</code>, where <code>fun</code> is a function defined in a script, this value is the value of <code>fun.prototype</code>. (That is, if the constructor didn't return an other object explicitly, or the <code>fun.prototype</code> has been reassigned since the instance was created).</p> + +<p>The <code>__proto__</code> setter allows the <code>[[Prototype]]</code> of an object to be mutated. The object must be extensible according to {{jsxref("Object.isExtensible()")}}: if it is not, a {{jsxref("Global_Objects/TypeError", "TypeError")}} is thrown. The value provided must be an object or {{jsxref("Global_Objects/null", "null")}}. Providing any other value will do nothing.</p> + +<p>To understand how prototypes are used for inheritance, see guide article <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a>.</p> + +<p>The <code>__proto__</code> property is a simple accessor property on {{jsxref("Object.prototype")}} consisting of a getter and setter function. A property access for <code>__proto__</code> that eventually consults {{jsxref("Object.prototype")}} will find this property, but an access that does not consult {{jsxref("Object.prototype")}} will not find it. If some other <code>__proto__</code> property is found before {{jsxref("Object.prototype")}} is consulted, that property will hide the one found on {{jsxref("Object.prototype")}}.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Kompatibiliäts_Notizen">Kompatibiliäts Notizen</h2> + +<p>Während die ECMAScript 2015-Spezifikation vorschreibt, dass die Unterstützung für <code>__proto__</code> nur für Webbrowser erforderlich ist (obwohl sie bestimmend sind), können andere Umgebungen sie auch für den Gebrauch von Benutzern unterstützen</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/prototype/index.html b/files/de/web/javascript/reference/global_objects/object/prototype/index.html new file mode 100644 index 0000000000..71a504f6dd --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/prototype/index.html @@ -0,0 +1,219 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p>Das <code><strong>Object.prototype</strong></code> Attribut repräsentiert das Prototype Objekt von {{jsxref("Object")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Alle Objekte in JavaScript stammen von {{jsxref("Object")}}; alle Objekte erben Methoden und Attribute von <code>Object.prototype</code>, wobei diese überschrieben werden können (mit Ausnahme von Objekten mit einem <code>null-</code>Prototyp, sprich <code>Object.create(null)</code>). Die Prototypen anderer Konstruktoren zum Beispiel, überschreiben das <code>constructor</code> Attribut und stellen ihre eigenen Methoden zur Verfügung {{jsxref("Object.prototype.toString()", "toString()")}}. Änderungen am <code>Object</code> prototype Objekt werden an alle Objekte weitergeleitet, solange die betroffenen Attribute und Methoden nicht zuvor in der Kette der Prototypen überschrieben wurden.</p> + +<h2 id="Attribute">Attribute</h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>Die Funktion, die den Prototypen eines Objekts erstellt.</dd> + <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt> + <dd>Zeigt auf das Objekt, das als bei der Initialisierung des Objektes als Prototyp diente.</dd> + <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> + <dd>Erlaubt das Erstellen einer Funktion, die dann ausgeführt wird, wenn ein undefiniertes Objekt als Methode aufgerufen wird.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Wurde benutzt um die Anzahl der aufzählbaren Attribute direkt durch das Objekt zurückzugeben; mittlerweile entfernt.</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Wurde benutzt um auf den Kontext eines Objektes zu verweisen; mittlerweile entfernt.</s></dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Verknüpft eine Funktion mit einem Attribut, das, wenn darauf zugegriffen wird eine Funktion ausführt und deren Rückgabewert zurück gibt.</dd> + <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Verknüpft eine Funktion mit einem Attribut, das, wenn dieses gesetzt werden soll, eine Funktion ausführt, die das Attribut modifiziert.</dd> + <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Gibt die Funktion zurück, die mit dem spezifizierten Attribut über die Methode {{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} verknüpft ist.</dd> + <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Gibt die Funktion zurück, die mit dem spezifizierten Attribut über die Methode {{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} verknüpft ist.</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>Gibt einen Boolean Wert zurück, der anzeigt, ob ein Attribut ein direktes Attribut dieses Objekts ist, oder über Vererbung durch einen Prototypen hinzugefügt wurde.</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>Gibt einen Boolean Wert zurück, der anzeigt, ob das spezifizierte Objekt in der Prototyp-Kette des Objekts, das diese Funktion aufruft, enthalten ist.</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>Gibt einen Boolean Wert zurück, der anzeigt, ob das interne <a href="/en-US/docs/Web/JavaScript/Data_structures#Properties">ECMAScript [[Enumerable]] attribute</a> gesetzt ist.</dd> + <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Liefert einen String zurück, der die Quelle eines Objekt-Literals enthält, und das Objekt darstellt, das diese Funktion aufruft; man kann diesen Wert benutzen, um ein neues Objekt zu erstellen.</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>Ruft {{jsxref("Object.toString", "toString()")}} auf.</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>Gibt eine String-Darstellung des Objekts zurück.</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> + <dd>Entfernt einen Kontrollpunkt von einem Attribut des Objekts.</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>Gibt den primitiven Wert des spezifizierten Objekts zurück.</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> + <dd>Fügt einem Attribut des Objekts einen Kontrollpunkt hinzu.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> + <dd>Wurde genutzt, um einen String bestehend aus JavaScript Code, im Kontext des aktuellen Objekts auszuwerten; wurde entfernt;</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Weil JavaScript keine klassischen Sub-Klassen-Funktionalität hat, sind Prototypen ein guter Weg, um "Base Class" Objekte mit bestimmten Funktionen zu erstellen, die als Objekte fungieren. Zum Beispiel:</p> + +<pre class="brush: js">var Person = function() { + this.canTalk = true; +}; + +Person.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name); + } +}; + +var Employee = function(name, title) { + Person.call(this); + this.name = name; + this.title = title; +}; + +Employee.prototype = Object.create(Person.prototype); +Employee.prototype.constructor = Employee; + +Employee.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name + ', the ' + this.title); + } +}; + +var Customer = function(name) { + Person.call(this); + this.name = name; +}; + +Customer.prototype = Object.create(Person.prototype); +Customer.prototype.constructor = Customer; + +var Mime = function(name) { + Person.call(this); + this.name = name; + this.canTalk = false; +}; + +Mime.prototype = Object.create(Person.prototype); +Mime.prototype.constructor = Mime; + +var bob = new Employee('Bob', 'Builder'); +var joe = new Customer('Joe'); +var rg = new Employee('Red Green', 'Handyman'); +var mike = new Customer('Mike'); +var mime = new Mime('Mime'); + +bob.greet(); +// Hi, I am Bob, the Builder + +joe.greet(); +// Hi, I am Joe + +rg.greet(); +// Hi, I am Red Green, the Handyman + +mike.greet(); +// Hi, I am Mike + +mime.greet(); +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/tosource/index.html b/files/de/web/javascript/reference/global_objects/object/tosource/index.html new file mode 100644 index 0000000000..d7c7bcf93a --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/tosource/index.html @@ -0,0 +1,169 @@ +--- +title: Object.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Object/toSource +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Die <strong><code>toSource()</code></strong> Methode liefert einen String der den Quellcode des Objekts representiert.</p> + +<pre class="syntaxbox"><code>Object.toSource(); +<var>obj</var>.toSource(); +</code></pre> + +<h3 id="Zurückgelieferter_Wert">Zurückgelieferter Wert</h3> + +<p>Ein String der den Quellcode des Objekts representiert.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>toSource()</code> Methode liefer die folgenden Werte:</p> + +<p>Für das eingebaute {{jsxref("Object")}} Objekt, <code>liefert toSource() den folgenden String, welcher angibt, dass der Quellcode nicht verfügbar ist.</code></p> + +<ul> + <li> + <pre class="brush: js">function Object() { + [native code] +} +</pre> + </li> + <li>Für instanzen von {{jsxref("Object")}}, liefert <code>toSource()</code> einen String der den Sourcecode representiert.</li> +</ul> + +<p><code>toSource()</code> kann während der Entwicklung aufgerufen werden um die Inhalte eines Objekts zu inspizieren.</p> + +<h3 id="Überschreiben_der_toSource()_Methode">Überschreiben der toSource() Methode</h3> + +<p>Es ist sicher die toSource() Methode zu überschreiben. Zum Beispiel:</p> + +<pre class="brush: js">function Person(name) { + this.name = name; +} + +Person.prototype.toSource = function Person_toSource() { + return 'new Person(' + uneval(this.name) + ')'; +}; + +console.log(new Person('Joe').toSource()); // ---> new Person("Joe") +</pre> + +<h3 id="Eingebaute_toSource()_Methoden">Eingebaute toSource() Methoden</h3> + +<p>Jeder Kern-JavaScript Typ hat seine eigene t<code>oSource()</code> Methode. Diese sind:</p> + +<ul> + <li>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Array")}} Objekt.</li> + <li>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Boolean")}} Objekt.</li> + <li>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Date")}} Objekt.</li> + <li>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Function")}} Objekt.</li> + <li>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Number")}} Objekt.</li> + <li>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("RegExp")}} Objekt.</li> + <li>{{jsxref("SIMD.toSource()", "SIMD.%type%.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("SIMD")}} Objekt.</li> + <li>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("String")}} Objekt.</li> + <li>{{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Symbol")}} Objekt.</li> + <li><code>Math.toSource()</code> — Liefert den String "Math".</li> +</ul> + +<h3 id="Limits_bei_zyklischen_Objekten">Limits bei zyklischen Objekten</h3> + +<p>Im Falle, dass Objekte auf sich selbst referenzieren, z.B.: eine zyklisch verbundene Liste oder ein Baum der beide wege durchquert, erstellt <code>toSource()</code> nicht eine neue Selbst-Referenz. Dies passiert seit Firefox 24. Zum Beispiel:</p> + +<pre class="brush: js">var obj1 = {}; +var obj2 = { a: obj1 }; +obj1.b = obj2; + +console.log('Cyclical: ' + (obj1.b.a == obj1)); + +var objSource = obj1.toSource(); // returns "({b:{a:{}}})" + +obj1 = eval(objSource); + +console.log('Cyclical: ' + (obj1.b.a == obj1)); +</pre> + +<p>Wenn eine zyklische Struktur existiert und <code>toSource()</code> benötigt wird, muss das Objekt eine überschriebene toSource() Methode besitzen. Entweder durch benützen einer Referenz zum Construktor oder einer anonymen Funktion.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Benutzen_von_toSource()"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif">Benutzen von </font>toSource()</code></h3> + +<p>Der folgende Code defniert den "Dog" Objekt Typ und kreiert "theDog", welches ein Objekt des Typs "Dog" ist:</p> + +<pre class="brush: js">function Dog(name, breed, color, sex) { + this.name = name; + this.breed = breed; + this.color = color; + this.sex = sex; +} + +theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female'); +</pre> + +<p>Durch aufrufen der <code>toSource()</code> Methode von "<code>theDog"</code> liefert die JavaScript Quelle, welche das Objekt definiert.</p> + +<pre class="brush: js">theDog.toSource(); +// returns ({name:"Gabby", breed:"Lab", color:"chocolate", sex:"female"}) +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Kein Teil eines Standards. Implementiert seit JavaScript 1.3.</p> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/valueof/index.html b/files/de/web/javascript/reference/global_objects/object/valueof/index.html new file mode 100644 index 0000000000..1b3d561756 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/valueof/index.html @@ -0,0 +1,115 @@ +--- +title: Object.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/valueOf +tags: + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf +--- +<div>{{JSRef}}</div> + +<p>Die <code><strong>valueOf()</strong></code> Methode liefert den primitiven Wert des spezifizierten Objekts zurück.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}</div> + +<p class="hidden">Der source code für dieses interaktive Beispiel ist in einem GitHub repository verfügbar. Wenn Sie sich an dem Projekt für interaktive Beispiele beteiligen möchten, dann rufen Sie bitte eine Kopie des Repositories via git clone ab: <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden uns einen pull request.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>object</var>.valueOf()</code></pre> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Der primitive Wert des spezifizierten Objekts.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>JavaScript ruft die <code>valueOf</code> Methode auf, um das Objekt zu einem primitiven Wert zu konvertieren. Nur in seltenen Fällen ist es nötig, selbst die <code>valueOf</code> Methode aufzurufen; JavaScript tut dies automatisch dann, wenn es ein Objekt vorfindet und ein primitiver Wert erforderlich ist.</p> + +<p>Standardmäßig erbt jedes Objekt die <code>valueOf</code> Methode von {{jsxref("Object")}}. Jedes built-in core object überschreibt zudem diese Methode, um jeweils den geeigneten Wert zu liefern. Falls ein Objekt keinen primitiven Wert haben sollte, liefert <code>valueOf</code> das Objekt selbst zurück.</p> + +<p>Die Methode <code>valueOf</code> kann in eigenem Code verwendet werden, um etwa ein built-in object in seinen primitiven Wert zu wandeln. Bei der Implementierung eines eigenen Objekttyps sollte die Methode <code>Object.prototype.valueOf()</code> entsprechend überschrieben werden, anstelle der standardmäßig durch {{jsxref("Object")}} bereitgestellten Methode.</p> + +<h3 id="Überschreiben_von_valueOf_für_eigene_Objekttypen">Überschreiben von <code>valueOf</code> für eigene Objekttypen</h3> + +<p>Es ist möglich eine function zu implementieren, welche anstelle der standardmäßig bereit gestellten <code>valueOf</code> Methode aufgerufen wird. Diese empfängt und benötigt keine Argumente.</p> + +<p>Angenommen, in einem Projekt gibt es den Objekttyp <code>MyNumberType</code> und für diesen soll nun eine passende <code>valueOf</code> Methode implementiert werden. Der folgende Code zeigt wie mit einer function die <code>valueOf</code> Methode des Typs implementiert wird:</p> + +<pre class="brush: js">MyNumberType.prototype.valueOf = function() { return customPrimitiveValue; };</pre> + +<p>Mit Hilfe dieses Codes wird JavaScript automatisch diese Funktion aufrufen, sobald ein Objekt des Typs <code>MyNumberType</code> in einem Kontext steht, wo es als primitiver Wert benötigt wird.</p> + +<p>Die Methode <code>valueOf</code> eines Objekts wird üblicherweise nur von JavaScript selbst aufgerufen, kann aber ebenso wie folgt jederzeit aufgerufen werden:</p> + +<pre class="brush: js">myNumberType.valueOf()</pre> + +<div class="note"> +<p><strong>Wichtig:</strong> Objekte in String-Kontexten werden über die Methode {{jsxref("Object.toString", "toString()")}} zu String umgewandelt, was etwas anderes ist als ein {{jsxref("String")}} Objekt welches über <code>valueOf</code> zum string primitive konvertiert wird. Alle Objekte haben eine Möglichkeit, zu einem String konvertiert zu werden, selbst wenn dies lediglich resultiert in "<code>[object <em>type</em>]</code>". Die meisten Objekte hingegen können nicht gewandelt werden zu number, boolean, oder function.</p> +</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Verwendung_von_valueOf">Verwendung von <code>valueOf</code></h3> + +<pre class="brush: js">function MyNumberType(n) { + this.number = n; +} + +MyNumberType.prototype.valueOf = function() { + return this.number; +}; + +var myObj = new MyNumberType(4); +myObj + 3; // 7 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Hinweise</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.valueOf")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("Symbol.toPrimitive")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/values/index.html b/files/de/web/javascript/reference/global_objects/object/values/index.html new file mode 100644 index 0000000000..f3a66e5714 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/values/index.html @@ -0,0 +1,148 @@ +--- +title: Object.values() +slug: Web/JavaScript/Reference/Global_Objects/Object/values +translation_of: Web/JavaScript/Reference/Global_Objects/Object/values +--- +<div>{{JSRef}}</div> + +<p style="margin-bottom: 0cm; line-height: 100%;">Die Methode <code><strong>Object.values()</strong></code> gibt ein Array mit den Eigenschaftswerten eines gegebenen Objekts in der selben Reihenfolge wie eine {{jsxref("Statements/for...in", "for...in")}}-Schleife sie geben würde zurück (Der Unterschied ist dabei, dass eine for-in Schleife zusätzlich die Eigenschaften der Protoype-Kette aufzählt).</p> + +<p style="margin-bottom: 0cm; line-height: 100%;"> </p> + +<div>{{EmbedInteractiveExample("pages/js/object-values.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Object.values(<var>obj</var>)</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Ein Objekt, dessen Eigenschaftswerte zurück gegeben werden sollen.</dd> +</dl> + +<h3 id="Rückgabewert">Rückgabewert</h3> + +<p>Ein Array, welches die Eigenschaftswerte eines gegebenen Objekts enthält.</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><code>Object.values()</code> gibt ein Array zurück, dessen Elemente mit den Werten der Eigenschaften eines gegebenen Objekts übereinstimmen. Die Reihenfolge der Eigenschaften ist die selbe, wie sie sich bei einem manuellen Durchlauf über die Eigenschaften ergeben würde.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: js">var obj = { foo: 'bar', baz: 42 }; +console.log(Object.values(obj)); // ['bar', 42] + +// Array-ähnliches Objekt +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.values(obj)); // ['a', 'b', 'c'] + +// Array-ähnliches Objekt mit zufälliger Sortierung der Eigenschaften +var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.values(an_obj)); // ['b', 'c', 'a'] + +// getFoo ist eine nicht aufzählbare Eigenschaft +var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 'bar'; +console.log(Object.values(my_obj)); // ['bar'] + +// non-object argument will be coerced to an object +console.log(Object.values('foo')); // ['f', 'o', 'o'] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Um <code>Object.values</code> auch in älteren Umgebungen zu nutzen, die diese Methode nicht nativ unterstützen, können Sie ein Polyfill im <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> oder im <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a> Repository finden.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Erste Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td> + <td>{{Spec2('ES8')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(54)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(47)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari(10.1)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(54)}}</td> + <td>{{CompatChrome(54)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(47)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari(10.3)}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<p>Siehe auch</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.entries()")}} {{experimental_inline}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> +</ul> |