diff options
Diffstat (limited to 'files/zh-tw/web/javascript/reference/functions')
9 files changed, 2357 insertions, 0 deletions
diff --git a/files/zh-tw/web/javascript/reference/functions/arguments/callee/index.html b/files/zh-tw/web/javascript/reference/functions/arguments/callee/index.html new file mode 100644 index 0000000000..397eb08d00 --- /dev/null +++ b/files/zh-tw/web/javascript/reference/functions/arguments/callee/index.html @@ -0,0 +1,197 @@ +--- +title: arguments.callee +slug: Web/JavaScript/Reference/Functions/arguments/callee +translation_of: Web/JavaScript/Reference/Functions/arguments/callee +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>The <strong><code>arguments.callee</code></strong> property contains the currently executing function.</p> + +<h2 id="描述">描述</h2> + +<p><code>callee</code> is a property of the <code>arguments</code> object. It can be used to refer to the currently executing function inside the function body of that function. This is useful when the name of the function is unknown, such as within a function expression with no name (also called "anonymous functions").</p> + +<div class="warning"><strong>Warning:</strong> The 5th edition of ECMAScript (ES5) forbids use of <code>arguments.callee()</code> in <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>. Avoid using <code>arguments.callee()</code> by either giving function expressions a name or use a function declaration where a function must call itself.</div> + +<h3 id="Why_was_arguments.callee_removed_from_ES5_strict_mode">Why was <code>arguments.callee</code> removed from ES5 strict mode?</h3> + +<p>(adapted from <a href="http://stackoverflow.com/a/235760/578288" title="http://stackoverflow.com/a/235760/578288">a Stack Overflow answer by olliej</a>)</p> + +<p>Early versions of JavaScript did not allow named function expressions, and for this reason you could not make a recursive function expression.</p> + +<p>For example, this syntax worked:</p> + +<pre class="brush: js">function factorial (n) { + return !(n > 1) ? 1 : factorial(n - 1) * n; +} + +[1,2,3,4,5].map(factorial);</pre> + +<p>but:</p> + +<pre class="brush: js">[1,2,3,4,5].map(function (n) { + return !(n > 1) ? 1 : /* what goes here? */ (n - 1) * n; +});</pre> + +<p>did not. To get around this <code>arguments.callee</code> was added so you could do</p> + +<pre class="brush: js">[1,2,3,4,5].map(function (n) { + return !(n > 1) ? 1 : arguments.callee(n - 1) * n; +});</pre> + +<p>However, this was actually a really bad solution as this (in conjunction with other <code>arguments</code>, <code>callee</code>, and <code>caller</code> issues) make inlining and tail recursion impossible in the general case (you can achieve it in select cases through tracing, etc., but even the best code is suboptimal due to checks that would not otherwise be necessary.) The other major issue is that the recursive call will get a different <code>this</code> value, e.g.:</p> + +<pre class="brush: js">var global = this; + +var sillyFunction = function (recursed) { + if (!recursed) { return arguments.callee(true); } + if (this !== global) { + alert("This is: " + this); + } else { + alert("This is the global"); + } +} + +sillyFunction();</pre> + +<p>ECMAScript 3 resolved these issues by allowing named function expressions. For example:</p> + +<pre class="brush: js">[1,2,3,4,5].map(function factorial (n) { + return !(n > 1) ? 1 : factorial(n-1)*n; +});</pre> + +<p>This has numerous benefits:</p> + +<ul> + <li>the function can be called like any other from inside your code</li> + <li>it does not create a variable in the outer scope (<a href="http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope">except for IE 8 and below</a>)</li> + <li>it has better performance than accessing the arguments object</li> +</ul> + +<p>Another feature that was deprecated was <code>arguments.callee.caller</code>, or more specifically <code>Function.caller</code>. Why is this? Well, at any point in time you can find the deepest caller of any function on the stack, and as I said above looking at the call stack has one single major effect: it makes a large number of optimizations impossible, or much much more difficult. For example, if you cannot guarantee that a function <code>f</code> will not call an unknown function, it is not possible to inline <code>f</code>. Basically it means that any call site that may have been trivially inlinable accumulates a large number of guards:</p> + +<pre class="brush: js">function f (a, b, c, d, e) { return a ? b * c : d * e; }</pre> + +<p>If the JavaScript interpreter cannot guarantee that all the provided arguments are numbers at the point that the call is made, it needs to either insert checks for all the arguments before the inlined code, or it cannot inline the function. Now in this particular case a smart interpreter should be able to rearrange the checks to be more optimal and not check any values that would not be used. However in many cases that's just not possible and therefore it becomes impossible to inline.</p> + +<h2 id="範例">範例</h2> + +<h3 id="Using_arguments.callee_in_an_anonymous_recursive_function">Using <code>arguments.callee</code> in an anonymous recursive function</h3> + +<p>A recursive function must be able to refer to itself. Typically, a function refers to itself by its name. However, an anonymous function (which can be created by a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function" title="JavaScript/Reference/Operators/Special/function">function expression</a> or the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="JavaScript/Reference/Global_Objects/Function"><code>Function</code> constructor</a>) does not have a name. Therefore if there is no accessible variable referring to it, the only way the function can refer to itself is by <code>arguments.callee</code>.</p> + +<p>The following example defines a function, which, in turn, defines and returns a factorial function. This example isn't very practical, and there are nearly no cases where the same result cannot be achieved with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function" title="JavaScript/Reference/Operators/Special/function">named function expressions</a>.</p> + +<pre class="brush: js">function create() { + return function(n) { + if (n <= 1) + return 1; + return n * arguments.callee(n - 1); + }; +} + +var result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1)</pre> + +<h3 id="A_use_of_arguments.callee_with_no_good_alternative">A use of <code>arguments.callee</code> with no good alternative</h3> + +<p>However, in a case like the following, there are not alternatives to <code>arguments.callee</code>, so its deprecation could be a bug (see {{Bug("725398")}}):</p> + +<pre class="brush: js">function createPerson (sIdentity) { + var oPerson = new Function("alert(arguments.callee.identity);"); + oPerson.identity = sIdentity; + return oPerson; +} + +var john = createPerson("John Smith"); + +john();</pre> + +<h2 id="規範">規範</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/zh-tw/web/javascript/reference/functions/arguments/index.html b/files/zh-tw/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..6b1d6a45a1 --- /dev/null +++ b/files/zh-tw/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,235 @@ +--- +title: Arguments 物件 +slug: Web/JavaScript/Reference/Functions/arguments +tags: + - Functions + - JavaScript + - Reference + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +<div> +<div>{{jsSidebar("Functions")}}</div> +</div> + +<p><strong><code>arguments</code></strong> 物件是一個對應傳入函式之引數的類陣列（<code>Array-like</code>）物件。</p> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox notranslate">arguments</pre> + +<h2 id="描述">描述</h2> + +<div class="blockIndicator note"> +<p>Note: 如果你有在使用 ES6 語法，建議參考<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">其餘參數</a>。</p> +</div> + +<div class="blockIndicator note"> +<p>Note: 「類陣列 (Array-like)」 的意思是 <code>arguments</code> 一樣擁有 <code>length</code>這項屬性，以及從 0 開始的索引，但是它沒有陣列內建的方法像是 <code>forEach()</code> ，或是 <code>map()</code> 。</p> +</div> + +<p>The <code>arguments</code> object is a local variable available within all (non-arrow) functions. You can refer to a function's arguments within the function by using the <code>arguments</code> object. This object contains an entry for each argument passed to the function, the first entry's index starting at 0.</p> + +<p>For example, if a function is passed three arguments, you can refer to them as follows:</p> + +<pre class="brush: js notranslate">arguments[0] +arguments[1] +arguments[2] +</pre> + +<p>arguments 也可以被指定：</p> + +<pre class="brush: js notranslate">arguments[1] = 'new value';</pre> + +<p><code>arguments</code> 物件不是陣列。它與陣列非常相似，但是它沒有除了 <code>length</code> 這個屬性以外的其他陣列屬性。舉例，它沒有 <code>pop</code> 這個陣列方法。</p> + +<p>然而，它依然可以被轉換為真正的陣列(Array)。</p> + +<pre class="brush: js notranslate">var args = Array.prototype.slice.call(arguments); +var args = [].slice.call(arguments); + +// ES2015 +const args = Array.from(arguments); +</pre> + +<div class="warning"> +<p class="brush: js">Using slice on arguments prevents optimizations in some JavaScript engines (V8 for example - <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">more information</a>). If you care for them, try constructing a new array by iterating through the arguments object instead. An alternative would be to use the despised <code>Array</code> constructor as a function:</p> + +<pre class="brush: js notranslate">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));</pre> +</div> + +<p>You can use the <code>arguments</code> object if you call a function with more arguments than it is formally declared to accept. This technique is useful for functions that can be passed a variable number of arguments. Use <code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code> to determine the number of arguments passed to the function, and then process each argument by using the <code>arguments</code> object. To determine the number of parameters in the function <a href="/en-US/docs/Glossary/Signature/Function">signature</a>, use the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code> property.</p> + +<h3 id="Using_typeof_with_Arguments">Using <code>typeof</code> with Arguments</h3> + +<p>The typeof arguments returns 'object'. </p> + +<pre class="notranslate">console.log(typeof arguments); // 'object' </pre> + +<p>The typeof individual arguments can be determined with the use of indexing.</p> + +<pre class="notranslate">console.log(typeof arguments[0]); //this will return the typeof individual arguments.</pre> + +<h3 id="Using_the_Spread_Syntax_with_Arguments">Using the Spread Syntax with Arguments</h3> + +<p>You can also use the {{jsxref("Array.from()")}} method or the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> to convert arguments to a real Array:</p> + +<pre class="brush: js notranslate">var args = Array.from(arguments); +var args = [...arguments]; +</pre> + +<h2 id="屬性">屬性</h2> + +<dl> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></dt> + <dd>Reference to the currently executing function.</dd> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt> + <dd>Reference to the function that invoked the currently executing function.</dd> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a></code></dt> + <dd>Reference to the number of arguments passed to the function.</dd> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt> + <dd>Returns a new Array Iterator object that contains the values for each index in the arguments.</dd> +</dl> + +<h2 id="範例">範例</h2> + +<h3 id="Defining_a_function_that_concatenates_several_strings">Defining a function that concatenates several strings</h3> + +<p>This example defines a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p> + +<pre class="brush:js notranslate">function myConcat(separator) { + var args = Array.prototype.slice.call(arguments, 1); + return args.join(separator); +}</pre> + +<p>You can pass any number of arguments to this function, and it creates a list using each argument as an item in the list.</p> + +<pre class="brush:js notranslate">// returns "red, orange, blue" +myConcat(', ', 'red', 'orange', 'blue'); + +// returns "elephant; giraffe; lion; cheetah" +myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); + +// returns "sage. basil. oregano. pepper. parsley" +myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');</pre> + +<h3 id="Defining_a_function_that_creates_HTML_lists">Defining a function that creates HTML lists</h3> + +<p>This example defines a function that creates a string containing HTML for a list. The only formal argument for the function is a string that is "<code>u</code>" if the list is to be unordered (bulleted), or "<code>o</code>" if the list is to be ordered (numbered). The function is defined as follows:</p> + +<pre class="brush:js notranslate">function list(type) { + var result = '<' + type + 'l><li>'; + var args = Array.prototype.slice.call(arguments, 1); + result += args.join('</li><li>'); + result += '</li></' + type + 'l>'; // end list + + return result; +}</pre> + +<p>You can pass any number of arguments to this function, and it adds each argument as an item to a list of the type indicated. For example:</p> + +<pre class="brush:js notranslate">var listHTML = list('u', 'One', 'Two', 'Three'); + +/* listHTML is: + +"<ul><li>One</li><li>Two</li><li>Three</li></ul>" + +*/</pre> + +<h3 id="Rest_default_and_destructured_parameters">Rest, default, and destructured parameters</h3> + +<p>The <code>arguments</code> object can be used in conjunction with <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> parameters.</p> + +<pre class="brush: js notranslate">function foo(...args) { + return args; +} +foo(1, 2, 3); // [1,2,3] +</pre> + +<p>While the presence of <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> parameters does not alter the <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode#Making_eval_and_arguments_simpler">behavior of the <code>arguments</code> object in strict mode code</a>, there is a subtle difference for non-strict code.</p> + +<p>When a non-strict function <strong><strong>does </strong>not</strong> contain <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> parameters, then the values in the <code>arguments</code> object <strong>do</strong> track the values of the arguments (and vice versa). See the code below:</p> + +<pre class="brush: js notranslate">function func(a) { + arguments[0] = 99; // updating arguments[0] also updates a + console.log(a); +} +func(10); // 99 +</pre> + +<p>and</p> + +<pre class="brush: js notranslate">function func(a) { + a = 99; // updating a also updates arguments[0] + console.log(arguments[0]); +} +func(10); // 99 +</pre> + +<p>When a non-strict function <strong>does</strong> contain <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> parameters, then the values in the <code>arguments</code> object <strong>do not</strong> track the values of the arguments (and vice versa). Instead, they reflect the arguments provided at the time of invocation:</p> + +<pre class="brush: js notranslate">function func(a = 55) { + arguments[0] = 99; // updating arguments[0] does not also update a + console.log(a); +} +func(10); // 10</pre> + +<p>and</p> + +<pre class="brush: js notranslate">function func(a = 55) { + a = 99; // updating a does not also update arguments[0] + console.log(arguments[0]); +} +func(10); // 10 +</pre> + +<p>and</p> + +<pre class="brush: js notranslate">function func(a = 55) { + console.log(arguments[0]); +} +func(); // undefined</pre> + +<h2 id="規範">規範</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + + + +<p>{{Compat("javascript.functions.arguments")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/zh-tw/web/javascript/reference/functions/arrow_functions/index.html b/files/zh-tw/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..8eac06ba55 --- /dev/null +++ b/files/zh-tw/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,340 @@ +--- +title: 箭頭函式 +slug: Web/JavaScript/Reference/Functions/Arrow_functions +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong>箭頭函式運算式</strong>（arrow function expression）擁有比<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/function">函式運算式</a>還簡短的語法。它沒有自己的 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/this">this</a></code>、<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>、<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/super">super</a>、<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a> 等語法。本函式運算式適用於非方法的函式，但不能被用作建構式（constructor）。</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</div> + +<h2 id="基本語法">基本語法</h2> + +<pre class="syntaxbox notranslate">(參數1, 參數2, …, 參數N) => { 陳述式; } + +(參數1, 參數2, …, 參數N) => 表示式; +// 等相同(參數1, 參數2, …, 參數N) => { return 表示式; } + +// 只有一個參數時,括號才能不加: +(單一參數) => { 陳述式; } +單一參數 => { 陳述式; } + +//若無參數，就一定要加括號: +() => { statements } +</pre> + +<h2 id="進階語法">進階語法</h2> + +<pre class="syntaxbox notranslate">// 用大括號將內容括起來，返回一個物件字面值表示法： +params => ({foo: bar}) + +// 支援<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">其餘參數</a>與<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/Default_parameters">預設參數</a> +(param1, param2, ...rest) => { statements } +(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { +statements } + +// 也支援 parameter list 的<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解構</a> +var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6 +</pre> + +<h2 id="說明">說明</h2> + +<p>也可參閱 <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>。</p> + +<p>箭頭函式有兩個重要的特性：更短的函式寫法與 <code>this</code> 變數的非綁定。</p> + +<h3 id="更短的函式寫法">更短的函式寫法</h3> + +<pre class="brush: js notranslate">var elements = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +// 這段函式會輸出[8, 6, 7, 9]這個陣列 +elements.<a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(element) { + return element.length; +}); + +// 上方這種一般的函式，可以被改寫成下方的箭頭函式 +elements.map((element) => { + return element.length; +}); // [8, 6, 7, 9] + +// 如果輸入的參數只有一個，我們可以移除掉外面的括號 +elements.map(element => { + return element.length; +}); // [8, 6, 7, 9] + +// 當箭頭函式裡的內容只有'return'的時候，我們可以拿掉return和外面的大括號 +elements.map(element => element.length); // [8, 6, 7, 9] + +// 在這個範例中，因為我們只需要length這個屬性，所以也可以使用<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解構賦值</a>： +// 下方的'length'對應到我們想取得的屬性，而'lengthFooBArX'只是很普通的變數名稱, +// 可以被任意修改成你想要的名字 +elements.map(({ length: lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9] + +// 上面這種解構賦值之後的參數也可以被改寫為下面這樣。但要注意的是，在這個範例中， +// 我們不是要指定'length'這個值給一個虛構的屬性，而是這個變數的名稱'length'本身就是 +// 用來當成我們想從物件上取得的屬性 +elements.map(({ length }) => length); // [8, 6, 7, 9] +</pre> + +<h3 id="this_不分家"><code>this</code> 不分家</h3> + +<p>在有箭頭函數之前，每個新函式是依據如何被呼叫來定義自己的 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 變數<br> + 例如:</p> + +<ul> + <li>在建構子時是一個新物件</li> + <li>在呼叫<a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴格模式</a>函數時是 undefined</li> + <li>以物件方法呼叫時則為基礎物件</li> + <li>等等....</li> +</ul> + +<p>事實證明這對物件導向程式設計來說並不理想。</p> + +<pre class="brush: js notranslate">function Person() { + // Person() 建構式將 this 定義為它自己的一個實體 + this.age = 0; + + setInterval(function growUp() { + // 在非嚴格模式下, growUp() 函式把 this 定義為全域物件 + // (因為那是 growUp()執行的所在)， + // 與 Person() 建構式所定義的 this 有所不同 + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>在 ECMAScript 3/5 裡面，有關 <code>this</code> 的問題，可以透過指派 <code>this</code> 值給可以關閉的變數解決。</p> + +<pre class="brush: js notranslate">function Person() { + var self = this; // 有些人喜歡 `that` 而不是 `self`. + // 選好一種取法後始終如一 + self.age = 0; + + setInterval(function growUp() { + // 這個 callback 參考 `self` 變數，為預期中的物件。 + self.age++; + }, 1000); +}</pre> + +<p>或者透過 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a> 函式來綁定 <code>this</code> 變數到指定函式（以上面為例，就是 <code>growUp()</code> 函式）。</p> + +<p>箭頭函式並不擁有自己的 <code>this 變</code>數<code>；</code>使用的 this <code>值來自</code>封閉的文本上下文，也就是說，箭頭函式遵循常規變量查找規則。因此，如果在當前範圍中搜索不到 this 變量時，他們最終會尋找其封閉範圍。</p> + +<p>因此，在以下程式碼內，傳遞給 <code>setInterval</code> 的 箭頭函式中的<code>this</code> ，會與封閉函式的 <code>this</code> 值相同：</p> + +<pre class="brush: js notranslate">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this| 適切的參考了Person建構式所建立的物件 + }, 1000); +} + +var p = new Person();</pre> + +<h4 id="和嚴格模式的關係">和嚴格模式的關係</h4> + +<p>由於 <code>this</code> 變數具有詞彙上綁定意義，所以<a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴格模式</a>的宣告對 <code>this</code> 的作用將被忽略。</p> + +<pre class="brush: js notranslate">var f = () => {'use strict'; return this}; +f() === window; // 或是 global 物件</pre> + +<p>但嚴格模式的其他作用依舊存在。</p> + +<h4 id="由_call_與_apply_函式呼叫">由 call 與 apply 函式呼叫</h4> + +<p>由於箭頭函式並沒有自己的 <code>this</code>，所以透過 <code>call()</code> 或 <code>apply()</code> 呼叫箭頭函式只能傳入參數。<code>thisArg</code> 將會被忽略。</p> + +<pre class="brush: js notranslate">var adder = { + base : 1, + add : function(a) { + var f = v => v + this.base; + return f(a); + }, + addThruCall: function(a) { + var f = v => v + this.base; + var b = { + base : 2 + }; + return f.call(b, a); + } +}; +console.log(adder.add(1)); // 顯示 2 +console.log(adder.addThruCall(1)); // 依舊顯示 2 +</pre> + +<h3 id="不綁定_arguments">不綁定 <code>arguments</code></h3> + +<p>箭頭函式並沒有自己的 <a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> 物件</a>。所以在此例中，<code>arguments</code> 只是參考到 enclosing 作用域裡面的相同變數：</p> + +<pre class="brush: js notranslate">var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // <em>foo</em>'s implicit arguments binding. arguments[0] is n + return f(); +} + +foo(1); // 2</pre> + +<p>大多時候，使用<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">其餘參數</a> 是取代 <code>arguments</code> 物件的較好方式。</p> + +<pre class="brush: js notranslate">function foo(n) { + var f = (...args) => args[0] + n; + return f(10); +} + +foo(1); // 11</pre> + +<h3 id="將箭頭函式撰寫為方法">將箭頭函式撰寫為方法</h3> + +<p>如同前述，箭頭函式運算式最適合用在非方法的函式。來看看如果要把它們當成方法來用，會發生什麼事：</p> + +<pre class="brush: js notranslate"><code>'use strict'; +var obj = { + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log(this.i, this); + } +} +obj.b(); // 印出 undefined, Object {...} +obj.c(); // 印出 10, Object {...}</code></pre> + +<p>箭頭函式並沒有自己的 <code>this</code>。另一個例子與 {{jsxref("Object.defineProperty()")}} 有關：</p> + +<pre class="brush: js notranslate">'use strict'; + +var obj = { + a: 10 +}; + +Object.defineProperty(obj, 'b', { + get: () => { + console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object) + return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined' + } +}); +</pre> + +<h3 id="使用_new_運算子">使用 <code>new</code> 運算子</h3> + +<p>箭頭函式不可作為建構式使用；若使用於建構式，會在使用 <code>new</code> 時候拋出錯誤。</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +var foo = new Foo(); // TypeError: Foo is not a constructor</pre> + +<h3 id="使用_prototype_屬性">使用 <code>prototype</code> 屬性</h3> + +<p>箭頭函式並沒有原型（<code>prototype</code>）屬性。</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +console.log(Foo.prototype); // undefined +</pre> + +<h3 id="使用關鍵字_yield">使用關鍵字 <code>yield</code></h3> + +<p><code><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> 關鍵字無法用於箭頭函式的 body（except when permitted within functions further nested within it）。因此，箭頭函式無法使用 generator。</p> + +<h2 id="函式主體（Function_body）">函式主體（Function body）</h2> + +<p>箭頭函式可以變成 concise body 或者平常使用的 block body。</p> + +<p>在 concise body 裡面只需要輸入運算式，就會附上內建的回傳。在 block body 裡面就必須附上明確的 <code>return</code> 宣告。</p> + +<pre class="brush: js notranslate"><code>var func = x => x * x; // concise 語法會內建 "return" +var func = (x, y) => { return x + y; }; // block body 需要明確的 "return"</code></pre> + +<h2 id="回傳物件字面值">回傳物件字面值</h2> + +<p>請注意只使用 <code>params => {object:literal}</code> 並不會按照期望般回傳物件字面值（object literal）。</p> + +<pre class="brush: js notranslate"><code>var func = () => { foo: 1 }; // Calling func() returns undefined! +var func = () => { foo: function() {} }; // SyntaxError: Unexpected token (</code></pre> + +<p>因為在大括弧（<code>{}</code>）裡面的文字會被解析為有序宣告（例如 <code>foo</code> 會被當作標記（label）、而不是物件的 key ）</p> + +<p>要記得把物件字面值包在圓括弧內。</p> + +<pre class="brush: js notranslate"><code>var func = () => ({foo: 1}); +var func = () => ({ foo: function() {} }); </code> +</pre> + +<h2 id="換行">換行</h2> + +<p>箭頭函式不可以在參數及箭頭間包含換行。</p> + +<pre class="brush: js notranslate"><code>var func = () + => 1; // SyntaxError: expected expression, got '=>'</code></pre> + +<h2 id="Parsing_order">Parsing order</h2> + +<p>箭頭函式的箭頭儘管不是操作符，但藉著<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">運算子優先等級</a>，箭頭函式有著和普通函式不相同的特殊解析規則。</p> + +<pre class="brush: js notranslate"><code>let callback; + +callback = callback || function() {}; // ok +callback = callback || () => {}; // SyntaxError: invalid arrow-function arguments +callback = callback || (() => {}); // ok</code></pre> + +<h2 id="更多範例">更多範例</h2> + +<pre class="brush: js notranslate">// 回傳 undefined 的箭頭函式 +let empty = () => {}; + +(() => "foobar")() // 回傳 "foobar" + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Easy array filtering, mapping, ... + +var arr = [5, 6, 13, 0, 1, 18, 23]; +var sum = arr.reduce((a, b) => a + b); // 66 +var even = arr.filter(v => v % 2 == 0); // [6, 0, 18] +var double = arr.map(v => v * 2); // [10, 12, 26, 0, 2, 36, 46] + +</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('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div> + + +<p>{{Compat("javascript.functions.arrow_functions")}}</p> +</div> + +<h2 id="參閱">參閱</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html b/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..6faacba9a3 --- /dev/null +++ b/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,292 @@ +--- +title: 預設參數( Default parameters ) +slug: Web/JavaScript/Reference/Functions/Default_parameters +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong>函式預設參數 </strong>允許沒有值傳入或是傳入值為 <code>undefined 的情況下，參數能以指定的預設值初始化。</code></p> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox notranslate">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) { + <em>要執行的程序</em> +} +</pre> + +<h2 id="說明">說明</h2> + +<p>在 JavaScript 中，函式的參數預設值都為 <code>{{jsxref("undefined")}} 。然而，指定不同的預設值可能在一些場景很有用。這也是函式參數預設值可以幫上忙的地方。</code></p> + +<p>以往設定預設值有個普遍方法：在函式的內容裡檢查傳入參數是否為 <code>undefined ，如果是的話，爲他指定一個值。如下列範例，若函式被呼叫時，並沒有提供 b 的值，它的值就會是 undefined，在計算 a*b 時，以及呼叫 multiply 時，就會回傳 NaN。然而這在範例的第二行被阻止了：</code>:</p> + +<pre class="brush: js notranslate">function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1; + return a * b; +} + +multiply(5, 2); // 10 +multiply(5, 1); // 5 +multiply(5); // 5 +</pre> + +<p>有了 ES2015 的預設參數，再也不用於函式進行檢查了，現在只要簡單的在函式的起始處為 b 指定 1 的值：</p> + +<pre class="brush: js notranslate">function multiply(a, b = 1) { + return a * b; +} + +multiply(5, 2); // 10 +multiply(5, 1); // 5 +multiply(5); // 5 +</pre> + +<h2 id="範例">範例</h2> + +<h3 id="傳入_undefined">傳入 <code>undefined</code></h3> + +<p>這邊第二段函式呼叫中，僅管第二個傳入參數在呼叫時明確地指定為undefined（雖不是null），其顏色參數的值是預設值（rosybrown）。</p> + +<pre class="brush: js notranslate">function setBackgroundColor(element, color = 'rosybrown') { + element.style.backgroundColor = color; +} + +setBackgroundColor(someDiv); // color set to 'rosybrown' +setBackgroundColor(someDiv, undefined); // color set to 'rosybrown' too +setBackgroundColor(someDiv, 'blue'); // color set to 'blue' +</pre> + +<h3 id="呼叫時賦予值">呼叫時賦予值</h3> + +<p>跟Python等語言不同的地方是，先前預設的代數值會拿來進行函式內的程序，也因此在函式呼叫的時候，會建立新物件。</p> + +<pre class="brush: js notranslate">function append(value, array = []) { + array.push(value); + return array; +} + +append(1); //[1] +append(2); //[2], 而非 [1, 2] +</pre> + +<p>諸如此類的做法，也適用在函式和變量。</p> + +<pre class="brush: js notranslate">function callSomething(thing = something()) { + return thing; +} + +function something() { + return 'sth'; +} + +callSomething(); //sth</pre> + +<h3 id="預設的參數中，先設定的可提供之後設定的使用">預設的參數中，先設定的可提供之後設定的使用</h3> + +<p>先前有碰到的參數，後來的即可使用。</p> + +<pre class="brush: js notranslate">function singularAutoPlural(singular, plural = singular + '們', + rallyingCry = plural + '，進攻啊!!!') { + return [singular, plural, rallyingCry]; +} + +//["壁虎","壁虎們", "壁虎，進攻啊!!!"] +singularAutoPlural('壁虎'); + +//["狐狸","火紅的狐狸們", "火紅的狐狸們，進攻啊!!!"] +singularAutoPlural('狐狸', '火紅的狐狸們'); + +//["鹿兒", "鹿兒們", "鹿兒們 ... 有所好轉"] +singularAutoPlural('鹿兒', '鹿兒們', '鹿兒們平心靜氣的 \ + 向政府請願，希望事情有所好轉。'); +</pre> + +<p>This functionality is approximated in a straight forward fashion and demonstrates how many edge cases are handled.</p> + +<pre class="brush: js notranslate">function go() { + return ':P'; +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a, b, c, d, e, f, g]; +} + +function withoutDefaults(a, b, c, d, e, f, g) { + switch (arguments.length) { + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a, b, c, d, e, f, g]; +} + +withDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + + +withoutDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] +</pre> + +<h3 id="函式內再定義函式">函式內再定義函式</h3> + +<p>Introduced in Gecko 33 {{geckoRelease(33)}}. Functions declared in the function body cannot be referred inside default parameters and throw a {{jsxref("ReferenceError")}} (currently a {{jsxref("TypeError")}} in SpiderMonkey, see {{bug(1022967)}}). Default parameters are always executed first, function declarations inside the function body evaluate afterwards.</p> + +<pre class="brush: js notranslate">// 行不通的！ 最後會丟出 ReferenceError。 +function f(a = go()) { + function go() { return ':P'; } +} +</pre> + +<h3 id="Parameters_without_defaults_after_default_parameters">Parameters without defaults after default parameters</h3> + +<p>Prior to Gecko 26 {{geckoRelease(26)}}, the following code resulted in a {{jsxref("SyntaxError")}}. This has been fixed in {{bug(777060)}} and works as expected in later versions. Parameters are still set left-to-right, overwriting default parameters even if there are later parameters without defaults.</p> + +<pre class="brush: js notranslate">function f(x = 1, y) { + return [x, y]; +} + +f(); // [1, undefined] +f(2); // [2, undefined] +</pre> + +<h3 id="Destructured_parameter_with_default_value_assignment">Destructured parameter with default value assignment</h3> + +<p>You can use default value assignment with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a> notation:</p> + +<pre class="brush: js notranslate">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z; +} + +f(); // 6</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('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器的兼容性">瀏覽器的兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能特徵</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{CompatChrome(49)}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>Edge</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari(10)}}</td> + </tr> + <tr> + <td>Parameters without defaults after default parameters</td> + <td>{{CompatChrome(49)}}</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari(10)}}</td> + </tr> + <tr> + <td>Destructured parameter with default value assignment</td> + <td>{{CompatChrome(49)}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能特徵</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49)}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49)}}</td> + </tr> + <tr> + <td>Parameters without defaults after default parameters</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49)}}</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49)}}</td> + </tr> + <tr> + <td>Destructured parameter with default value assignment</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("41.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="要不要也看看">要不要也看看</h2> + +<ul> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li> +</ul> 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> diff --git a/files/zh-tw/web/javascript/reference/functions/index.html b/files/zh-tw/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..718cc30c3e --- /dev/null +++ b/files/zh-tw/web/javascript/reference/functions/index.html @@ -0,0 +1,617 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Function + - Functions + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function can <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, i.e. they are objects and can be manipulated and passed around just like any other object. Specifically, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>Functions are not the same as procedures. A function always returns a value, but a procedure may or may not return any value.</p> + +<p>To return a specific value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is <code>undefined</code>.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; + } + + /* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ + var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 + }; + + /* Logs 'Honda' */ + console.log(mycar.brand); + + /* Pass object reference to the function */ + myFunc(mycar); + + /* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ + console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="定義函式_Defining_functions">定義函式 Defining functions</h2> + +<p>以下幾個方法去定義函式 (function)</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details):</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements which comprise the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<div class="note"> +<p><strong>Note:</strong> Generator function are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>There is a special syntax for declaration generator functions (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<div class="note"> +<p><strong>Note:</strong> Generator function are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements which comprise the body of the function.</dd> +</dl> + +<h3 id="箭頭函式_The_arrow_function_expression_(>)">箭頭函式 The arrow function expression (=>)</h3> + +<div class="note"> +<p><strong>Note:</strong> Arrow function expressions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>An arrow function expression has a shorter syntax and lexically binds its this value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param] [, param]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of that function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Arrow function expressions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<div class="note"> +<p><strong>Note:</strong> Default and rest parameters are <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<div class="note"> +<p><strong>Note:</strong> <em>Method definitions are experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Function_constructor_vs._function_declaration_vs._function_expression"><code>Function</code> constructor vs. function declaration vs. function expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> constructor assigned to the variable <code>multiply</code></p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other.A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x == 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y == 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Conditionally_defining_a_function">Conditionally defining a function</h2> + +<p>Functions can be conditionally defined using either //function statements// (an allowed extension to the <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Edition 3</a> standard) or the <code>Function</code> constructor. Please note that such <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=609832">function statements are no longer allowed in ES5 strict</a>. Additionally, this feature does not work consistently cross-browser, so you should not rely on it.</p> + +<p>In the following script, the <code>zero</code> function is never defined and cannot be invoked, because '<code>if (0)</code>' evaluates its condition to false:</p> + +<pre class="brush: js">if (0) { + function zero() { + document.writeln("This is zero."); + } +} +</pre> + +<p>If the script is changed so that the condition becomes '<code>if (1)</code>', function <code>zero</code> is defined.</p> + +<p>Note: Although this kind of function looks like a function declaration, it is actually an expression (or statement), since it is nested within another statement. See differences between function declarations and function expressions.</p> + +<p>Note: Some JavaScript engines, not including <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, incorrectly treat any function expression with a name as a function definition. This would lead to <code>zero</code> being defined, even with the always-false <code>if</code> condition. A safer way to define functions conditionally is to define the function anonymously and assign it to a variable:</p> + +<pre class="brush: js">if (0) { + var zero = function() { + document.writeln("This is zero."); + } +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is peformed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise some other action is taken.</p> + +<pre class="brush: js"> if ('function' == typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#', 'function*')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator function</td> + <td>39</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow function</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator function</td> + <td>{{CompatUnknown}}</td> + <td>39</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow function</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/zh-tw/web/javascript/reference/functions/method_definitions/index.html b/files/zh-tw/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..15aeef0f00 --- /dev/null +++ b/files/zh-tw/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,213 @@ +--- +title: 方法定義 +slug: Web/JavaScript/Reference/Functions/Method_definitions +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +<div>{{JsSidebar("Functions")}}</div> + +<p>自 ECMAScript 2015 開始，引入了一種於物件初始器（objects initializers）中定義方法的簡短語法。是一個將函式指派予方法名稱的簡便方式。</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}</div> + + + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox">var obj = { + <var>property</var>( <var>parameters…</var> ) {}, + *<var>generator</var>( <var>parameters…</var> ) {}, + async property( <var>parameters…</var> ) {}, + async* generator( <var>parameters…</var> ) {}, + + // with computed keys: + [property]( <var>parameters…</var> ) {}, + *[generator]( <var>parameters…</var> ) {}, + async [property]( <var>parameters…</var> ) {}, + + // compare getter/setter syntax: + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {} +}; +</pre> + +<h2 id="說明">說明</h2> + +<p>這個簡短的語法和在 ECMAScript 2015 引入 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> 以及 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> 類似。</p> + +<p>請看以下程式碼：</p> + +<pre class="brush: js">var obj = { + foo: function() { + /* code */ + }, + bar: function() { + /* code */ + } +}; +</pre> + +<p>你可以把它縮減為：</p> + +<pre class="brush: js">var obj = { + foo() { + /* code */ + }, + bar() { + /* code */ + } +}; +</pre> + +<h3 id="產生器方法">產生器方法</h3> + +<p><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/function*">產生器方法</a>（Generator method）也可以透過簡短語法定義之。用的時候：</p> + +<ul> + <li>簡短語法的星號（*）必須放在產生器方法的屬性名前面。也就是說 <code>* g(){}</code> 能動但 <code>g *(){}</code> 不行；</li> + <li> + <p>非產生器方法的定義可能不會有 <code>yield</code> 關鍵字。也就是說<a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">過往的產生器函式</a>動不了、並拋出{{jsxref("SyntaxError")}}。Always use <code>yield</code> in conjunction with the asterisk (*).</p> + </li> +</ul> + +<pre class="brush: js;highlight[12]">// Using a named property +var obj2 = { + g: function* () { + var index = 0; + while (true) + yield index++; + } +}; + +// The same object using shorthand syntax +var obj2 = { + * g() { + var index = 0; + while (true) + yield index++; + } +}; + +var it = obj2.g(); +console.log(it.next().value); // 0 +console.log(it.next().value); // 1</pre> + +<h3 id="Async_方法">Async 方法</h3> + +<p>{{jsxref("Statements/async_function", "Async 方法", "", 1)}} 也可以透過簡短語法定義。</p> + +<pre class="brush: js;highlight[12]">// Using a named property +var obj3 = { + f: async function () { + await some_promise; + } +}; + +// The same object using shorthand syntax +var obj3 = { + async f() { + await some_promise; + } +}; +</pre> + +<h3 id="Async_generator_methods">Async generator methods</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generator methods</a> can also be {{jsxref("Statements/async_function", "async", "", 1)}}.</p> + +<pre class="brush: js">var obj4 = { + f: async function* () { + yield 1; + yield 2; + yield 3; + } +}; + +// The same object using shorthand syntax +var obj4 = { + async* f() { + yield 1; + yield 2; + yield 3; + } +};</pre> + +<h3 id="Method_definitions_are_not_constructable">Method definitions are not constructable</h3> + +<p>All method definitions are not constructors and will throw a {{jsxref("TypeError")}} if you try to instantiate them.</p> + +<pre class="brush: js example-bad">var obj = { + method() {} +}; +new obj.method; // TypeError: obj.method is not a constructor + +var obj = { + * g() {} +}; +new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016) +</pre> + +<h2 id="範例">範例</h2> + +<h3 id="Simple_test_case">Simple test case</h3> + +<pre class="brush: js;highlight[3]">var obj = { + a: 'foo', + b() { return this.a; } +}; +console.log(obj.b()); // "foo" +</pre> + +<h3 id="Computed_property_names">Computed property names</h3> + +<p>The shorthand syntax also supports computed property names.</p> + +<pre class="brush: js;highlight[4]">var bar = { + foo0: function() { return 0; }, + foo1() { return 1; }, + ['foo' + 2]() { return 2; } +}; + +console.log(bar.foo0()); // 0 +console.log(bar.foo1()); // 1 +console.log(bar.foo2()); // 2</pre> + +<h2 id="規範">規範</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('ES2015', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>Changed that generator methods should also not have a [[Construct]] trap and will throw when used with <code>new</code>.</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.method_definitions")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li> + <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> +</ul> diff --git a/files/zh-tw/web/javascript/reference/functions/rest_parameters/index.html b/files/zh-tw/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..bed96fff03 --- /dev/null +++ b/files/zh-tw/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,155 @@ +--- +title: 其餘參數 +slug: Web/JavaScript/Reference/Functions/rest_parameters +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong>其餘參數（rest parameter）</strong> 語法可以讓我們表示不確定數量的參數，並將其視為一個陣列。</p> + +<h2 id="語法">語法</h2> + +<pre class="brush: js">function f(a, b, ...theArgs) { + // ... +} +</pre> + +<h2 id="描述">描述</h2> + +<p>如果函式的最後一個命名參數以 <code>...</code> 開頭，它會被視為一個陣列。該陣列的元素會被置於索引從 <code>0</code>（含）到的 <code>theArgs.length</code>（不含）位置，並且被視為一個函式的參數。</p> + +<p>在上面的範例中，<code>theArgs</code> 會將函式f中第三個(含)以後的參數收集起來。</p> + +<h3 id="其餘參數和_arguments_物件的差異">其餘參數和 <code>arguments</code> 物件的差異</h3> + +<p>以下是其餘參數和 <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">arguments</a> 物件</code>三個主要的差異：</p> + +<ul> + <li>其餘參數是 <code>arguments</code> 物件被傳入到函式的時候，還沒被指定變數名稱的引數。</li> + <li><code>arguments</code> 物件不是一個實際的陣列，而 rest parameter 是陣列的實體，即 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method">sort</a></code>、<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method">map</a></code><font face="Open Sans, arial, x-locale-body, sans-serif">、</font><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method">forEach</a></code> <font face="Open Sans, arial, x-locale-body, sans-serif">或 </font><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method">pop</a></code> 可以直接在其餘參數被調用。</li> + <li><code>arguments</code> 物件自身有額外的功能，例如 <code>callee</code> 屬性。</li> +</ul> + +<h3 id="將參數轉成陣列">將參數轉成陣列</h3> + +<p>其餘參數被介紹作為取代用 arguments 寫的範例程式。</p> + +<pre class="brush: js">// 在有其餘參數之前，你可能見過下面的程式碼： +function f(a, b) { + var args = Array.prototype.slice.call(arguments, f.length); // f.length 表示 arguments 的數量 + + // … +} + +// 現在可以寫成這樣 + +function f(a, b, ...args) { + +} +</pre> + +<h3 id="解構其餘參數_rest_parameters">解構其餘參數 rest parameters</h3> + +<p>其餘參數可以被解構，換句話說，可以把這個陣列解開，並將各個元素取出成為個別的變數。請參考<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解構賦值</a>。</p> + +<pre class="brush: js">function f(...[a, b, c]) { + return a + b + c; +} + +f(1) // NaN (b 和 c 都是 undefined) +f(1, 2, 3) // 6 +f(1, 2, 3, 4) // 6 (第四個參數不會被解構，因為解構式只有三個定義好的變數名稱)</pre> + +<h2 id="範例">範例</h2> + +<p>因為 <code>theArgs</code> 是一個陣列，所以它會有 <code>length</code> 屬性，作為表示參數數量：</p> + +<pre class="brush: js">function fun1(...theArgs) { + console.log(theArgs.length); +} + +fun1(); // 0 +fun1(5); // 1 +fun1(5, 6, 7); // 3 +</pre> + +<p>在接下來的範例中，其餘參數被用來收集第一個之後的所有引數並存在陣列中。 在這個陣列裡的每個元素(數字)，都會和第一個參數相乘後取代原本的元素，最後再將取代元素後的陣列回傳。</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(function(element) { + return multiplier * element; + }); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6] +</pre> + +<p>下列範例展示 <code>Array</code> 的方法可以在其餘參數上被使用，但 <code>arguments</code> 則不行。</p> + +<pre class="brush: js">function sortRestArgs(...theArgs) { + var sortedArgs = theArgs.sort(); + return sortedArgs; +} + +console.log(sortRestArgs(5, 3, 7, 1)); // 顯示 1, 3, 5, 7 + +function sortArguments() { + var sortedArgs = arguments.sort(); + return sortedArgs; // 因為前一行會因為 arguments 沒有sort()這個方法而造成TypeError，所以永遠不會執行此行。 +} + +console.log(sortArguments(5, 3, 7, 1)); // 會拋出 TypeError (arguments.sort is not a function) +</pre> + +<p>為了要在 <code>arguments</code> 物件上使用 <code>Array</code> 的方法，可以將它轉換成真的 <code>Array</code> 實體，或者以 <code>apply()</code> 直接調用需要的方法。</p> + +<pre class="brush: js">function sortArguments() { + var args = Array.from(arguments); + var sortedArgs = args.sort(); + return sortedArgs; +} +console.log(sortArguments(5, 3, 7, 1)); // 顯示 1, 3, 5, 7 +</pre> + +<h2 id="規範">規範</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('ES6', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<div> + + +<p>{{Compat("javascript.functions.rest_parameters")}}</p> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread operator</a> (also ‘<code>...</code>’)</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments object</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Functions</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li> + <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a></li> +</ul> 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> |