aboutsummaryrefslogtreecommitdiff
path: root/files/zh-tw/web/javascript/reference/functions/set/index.html
diff options
context:
space:
mode:
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.html138
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>