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
|
---
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>
|
