1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
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>
|
