JavaScript cho phép khai báo các hàm theo 6 cách. Bài viết mô tả cách chọn kiểu khai báo phù hợp, tùy thuộc vào mục đích chức năng.
Bạn đang xem : khai báo hàm trong js
Hàm là một khối mã tham số được xác định một lần và được gọi nhiều lần sau đó. Trong JavaScript, một hàm được cấu tạo và chịu ảnh hưởng của nhiều thành phần:
- Mã JavaScript tạo nên phần thân của hàm
- Danh sách các tham số
- Các biến có thể truy cập được từ phạm vi từ vựng
- Giá trị trả về
- Ngữ cảnh
thiskhi hàm được gọi - Được đặt tên hoặc một chức năng ẩn danh
- Biến chứa đối tượng hàm
-
đối số(hoặc bị thiếu trong một hàm mũi tên)
Đối tượng
Bài đăng này hướng dẫn bạn sáu cách tiếp cận để khai báo các hàm JavaScript: cú pháp, ví dụ và các cạm bẫy phổ biến. Hơn nữa, bạn sẽ hiểu khi nào nên sử dụng một loại hàm cụ thể trong một số trường hợp nhất định.
1. Khai báo hàm
Khai báo hàm được tạo bằng từ khóa
function, theo sau là tên hàm bắt buộc, danh sách các tham số trong cặp dấu ngoặc đơn(para1, .. ., paramN)và một cặp dấu ngoặc nhọn{...}phân tách mã nội dung.
Một ví dụ về khai báo hàm:
javascript
// khai báo hàm
hàm
isEven
(
num
< p>) {
trả về
num
%
2
===
0
;
}
isEven
(
24
);
// = & gt; true
isEven
(
11
);
// = & gt; sai
function isEven (num) {...} là một khai báo hàm xác định hàm isEven , xác định xem một số có phải là số chẵn hay không.
Khai báo hàm tạo một biến trong phạm vi hiện tại với định danh bằng tên hàm. Biến này chứa đối tượng hàm.
Biến hàm được nâng cấp lên đầu phạm vi hiện tại, có nghĩa là hàm có thể được gọi trước khi khai báo (xem chương này để biết thêm chi tiết) .
Hàm đã tạo là tên , có nghĩa là thuộc tính name của đối tượng hàm giữ tên của nó. Nó hữu ích khi xem ngăn xếp cuộc gọi: trong gỡ lỗi hoặc đọc thông báo lỗi.
Hãy xem các thuộc tính này trong một ví dụ:
javascript
// Biến được nâng
bảng điều khiển
.
log
(
xin chào
(
'Người ngoài hành tinh'
));
// = & gt; 'Xin chào Người ngoài hành tinh!'
// Hàm được đặt tên
bảng điều khiển
.
nhật ký
(
xin chào
.
tên
)
// = & gt; 'hello'
// Biến giữ đối tượng hàm
console < /p>
.
log
(
loại hình
xin chào
);
// = & gt; 'function'
function
xin chào
(
tên
) {
trả về
`Xin chào
$ {
tên
}
!`
;
}
Khai báo hàm function hello (name) {...} tạo một biến hello được đưa lên đầu phạm vi hiện tại. Biến hello chứa đối tượng hàm và hello.name chứa tên hàm: 'hello' .
1.1 Một hàm thông thường
Khai báo hàm phù hợp với các trường hợp khi một hàm thông thường là cần thiết. Thông thường có nghĩa là bạn khai báo hàm một lần và sau đó gọi hàm ở nhiều nơi khác nhau. Đây là tình huống cơ bản:
javascript
hàm
tổng
(
a
,
b
) {
trả lại
a
+
b
;
}
< p> sum
(
5
,
6
);
// = & gt; 11
([
3
,
7
]).
giảm
(
tổng
)
// = & gt; 10
Bởi vì khai báo hàm tạo ra một biến trong phạm vi hiện tại, cùng với các lệnh gọi hàm thông thường, nên nó rất hữu ích cho các trình xử lý sự kiện tách rời hoặc đệ quy. Trái ngược với biểu thức hàm hoặc hàm mũi tên, điều đó không tạo liên kết với biến hàm theo tên của nó.
Ví dụ: để tính toán đệ quy giai thừa, bạn phải truy cập vào hàm bên trong:
javascript
hàm
giai thừa
(
n
) {
nếu
(
n
===
0
) {
trả lại
1
;
}
trả về
n
*
giai thừa
(
n
< p> -1
);
}
giai thừa
(
4
);
// = & gt; 24
Bên trong factorial () một cuộc gọi đệ quy đang được thực hiện bằng cách sử dụng biến chứa hàm: factorial (n - 1) .
Có thể sử dụng một biểu thức hàm và gán nó cho một biến thông thường, ví dụ: const factorial = function (n) {...} . Nhưng khai báo hàm function factorial (n) là nhỏ gọn (không cần const và = ).
Một thuộc tính quan trọng của khai báo hàm là cơ chế lưu trữ của nó. Nó cho phép sử dụng hàm trước khai báo trong cùng một phạm vi.
Tời kéo rất hữu ích trong một số trường hợp. Ví dụ: khi bạn muốn xem hàm được gọi như thế nào ở đầu tập lệnh mà không cần đọc phần triển khai hàm. Phần triển khai chức năng có thể nằm bên dưới trong tệp, vì vậy bạn thậm chí có thể không cuộn đến đó.
Bạn có thể đọc thêm chi tiết về khai báo hàm khi nâng cấp tại đây .
1.2 Sự khác biệt so với biểu thức hàm
Rất dễ nhầm lẫn giữa khai báo hàm và biểu thức hàm . Chúng trông rất giống nhau nhưng tạo ra các chức năng với các thuộc tính khác nhau.
Một quy tắc dễ nhớ: khai báo hàm trong một câu lệnh luôn bắt đầu bằng từ khóa function . Nếu không thì đó là một biểu thức hàm (xem 2. ).
Mẫu sau là một khai báo hàm trong đó câu lệnh bắt đầu bằng từ khóa function :
javascript
// Khai báo hàm: bắt đầu bằng "function"
hàm
isNil
(
giá trị
) {
trả về
giá trị
==
null
;
}
Trong trường hợp biểu thức hàm, câu lệnh JavaScript không bắt đầu bằng từ khóa function (nó hiện ở đâu đó ở giữa mã câu lệnh):
javascript
// Biểu thức hàm: bắt đầu bằng "const"
const
isTruthy
=
hàm
(
giá trị
) {
< p> trả về
!!
giá trị
;
}; < / p>
// Biểu thức hàm: đối số cho .filter ()
const
số
= ([
1
,
sai < / p>
,
5
]).
bộ lọc
(
hàm < / p>
(
mục
) {
return
typeof
item
===
'number '
;
});
// Biểu thức hàm (IIFE): bắt đầu bằng "("
(
hàm
messageFunction
(
message
) {
trả lại
tin nhắn
+
'Thế giới!'
;
}) (
'Xin chào'
);
1.3 Khai báo hàm trong điều kiện
Một số môi trường JavaScript có thể gây ra lỗi tham chiếu khi gọi một hàm có khai báo xuất hiện trong các khối {...} của if , for hoặc câu lệnh while .
Hãy bật chế độ nghiêm ngặt và xem điều gì sẽ xảy ra khi một hàm được khai báo trong điều kiện:
javascript
(
hàm < / p>
() {
'sử dụng nghiêm ngặt'
;
nếu
(
đúng
) {< / p>
hàm
ok
() {
trả về
'true ok'
;
}
}
khác
{
hàm
ok
() {
trả về
'false ok'
;
}
}
< p>
bảng điều khiển
.
nhật ký
(
typeof
< / p>
ok
===
'không xác định'
);
// = & gt; true
bảng điều khiển
.
nhật ký
(
được rồi
());
// Ném "ReferenceError: ok is notined"
}) ();
Khi gọi ok () , JavaScript ném ra ReferenceError: ok không được định nghĩa , vì khai báo hàm nằm trong một khối có điều kiện.
Khai báo hàm trong điều kiện được cho phép ở chế độ không nghiêm ngặt, điều này càng làm cho nó khó hiểu hơn.
Theo quy tắc chung cho những trường hợp này, khi một hàm nên được tạo bởi các điều kiện – hãy sử dụng một biểu thức hàm. Hãy xem làm thế nào nó có thể:
javascript
(
hàm < / p>
() {
'sử dụng nghiêm ngặt'
;
để
được rồi
;
nếu
(
đúng
) {< / p>
ok
=
hàm
( ) {
trả về
'true ok'
;
};
}
khác
{
được rồi
=
hàm
() {
trả về
< / p>
'false ok'
;
};
}
bảng điều khiển
.
log
(
typeof
ok
===
'function'
);
// = & gt; true
bảng điều khiển
.
nhật ký
(
ok < / p>
());
// = & gt; 'true ok'
}) ();
Vì hàm là một đối tượng thông thường, hãy gán nó cho một biến tùy thuộc vào điều kiện. Lệnh gọi ok () hoạt động tốt, không có lỗi.
2. Biểu thức hàm
Biểu thức hàm được xác định bởi từ khóa
function, theo sau là tên hàm tùy chọn, danh sách các tham số trong cặp dấu ngoặc đơn(para1 ,. .., paramN)và một cặp dấu ngoặc nhọn{...}phân tách mã nội dung.
Một số mẫu của biểu thức hàm:
javascript
const
đếm
=
hàm
(
mảng
) {
// Biểu thức hàm
trả về
mảng
.
chiều dài
;
}
const
các phương thức
= {
số:
[
1
,
5
,
8
],
tổng
:
hàm
() {
// Biểu thức hàm
trả lại
cái này
.
số
.
giảm
(
chức năng
(
tài khoản
,
num
) {
// biểu thức func
trả lại
tài khoản
+
num
< p>;
});
}
< / p>
}
số lượng
([
5
,
7
,
8
]);
// = & gt; 3
phương thức
.
sum
();
// = & gt; 14
Biểu thức hàm tạo một đối tượng hàm có thể được sử dụng trong các trường hợp khác nhau:
- Được gán cho một biến dưới dạng một đối tượng
count = function (...) {...} - Tạo một phương thức trên một đối tượng
sum: function () {...} - Sử dụng hàm như một lệnh gọi lại
.reduce (function (...) {...})
Biểu thức hàm là con ngựa hoạt động trong JavaScript. Thông thường, bạn xử lý kiểu khai báo hàm này, cùng với hàm mũi tên (nếu bạn thích cú pháp ngắn và ngữ cảnh từ vựng).
2.1 Biểu thức hàm được đặt tên
Một hàm ẩn danh khi nó không có tên (thuộc tính name là một chuỗi rỗng '' ):
javascript
(
hàm
(
biến
) {
return
typeof
biến
;}
).
tên
;
// = & gt; ''
Đây là một hàm ẩn danh, tên là một chuỗi trống.
Đôi khi, tên hàm có thể được suy ra. Ví dụ: khi ẩn danh được gán cho một biến:
javascript
const
myFunctionVar
=
hàm
(
biến
) {
trả về
typeof
biến
;
};
myFunctionVar
. < / p>
tên
;
// = & gt; 'myFunctionVar'
Tên hàm ẩn danh là 'myFunctionVar' , vì tên biến myFunctionVar được sử dụng để suy ra tên hàm.
Khi biểu thức có tên được chỉ định, đây là biểu thức hàm được đặt tên . Nó có một số thuộc tính bổ sung so với biểu thức hàm đơn giản:
- Một hàm đã đặt tên được tạo, tức là thuộc tính
namegiữ tên hàm - Bên trong thân hàm, một biến có cùng tên chứa đối tượng hàm
Hãy sử dụng ví dụ trên nhưng đặt tên trong biểu thức hàm:
javascript
const
hàm getType
=
funName
(
< p> biến) {
bảng điều khiển
.
log
(
typeof
funName
===
'chức năng'
);
// = & gt; true
trả về
typeof
biến
;
}
bảng điều khiển
.
nhật ký
(
getType
(
3
));
// = & gt; 'number'
bảng điều khiển
.
log
(
getType
.
tên
);
// = & gt; 'funName'
bảng điều khiển
.
log
(
typeof
funName
);
// = & gt; 'không xác định'
function funName (biến) {...} là một biểu thức hàm được đặt tên. Biến funName có thể truy cập được trong phạm vi hàm chứ không phải bên ngoài. Dù bằng cách nào, thuộc tính name của đối tượng hàm giữ tên: funName .
2.2 Biểu thức hàm được đặt tên ủng hộ
Khi một biểu thức hàm const fun = function () {} được gán cho một biến, một số công cụ suy ra tên hàm từ biến này. Tuy nhiên, các lệnh gọi lại có thể được chuyển dưới dạng biểu thức hàm ẩn danh mà không cần lưu trữ vào các biến: do đó, công cụ không thể xác định tên của nó.
Việc ưu tiên các chức năng được đặt tên và tránh các chức năng ẩn danh để đạt được các lợi ích như:
- Thông báo lỗi và ngăn xếp cuộc gọi hiển thị thông tin chi tiết hơn khi sử dụng tên hàm
- Gỡ lỗi thoải mái hơn bằng cách giảm số lượng tên ngăn xếp ẩn danh
- Tên hàm nói lên chức năng của hàm
- Bạn có thể truy cập hàm bên trong phạm vi của nó để thực hiện các cuộc gọi đệ quy hoặc tách người nghe sự kiện
3. Định nghĩa phương pháp viết tắt
Định nghĩa phương thức viết tắt có thể được sử dụng trong khai báo phương thức trên các lớp đối tượng và lớp ES2015. Bạn có thể xác định chúng bằng cách sử dụng tên hàm, theo sau là danh sách các tham số trong một cặp dấu ngoặc đơn
(para1, ..., paramN)và một cặp dấu ngoặc nhọn{...}phân tách các câu lệnh nội dung.
Ví dụ sau sử dụng định nghĩa phương thức viết tắt trong một đối tượng theo nghĩa đen:
javascript
const
bộ sưu tập
= {
các mặt hàng:
[],
thêm
(...
các mục < / p>
) {
cái này
.
mặt hàng
.
đẩy
(...
mặt hàng
);
< / p>
},
lấy
(
chỉ mục
) {
trả về
< p>này
.
các mục
[
chỉ mục
] ;
}
};
bộ sưu tập
.
thêm
(
'C'
,
'Java'
,
'PHP'
);
< p class = "line">bộ sưu tập
.
lấy
(
1
)
// = & gt; 'Java'
Các phương thức add () và get () trong đối tượng collection được xác định bằng cách sử dụng định nghĩa phương thức ngắn. Các phương thức này được gọi như thường lệ: collection.add (...) và collection.get (...) .
Cách tiếp cận ngắn gọn của định nghĩa phương thức có một số lợi ích so với định nghĩa thuộc tính truyền thống với tên, dấu hai chấm : và biểu thức hàm add: function (...) {...} < / code>:
- Cú pháp ngắn hơn sẽ dễ hiểu hơn
- Định nghĩa phương thức viết tắt tạo ra một hàm được đặt tên, trái ngược với một biểu thức hàm. Nó rất hữu ích để gỡ lỗi.
Cú pháp class yêu cầu khai báo phương thức ở dạng ngắn:
javascript
lớp
Dấu sao
{
hàm tạo
(< / p>
tên
) {
cái này
.
tên
=
tên
;
< p>}
getMessage
(
tin nhắn
) {
trả lại
cái này
.
tên
+
tin nhắn
;
}
}
const
mặt trời
=
mới
Ngôi sao
(
'Mặt trời'
);
mặt trời
.
getMessage
(
'đang tỏa sáng'
)
// = & gt; 'Mặt trời đang tỏa sáng'
3.1 Tên và phương thức thuộc tính được tính toán
ECMAScript 2015 bổ sung một tính năng thú vị: tên thuộc tính được tính toán trong các lớp và lớp đối tượng.
Các thuộc tính được tính toán sử dụng một cú pháp khác một chút [methodName] () {...} , vì vậy định nghĩa phương thức trông theo cách này:
javascript
const
addMethod
=
'thêm'
,
getMethod
=
'get'
;
const
bộ sưu tập
= {
các mục:
[],
[
addMethod
< p>] (...các mục
) {
này
.
các mục
.
đẩy
(...
mặt hàng
);
},
[
getMethod
] (
chỉ mục
) {
trả lại
cái này
.
các mặt hàng
[
index
];
}
};
bộ sưu tập
[
addMethod
] (
'C'
,
'Java'
,
'PHP '
);
bộ sưu tập
[
getMethod
] (
1
)
// = & gt; 'Java'
[addMethod] (...) {...} và [getMethod] (...) {...} là các khai báo phương thức viết tắt có tính toán tên tài sản.
4. Hàm mũi tên
Hàm mũi tên được xác định bằng cách sử dụng một cặp dấu ngoặc đơn chứa danh sách các tham số
(param1, param2, ..., paramN), theo sau là một mũi tên béo= & gt;và một cặp dấu ngoặc nhọn{...}phân tách các câu lệnh nội dung.
Khi hàm mũi tên chỉ có một tham số, có thể bỏ qua cặp dấu ngoặc đơn. Khi nó chứa một câu lệnh duy nhất, bạn cũng có thể bỏ qua dấu ngoặc nhọn.
Hãy xem cách sử dụng cơ bản của hàm mũi tên:
javascript
const
absValue
= (
số
)
= & gt;
{< / p>
nếu
(
số
& lt ;
0
) {
trả lại
< p> -số
;
}
trả về
số
;
}
absValue
(-
10
);
// = & gt; 10
absValue
(
5
);
// = & gt; 5
absValue là một hàm mũi tên tính giá trị tuyệt đối của một số.
Hàm được khai báo bằng cách sử dụng một mũi tên béo có các thuộc tính sau:
- Hàm mũi tên không tạo ngữ cảnh thực thi của nó, nhưng sử dụng nó một cách từ vựng (trái với biểu thức hàm hoặc khai báo hàm, tạo ra
thisriêng tùy thuộc vào lệnh gọi) - Chức năng mũi tên là ẩn danh. Tuy nhiên, engine có thể suy ra tên của nó từ biến giữ hàm.
-
Đối tượngkhông khả dụng trong hàm mũi tên (trái với các kiểu khai báo khác cung cấp đối tượngđối số). Tuy nhiên, bạn có thể thoải mái sử dụng các tham số còn lại(... params).
Các đối số
4.1 Tính minh bạch của ngữ cảnh
this từ khóa là một khía cạnh khó hiểu của JavaScript (xem bài viết này để được giải thích chi tiết về this ).
Vì các hàm tạo ngữ cảnh thực thi riêng nên thường rất khó phát hiện giá trị này .
ECMAScript 2015 cải thiện việc sử dụng this bằng cách giới thiệu hàm mũi tên, hàm này lấy ngữ cảnh từ vựng (hoặc đơn giản là sử dụng this từ phạm vi bên ngoài tức thì). Điều này rất hay vì bạn không phải sử dụng .bind (this) hoặc lưu trữ ngữ cảnh var self = this khi một hàm cần ngữ cảnh kèm theo.
Hãy xem this được kế thừa như thế nào từ hàm bên ngoài:
javascript
lớp
Các số
{
hàm tạo
(< / p>
mảng
) {
cái này
.
mảng
=
mảng
;
< p>}
addNumber
(
số
) {
nếu
(
số
! ==
không xác định
) {
cái này
.
mảng
.
đẩy
(
số
);
}
trả về
(
số
)
= & gt;
{
bảng điều khiển
.
nhật ký
(< / p>
this
===
numberObject
);
// = & gt; true
cái này
.
mảng
.
đẩy
(
số
);
};
}
}
const
numberObject
=
new
Các số
([]);
const
addMethod
=
numberObject
.
addNumber
() ;
addMethod
(
1 < / p>
);
addMethod
(
5
);
bảng điều khiển
.
nhật ký
(
numberObject
.
mảng
);
// = & gt; [1, 5]
Lớp
Numbers chứa một mảng số và cung cấp phương thức addNumber () để chèn các số mới.
Khi addNumber () được gọi mà không có đối số, một bao đóng được trả về cho phép chèn số. Đóng này là một hàm mũi tên có đối tượng this dưới dạng numberObject vì ngữ cảnh được lấy từ vựng từ phương thức addNumbers () .
Nếu không có chức năng mũi tên, bạn phải sửa ngữ cảnh theo cách thủ công. Nó có nghĩa là sử dụng các giải pháp thay thế như phương thức .bind () :
javascript
// ...
< / p>
Hàm trả về
(
< p> số) {
bảng điều khiển
.
log
(
this
===
numberObject
);
// = & gt; true
cái này
.
mảng
.
đẩy
(
số
);
}.
ràng buộc
(
cái này
);
// ...
hoặc lưu trữ ngữ cảnh vào một biến được phân tách var self = this :
javascript
// ...
< / p>
const
tự
=
< p> cái này;
trả lại
< p> hàm
(
số
) {
bảng điều khiển
.
nhật ký
(
bản thân
===
numberObject
);
// = & gt; true
tự
.
mảng
.
đẩy
(
số
);
};
// ...
Tính trong suốt của ngữ cảnh có thể được sử dụng khi bạn muốn giữ nguyên này , lấy từ ngữ cảnh kèm theo.
4.2 Các lệnh gọi lại ngắn
Khi tạo một hàm mũi tên, các cặp dấu ngoặc đơn và dấu ngoặc nhọn là tùy chọn cho một tham số đơn và câu lệnh nội dung đơn. Điều này giúp tạo ra các hàm gọi lại rất ngắn.
Hãy tạo một hàm tìm xem một mảng có chứa 0 :
javascript
const
số
= [
1
,
5
,
10
,
0
];
số
.
một số
(
mặt hàng
= & gt; < / p>
mục
===
0
);
// = & gt; đúng
item = & gt; item === 0 là một hàm mũi tên trông đơn giản.
Lưu ý rằng các hàm mũi tên ngắn lồng nhau rất khó đọc. Cách thuận tiện để sử dụng biểu mẫu hàm mũi tên ngắn nhất là một lệnh gọi lại (không lồng nhau).
Nếu cần, hãy sử dụng cú pháp mở rộng của các hàm mũi tên khi viết các hàm mũi tên lồng nhau. Nó chỉ dễ đọc hơn.
5. Chức năng máy phát điện
Hàm trình tạo trong JavaScript trả về một đối tượng Trình tạo . Cú pháp của nó tương tự như biểu thức hàm, khai báo hàm hoặc khai báo phương thức, chỉ khác là nó yêu cầu ký tự dấu sao * .
Hàm trình tạo có thể được khai báo ở các dạng sau:
a. Biểu mẫu khai báo hàm function * & lt; name & gt; () :
javascript
hàm *
< / p>
indexGenerator
() {
var
chỉ mục
=
0
;
< p>
trong khi
(
đúng
) {
năng suất
chỉ số
++;
}
}
const
g
=
indexGenerator
();
bảng điều khiển
.
nhật ký
(
g
.
tiếp theo
().
giá trị
);
// = & gt; 0
bảng điều khiển
.
nhật ký
(
< p> g.
tiếp theo
().
giá trị
);
// = & gt; 1
b. Biểu thức hàm function * () :
javascript
const
indexGenerator
=
hàm *
() {
< p>
hãy để
chỉ mục
=
0
; < / p>
trong khi
(
đúng
) {
lợi nhuận
chỉ số
++;
}
};
const
g
=
indexGenerator
< p> ();
bảng điều khiển
.
log
(< /p>
g
.
tiếp theo
().
giá trị
);
// = & gt; 0
bảng điều khiển
.
nhật ký
(
< p> g.
tiếp theo
().
giá trị
);
// = & gt; 1
c. Biểu mẫu định nghĩa phương thức viết tắt * & lt; name & gt; () :
javascript
const
obj
= {
*
indexGenerator
() {
var
chỉ mục
=
0
;
< p> while
(
true
) {
năng suất
chỉ số
++;
}
}
}
const
g
=
obj
. < / p>
indexGenerator
();
bảng điều khiển
.
< p> log(
g
.
tiếp theo
().
< p> giá trị);
// = & gt; 0
bảng điều khiển
.
nhật ký
(
< p> g.
tiếp theo
().
giá trị
);
// = & gt; 1
Trong cả 3 trường hợp, hàm trình tạo trả về đối tượng trình tạo g . Sau đó g được sử dụng để tạo một chuỗi các số tăng dần.
6. Một điều nữa: Chức năng mới
Trong JavaScript, các hàm là các đối tượng hạng nhất - một hàm là một đối tượng thông thường của loại function .
Các cách khai báo được mô tả ở trên tạo ra cùng một kiểu đối tượng hàm. Hãy xem một ví dụ:
javascript
hàm
sum1
(
a
,
b
) {
trả lại
a
+
b
;
}
< p> const
sum2
=
hàm
(
a
,
b
) {
quay lại
a
+
b
;
< p class = "line">}
const
sum3
= (
a
,
b
)
= & gt;
a
+
b
;
bảng điều khiển
.
log
(
typeof
< p> sum1
===
'hàm'
);
// = & gt; true
bảng điều khiển
.
nhật ký
(
< p> typeof
sum2
===
'function'
);
// = & gt; true
bảng điều khiển
.
nhật ký
(
< p> typeof
sum3
===
'function'
);
// = & gt; đúng
Loại đối tượng hàm có một hàm tạo: Function .
Khi Function được gọi như một hàm tạo new Function (arg1, arg2, ..., argN, bodyString) , một hàm mới sẽ được tạo. Các đối số arg1, args2, ..., argN được truyền cho hàm tạo trở thành tên tham số cho hàm mới và đối số cuối cùng bodyString được sử dụng làm mã nội dung hàm. < / p>
Hãy tạo một hàm tính tổng hai số:
javascript
const
numberA
=
'numberA'
,
numberB
=
'numberB'
;
const
sumFunction
=
mới
Chức năng
(
numberA
,
sốB
,
'trả về numberA + numberB '
);
sumFunction
< p> (10
,
15
)
// = & gt; 25
sumFunction được tạo bằng lệnh gọi hàm tạo Function có các tham số numberA và numberB và nội dung trả về sốA + sốB .
Các hàm được tạo theo cách này không có quyền truy cập vào phạm vi hiện tại, do đó không thể tạo các bao đóng. Chúng luôn được tạo ra trên phạm vi toàn cầu.
Một ứng dụng có thể có của Hàm mới là tốt hơn để truy cập đối tượng toàn cục trong trình duyệt hoặc tập lệnh NodeJS:
javascript
(
hàm < / p>
() {
'sử dụng nghiêm ngặt'
;
const
toàn cầu
=
mới
Hàm
(
'return this'
) ();
bảng điều khiển
.
nhật ký
(
toàn cầu
===
cửa sổ
);
// = & gt; true < / p>
bảng điều khiển
.
log
(
cửa sổ này
===
);
// = & gt; false
}) ();
Hãy nhớ rằng các hàm hầu như không bao giờ phải được khai báo bằng cách sử dụng new Function () . Vì phần thân hàm được đánh giá trong thời gian chạy, phương pháp này kế thừa nhiều vấn đề về sử dụng eval () : rủi ro bảo mật, gỡ lỗi khó hơn, không có cách nào để áp dụng tối ưu hóa công cụ, không có trình chỉnh sửa tự động hoàn thành.
7. Cuối cùng, cách nào tốt hơn?
Không có người chiến thắng hay kẻ thua cuộc. Quyết định chọn loại khai báo nào tùy thuộc vào tình huống.
Tuy nhiên, có một số quy tắc mà bạn có thể tuân theo trong các tình huống phổ biến.
Nếu hàm sử dụng this từ hàm bao quanh, thì hàm mũi tên là một giải pháp tốt. Khi hàm gọi lại có một câu lệnh ngắn, hàm mũi tên cũng là một lựa chọn tốt vì nó tạo ra mã ngắn và nhẹ.
Để có cú pháp ngắn gọn hơn khi khai báo các phương thức trên các đối tượng, nên khai báo phương thức viết tắt.
new Function không nên sử dụng cách khai báo các hàm thông thường. Chủ yếu là vì nó mở ra các rủi ro bảo mật tiềm ẩn, không cho phép mã tự động hoàn thành trong trình chỉnh sửa và làm mất khả năng tối ưu hóa công cụ.
Bạn thích các hàm mũi tên hay biểu thức hàm? Hãy cho tôi biết lý do tại sao trong một bình luận bên dưới!
Xem thêm những thông tin liên quan đến chủ đề khai báo hàm trong js
Bài 12: Khai báo và sử dụng hàm trong JavaScript
- Tác giả: Hiệp Nguyễn Văn
- Ngày đăng: 2019-09-12
- Đánh giá: 4 ⭐ ( 6580 lượt đánh giá )
- Khớp với kết quả tìm kiếm:
Các cách khai báo hàm trong JavaScript
- Tác giả: viblo.asia
- Đánh giá: 4 ⭐ ( 9424 lượt đánh giá )
- Khớp với kết quả tìm kiếm: 1. Function Declaration
Hàm trong JavaScript
- Tác giả: hocjavascript.net
- Đánh giá: 3 ⭐ ( 9087 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Hàm trong JavaScript là một khối lệnh (bao gồm nhiều câu lệnh) được sử dụng để thực hiện một công việc nhất định. Chẳng hạn,
Hàm (function) trong JavaScript
- Tác giả: viettuts.vn
- Đánh giá: 3 ⭐ ( 4425 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Hàm (function) trong JavaScript là gì? là một chương trình con được thiết kế để thực hiện một công việc cụ thể. Hàm trong JavaScript được thực thi khi
Bài 2: Biến và khai báo biến trong javascript
- Tác giả: cunghocweb.com
- Đánh giá: 5 ⭐ ( 3264 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Chúng ta có ba cách khai báo biến. Thứ nhất là dùng từ khóa var, thứ hai là dùng từ khóa const, và cuối cùng là từ khóa let. Tùy vào từng trường hợp mà chọn
Return trong JavaScript và cách trả giá trị từ hàm
- Tác giả: laptrinhcanban.com
- Đánh giá: 3 ⭐ ( 2729 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Hướng dẫn cách dùng return trong JavaScript. Bạn sẽ học được khái niệm Return là gì trong JavaScript, cách dùng return để trả về giá trị trong hàm JavaScript, cách return nhiều giá trị trong javascrip
Các cách khai báo biến trong Javascript
- Tác giả: mylop.edu.vn
- Đánh giá: 4 ⭐ ( 1481 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Trong bài này ta sẽ tìm hiểu cách khai báo biến trong Javascript bằng 3 từ khóa (var – let – const), đồng thời học thêm cách dùng hàm document.write() để in
Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình