aboutsummaryrefslogtreecommitdiff
path: root/files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html')
-rw-r--r--files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html391
1 files changed, 391 insertions, 0 deletions
diff --git a/files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html
new file mode 100644
index 0000000000..ae72df74e5
--- /dev/null
+++ b/files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html
@@ -0,0 +1,391 @@
+---
+title: Object.defineProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+---
+<div>{{JSRef}}</div>
+
+<p>The <code><strong>Object.defineProperty()</strong></code> method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.</p>
+
+<p id="Syntax">Syntax</p>
+
+<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>The object on which to define the property.</dd>
+ <dt><code>prop</code></dt>
+ <dd>The name of the property to be defined or modified.</dd>
+ <dt><code>descriptor</code></dt>
+ <dd>The descriptor for the property being defined or modified.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>This method allows precise addition to or modification of a property on an object. 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. By default, values added using <code>Object.defineProperty()</code> are immutable.</p>
+
+<p>Property descriptors present in objects come in two main flavors: data descriptors and accessor descriptors. A <em><dfn>data descriptor</dfn></em> is a property that has a value, which may or may not be writable. An <dfn>accessor descriptor</dfn> is a property described by a getter-setter pair of functions. A descriptor must be one of these two flavors; it cannot be both.</p>
+
+<p>Both data and accessor descriptors are objects. They share the following required keys:</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>A data descriptor also has the following optional keys:</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>An accessor descriptor also has the following optional keys:</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 own properties so, if inherited, will be considered too. In order to ensure these defaults are preserved you might freeze the {{jsxref("Object.prototype")}} upfront, specify all options explicitly, or point to {{jsxref("null")}} as {{jsxref("Object.prototype.__proto__", "__proto__")}} property.</p>
+
+<pre class="brush: js">// using __proto__
+var obj = {};
+Object.defineProperty(obj, 'key', {
+ __proto__: null, // no inherited properties
+ value: 'static' // not enumerable
+ // not configurable
+ // not writable
+ // as defaults
+});
+
+// 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>
+
+<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>