diff options
Diffstat (limited to 'files/zh-tw/web/javascript/reference/functions/set/index.html')
-rw-r--r-- | files/zh-tw/web/javascript/reference/functions/set/index.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/files/zh-tw/web/javascript/reference/functions/set/index.html b/files/zh-tw/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..171d366eb9 --- /dev/null +++ b/files/zh-tw/web/javascript/reference/functions/set/index.html @@ -0,0 +1,138 @@ +--- +title: setter +slug: Web/JavaScript/Reference/Functions/set +translation_of: Web/JavaScript/Reference/Functions/set +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong><code>set</code></strong> 語法會在物件屬性被嘗試定義時,將其屬性綁定到要呼叫的函式內。</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</div> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . . }} +{set [expression](<em>val</em>) { . . . }}</pre> + +<h3 id="參數">參數</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>要綁定到給定函式的屬性名。</dd> + <dt><code>val</code></dt> + <dd>變數別名,該變數擁有要被嘗試安插到 <code>prop</code> 的數值。</dd> + <dt>expression</dt> + <dd>從 ECMAScript 2015 開始,可以使用計算屬性名(computed property name)表達式,綁定到給定函式。</dd> +</dl> + +<h2 id="描述">描述</h2> + +<p>JavaScript 的 setter 能在嘗試修改指定屬性時,執行給定函式。Setter 最常用於和 getter 一同建立虛擬屬性(pseudo-property)。你不可能給同一個屬性賦予 setter 與實際值。</p> + +<p>使用 <code>set</code> 語法時,請注意以下情況:</p> + +<div> +<ul> + <li>可以擁有一個以數字或字串為代表的標示符;</li> + <li>最少要有一個參數(請參見 <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> 的詳細資料);</li> + <li>不能以有另一個 <code>set</code> 的 object literal、或相同屬性入口(data entry)的 data 形式出現(不能使用 <code>{ set x(v) { }, set x(v) { } }</code> and <code>{ x: ..., set x(v) { } }</code>)</li> +</ul> +</div> + +<p><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/delete" title="zh-TW/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a> 操作符可移除 setter。</p> + +<h2 id="示例">示例</h2> + +<h3 id="在物件初始器的新物件定義_setter">在物件初始器的新物件定義 setter</h3> + +<p>這裡會給物件 <code>language</code> 定義稱為 <code>current</code> 的虛擬屬性。在指派數值時 <code>log</code> 會和該值一同更新:</p> + +<pre class="brush: js">var language = { + set current(name) { + this.log.push(name); + }, + log: [] +} + +language.current = 'EN'; +console.log(language.log); // ['EN'] + +language.current = 'FA'; +console.log(language.log); // ['EN', 'FA'] +</pre> + +<p>請注意 <code>current</code> is not defined and any attempts to access it will result in <code>undefined</code>.</p> + +<h3 id="使用_delete_操作符移除_setter">使用 <code>delete</code> 操作符移除 setter</h3> + +<p>若想移除 setter 的話,可以直接使用 <code><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>:</p> + +<pre class="brush: js">delete o.current; +</pre> + +<h3 id="針對已存在屬性的_setter_使用_defineProperty">針對已存在屬性的 setter 使用 <code>defineProperty</code></h3> + +<p>To append a setter to an existing object later at any time, use {{jsxref("Object.defineProperty()")}}.</p> + +<pre class="brush: js">var o = {a: 0}; + +Object.defineProperty(o, 'b', { set: function(x) { this.a = x / 2; } }); + +o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property +console.log(o.a) // 5</pre> + +<h3 id="使用計算屬性名">使用計算屬性名</h3> + +<pre class="brush: js">var expr = 'foo'; + +var obj = { + baz: 'bar', + set [expr](v) { this.baz = v; } +}; + +console.log(obj.baz); // "bar" +obj.foo = 'baz'; // 跑 setter +console.log(obj.baz); // "baz" +</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>初始定義。</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>增加計算屬性名。</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{Compat("javascript.functions.set")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/get">getter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li>JavaScript 教學的<a href="/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">定義 Getters 與 Setters</a></li> +</ul> |