diff options
Diffstat (limited to 'files/vi/web/javascript/reference/functions/default_parameters')
-rw-r--r-- | files/vi/web/javascript/reference/functions/default_parameters/index.html | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/files/vi/web/javascript/reference/functions/default_parameters/index.html b/files/vi/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..11ae77dab7 --- /dev/null +++ b/files/vi/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,198 @@ +--- +title: Default parameters +slug: Web/JavaScript/Reference/Functions/Default_parameters +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Các tham số của hàm mặc định cho phép khởi tạo với các giá trị mặc định khi không truyền giá trị vào đó.</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div> + + + +<h2 id="Cú_pháp">Cú pháp</h2> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) { + <em>statements</em> +} +</pre> + +<h2 id="Mô_tả">Mô tả</h2> + +<p>Trong JavaScript, tham số của hàm mặc định <code>{{jsxref("undefined")}}</code>. Tuy nhiên, chúng thường hữu ích hơn khi tạo giá trị mặc định khác. </p> + +<p>Trước đây, quy tắc chung khi tạo giá trị mặc định là kiểm tra các giá trị tham số trong thân hàm và gán vào tham số nếu nó không xác định.</p> + +<p>Trong ví dụ sau, nếu không cung cấp giá trị cho b khi gọi hàm multiply, b sẽ không xác định trong phép tính a * b và hàm multiply sẽ trả về NaN.</p> + +<pre class="brush: js">function multiply(a, b) { + return a * b; +} + +multiply(5, 2); // 10 +multiply(5); // NaN ! +</pre> + +<p>Để tránh điều này, ta sẽ dùng một dòng code xác định b=1 nếu hàm chỉ được gọi với 1 đối số.</p> + +<pre class="brush: js">function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1; + return a * b; +} + +multiply(5, 2); // 10 +multiply(5); // 5 +</pre> + +<p>Với các tham số mặc định trong ES2015, việc kiểm tra thân hàm không còn cần thiết. Bạn có thể gán 1 cho b ở đầu hàm:</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a * b; +} + +multiply(5, 2); // 10 +multiply(5); // 5 +</pre> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Truyền_giá_trị_undefined_với_giá_trị_ảo">Truyền giá trị <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(255, 255, 255, 0.4);">undefined</span></font> với giá trị ảo</h3> + +<p>Trong lời gọi thứ hai, ngay cả khi đối số thứ nhất không xác định (không phải null hay giá trị ảo), đối số num vẫn mặc định.</p> + +<p>function test(num = 1) { console.log(typeof num); } test(); // 'number' (num is set to 1) test(undefined); // 'number' (num is set to 1 too) // test with other falsy values: test(''); // 'string' (num is set to '') test(null); // 'object' (num is set to null)</p> + +<h3 id="Xét_tại_thời_điểm_gọi">Xét tại thời điểm gọi</h3> + +<p>Đối số mặc định được xét tại thời điểm gọi. Trong khi Python, một đối tượng mới được tạo ra mỗi khi hàm được gọi.</p> + +<p>function append(value, array = []) { array.push(value); return array; } append(1); //[1] append(2); //[2], not [1, 2]</p> + +<p>Áp dụng cho cả hàm và biến:</p> + +<pre class="brush: js">function callSomething(thing = something()) { + return thing; +} + +let numberOfTimesCalled = 0; +function something() { + numberOfTimesCalled += 1; + return numberOfTimesCalled; +} + +callSomething(); // 1 +callSomething(); // 2</pre> + +<h3 id="Các_tham_số_mặc_định_có_sẵn_cho_các_tham_số_mặc_định_sau">Các tham số mặc định có sẵn cho các tham số mặc định sau:</h3> + +<p>Các tham số được xác định trước (bên trái) có sẵn cho các tham số mặc định sau:</p> + +<p>function greet(name, greeting, message = greeting + ' ' + name) { return [name, greeting, message]; } greet('David', 'Hi'); // ["David", "Hi", "Hi David"] greet('David', 'Hi', 'Happy Birthday!'); // ["David", "Hi", "Happy Birthday!"]</p> + +<p>This functionality can be aChức năng này sử dụng cho nhiều trường hợp xảy ra:</p> + +<pre class="brush: js">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="Định_nghĩa_hàm_trong_thân_hàm">Định nghĩa hàm trong thân hàm</h3> + +<p>Giới thiệu trong Gecko 33 {{geckoRelease(33)}}. Các hàm được khai báo trong thân hàm không thể được tham chiếu bên trong với các tham số mặc định của hàm ngoài. Nếu bạn thử, {{jsxref("ReferenceError")}} sẽ bị loại bỏ. Các tham số mặc định luôn được thực thi trước, hàm khai báo bên trong thân hàm sẽ thực thi sau.</p> + +<pre class="brush: js">// Doesn't work! Throws ReferenceError. +function f(a = go()) { + function go() { return ':P'; } +} +</pre> + +<h3 id="Tham_số_không_mặc_định">Tham số không mặc định</h3> + +<p>Trước Gecko 26 {{geckoRelease(26)}}, đoạn code sau cho kết quả {{jsxref("SyntaxError")}}. Sau đó được sửa lại {{bug(777060)}}. Các tham số vẫn xuất hiện từ trái qua phải, ghi đè lên các tham số mặc định kể cả các tham số sau không mặc định.</p> + +<pre class="brush: js">function f(x = 1, y) { + return [x, y]; +} + +f(); // [1, undefined] +f(2); // [2, undefined] +</pre> + +<h3 id="Tham_số_bị_hủy_gán_với_giá_trị_mặc_định">Tham số bị hủy gán với giá trị mặc định</h3> + +<p>Có thể dùng giá trị mặc định với kí hiệu <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a>:</p> + +<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z; +} + +f(); // 6</pre> + +<h2 id="Đặc_điểm">Đặc điểm</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Đặc điểm</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Định nghĩa ban đầu</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Trình_duyệt_tương_thích">Trình duyệt tương thích</h2> + +<div> + + +<p>{{Compat("javascript.functions.default_parameters")}}</p> +</div> + +<h2 id="Liên_quan">Liên quan</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> |