1 files changed, 170 insertions, 0 deletions
diff --git a/files/zh-tw/web/javascript/reference/functions/get/index.html b/files/zh-tw/web/javascript/reference/functions/get/index.html
new file mode 100644
index 0000000000..c01f8164ca
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/functions/get/index.html
@@ -0,0 +1,170 @@
+---
+title: getter
+slug: Web/JavaScript/Reference/Functions/get
+translation_of: Web/JavaScript/Reference/Functions/get
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong><code>get</code></strong> 語法會將物件屬性，綁定到屬性被檢索時，所呼叫的函式。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">{get <em>prop</em>() { ... } }
+{get <em>[expression]</em>() { ... } }</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>要綁定到給定函式的名稱。</dd>
+ <dt>expression</dt>
+ <dd>自 ECMAScript 2015 開始，可以用計算屬性名稱（computed property name），綁定到給定函式。</dd>
+</dl>
+
+<h2 id="敘述">敘述</h2>
+
+<p>有時候，物件的屬性可能需要回傳動態數值、或要在不使用明確的方法呼叫下，反映出內部變數的狀態。在 JavaScript 可以用 <em>getter</em> 達到這個目的。儘管可以用 getter 與 setter 的關聯建立虛擬屬性的類型，但 getter 無法被綁定到同時擁有實際數值的屬性。</p>
+
+<p>使用 <code>get</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>get</code> 的 object literal、或相同屬性入口（data entry）的 data 形式出現（不能使用 <code>{ get x() { }, get x() { } }</code> and <code>{ x: ..., get x() { } }</code>）。</li>
+</ul>
+</div>
+
+<p>getter 可以用 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 操作符移除。</p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="在物件初始器（object_initializers）內定義新物件的_getter">在物件初始器（object initializers）內定義新物件的 getter</h3>
+
+<p>這程式碼將給 <code>obj</code> 物件建立虛擬屬性 <code>latest</code>，它會回傳 <code>log</code> 陣列的最後一個單元。</p>
+
+<pre class="brush: js">var obj = {
+  log: ['example','test'],
+  get latest() {
+    if (this.log.length == 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "test".
+</pre>
+
+<p>請注意 <code>latest</code> 不會因為數值被指派而改變。</p>
+
+<h3 id="使用_delete_操作符移除_getter">使用 <code>delete</code> 操作符移除 getter</h3>
+
+<p>如果想移除 getter，可以使用 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 完成之：</p>
+
+<pre class="brush: js">delete obj.latest;
+</pre>
+
+<h3 id="使用_defineProperty_給現有物件定義_getter">使用 <code>defineProperty</code> 給現有物件定義 getter</h3>
+
+<p>若想在任何時候給現有物件添增 getter，請使用 {{jsxref("Object.defineProperty()")}}。</p>
+
+<pre class="brush: js">var o = {a: 0};
+
+Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
+
+console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)</pre>
+
+<h3 id="使用計算屬性名">使用計算屬性名</h3>
+
+<pre class="brush: js">var expr = 'foo';
+
+var obj = {
+  get [expr]() { return 'bar'; }
+};
+
+console.log(obj.foo); // "bar"</pre>
+
+<h3 id="Smart_self-overwriting_lazy_getters">Smart / self-overwriting / lazy getters</h3>
+
+<p>Getter 提供了定義物件屬性的方法，但它本身並不會去自動計算，直到想訪問它。除非需要用 getter，否則數值計算會被延緩；如果不需要用到 getter，那就永遠無須支付計算的開銷。</p>
+
+<p>針對屬性值 lazy 或 delay、並暫存以留作未來訪問的最佳化技巧稱作 <strong>smart 或 <a href="https://en.wikipedia.org/wiki/Memoization">memoized</a> getter</strong>：初次計算時會呼叫 getter、接著被暫存以便在不重算的情況下做後續訪問。這種技巧在以下情況會派上用場：</p>
+
+<ul>
+ <li>如果數值開銷很昂貴（例如需要大量 RAM 或 CPU 時間、產生 worker 執行緒、檢索遠端文件等）</li>
+ <li>如果現在並不需要數值：可能是現在用不到、或在某些情況下完全用不到。</li>
+ <li>如果使用的話，該數值會被訪問數次、且該數值永遠不會更改、或不應該更改。</li>
+</ul>
+
+<p>也就是說，出於 getter 不會重新計算的理由，不要針對數值預期會改變的屬性，使用 lazy getter。</p>
+
+<p>下例的物件擁有作為自己的屬性的 getter。在取得該屬性後，它會從物件被移除、並以隱式數值屬性重新增加、最後回傳之。</p>
+
+<pre class="brush: js">get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById('bookmarked-notification-anchor');
+},</pre>
+
+<p>針對 Firefox 程式碼，另請參見定義 <code><a href="/zh-TW/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code> 函式的 XPCOMUtils.jsm 程式模塊。</p>
+
+<h3 id="get_與_defineProperty"><code>get</code> 與 <code>defineProperty</code></h3>
+
+<p>在使用 {{jsxref("classes")}} 時，儘管 <code>get</code> 關鍵字與 {{jsxref("Object.defineProperty()")}} 會出現相同結果，但其中有微妙的差異。</p>
+
+<p>在使用 <code>get</code> 時，屬性會在物件的原型被定義；而在使用 {{jsxref("Object.defineProperty()")}} 時，屬性會在被套用的實例內定義。</p>
+
+<pre class="brush: js">class Example {
+  get hello() {
+    return 'world';
+  }
+}
+
+const obj = new Example();
+console.log(obj.hello);
+// "world"
+console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
+// undefined
+console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'hello'));
+// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }</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('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</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.get")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/set">setter</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">定義 Getter 與 Setter</a></li>
+</ul>