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 this khi 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 tượng

  • đối số (hoặc bị thiếu trong một hàm mũi tên)

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 = ).

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 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 name giữ 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 () 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 (...) 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] (...) {...} [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 this riê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.
  • Các đối số

  • Đối tượng khô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) .

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 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 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

Xem Thêm  How to write unit tests in JavaScript with Jest - isinteger javascript

By ads_php