1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
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>
|
