diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
| commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
| tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/javascript/reference/global_objects/object/create | |
| parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
| download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip | |
initial commit
Diffstat (limited to 'files/de/web/javascript/reference/global_objects/object/create')
| -rw-r--r-- | files/de/web/javascript/reference/global_objects/object/create/index.html | 268 |
1 files changed, 268 insertions, 0 deletions
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> |
