Chúng ta có thể chuyển hàm dưới dạng tham số trong javascript không?

Phạm vi

Bài viết này thảo luận rộng rãi về các điểm sau

• Các chức năng là công dân hạng nhất trong mô hình lập trình chức năng. Điều này được giải thích chi tiết trong bài viết này để bắt đầu với
• Làm cách nào để chuyển các hàm gọi lại mà không mắc phải các lỗi phổ biến của nhà phát triển khi chuyển các hàm dưới dạng tham số
• Từ khóa ''this'' được giải thích bằng các ví dụ và sau đó làm thế nào khi chuyển một hàm dưới dạng tham số, một người có thể mắc một lỗi rất nghiêm trọng
• Lỗ hổng phổ biến khi sử dụng từ khóa ''this'' được giải thích và cách giải quyết với các ví dụ và giải thích chi tiết

Giới thiệu

Trong lập trình chức năng, chúng tôi giả sử các chức năng là ''công dân hạng nhất''. Bằng cách đó, chúng tôi có nghĩa là các chức năng được coi là biến bình thường. Chúng có thể được gán giá trị hoặc truyền cho các hàm khác dưới dạng tham số và các hàm cũng có thể trả về các hàm

Làm cách nào chúng ta có thể chuyển một biến cho một hàm làm tham số của nó?

const func = [a] => {
    console.log[a]
}
Bây giờ, chúng ta sẽ gọi hàm này và gửi một biến làm đối số

  

const func = [a] => {
    console.log[a]
}
func[20];
Mã này rõ ràng sẽ in 20 ra bàn điều khiển. Việc gửi các hàm đến một hàm khác làm đối số cũng rất giống nhau. Chúng ta sẽ thấy điều này trong phần tiếp theo

cú pháp

Bây giờ, chúng ta hãy xem làm thế nào các chức năng có thể được chuyển sang một chức năng khác và cách chúng có thể được sử dụng bên trong chúng. Trước tiên, chúng ta hãy tạo một hàm nhận một hàm và gọi nó bên trong phần thân của nó

const callingFunction = [functionToBeCalled] => {
    functionToBeCalled[];
}
Và bây giờ, hãy tạo một chức năng khác sẽ được gọi bên trong chức năng gọi
const functionToBecalled = [] => {
    console.log["This is the function to be finally called!"];
}

const callingFunction = [functionToBeCalled] => {
    functionToBeCalled[];
}
Bây giờ, hãy gọi hàm 'callingFunction' và chuyển hàm 'functionToBeCalled' làm đối số của nó
// Passing functions as parameters in JavaScript
const callingFunction = [functionToBeCalled] => {
    functionToBeCalled[];
}

const anotherFunction = [] => {
    console.log["This is the function to be finally called!"];
}

callingFunction[anotherFunction];
đầu ra
________số 8
Như bạn mong đợi, đầu ra như hình trên
Bây giờ, hãy hiểu mã này
''anotherFunction'' là một hàm đơn giản in ra Đây là hàm được gọi cuối cùng. đến bàn điều khiển
Khi chúng ta gọi 'callingFunction' và chuyển 'anotherFunction' làm đối số, tên hàm - 'anotherFunction' được gán cho tên biến 'functionToBeCalled' bên trong phần thân của 'callingFunction'
Khi chúng ta gọi 'callingFunction' và chuyển 'anotherFunction' làm đối số, tên hàm - 'anotherFunction' được gán cho tên biến 'functionToBeCalled' bên trong phần thân của 'callingFunction'
Hãy thử bảng điều khiển ghi lại giá trị của tham số bên trong hàm gọi và xem, tôi không nói dối
Vì vậy, khi chúng ta gọi hàm - 'hàm được gọi' bên trong thân hàm, thực ra, hàm - 'hàm khác' đang được gọi

Ví dụ phổ biến về cuộc gọi lại

• Hàm được truyền dưới dạng đối số cho hàm khác được gọi là hàm gọi lại
• Một cuộc gọi lại được thông qua bằng cách chuyển tên của hàm

Khi chúng ta chuyển một hàm làm đối số cho một hàm khác, chúng ta gọi nó là gọi lại. Gọi lại đơn giản có nghĩa là chức năng sẽ được gọi sau

Tại sao chúng ta cần Callback?

• Chúng tôi có thể muốn thực hiện một số tính toán trong một số trường hợp sử dụng trước khi thực sự gọi hàm đó. Trong những trường hợp như vậy, chúng tôi gửi ''hàm sẽ được gọi sau;
• Một lý do khác nằm ở chỗ chúng ta có thể chỉ muốn thực thi một chức năng sau khi hoàn thành một tác vụ không đồng bộ. Các chức năng này cần có thời gian để phản hồi. Do đó, các hàm gọi lại được gọi sau khi chúng ta nhận được phản hồi từ hàm đầu tiên

Ghi chú. Mục tiêu chính của việc sử dụng các hàm gọi lại là xử lý tính chất không đồng bộ của các tác vụ

Hãy xem xét ví dụ này. Nếu chúng ta muốn gọi hàm 1 trong trường hợp chúng ta nhận được phản hồi cho hàm không đồng bộ và gọi hàm 2 nếu nó gặp lỗi khi thực hiện tác vụ không đồng bộ đó, chúng ta cần gọi lại ở đây

const getthisdone = async[onSuccess, onError] => {
    try{
        const response = await someAsynchronousTask[];
        if[response.status === 200]{
            onSuccess[];
        }
    }
    catch{
        onError[];
    } 
}
Do đó, bất cứ khi nào chúng tôi muốn quyết định xem một số lệnh gọi chức năng có được thực hiện hay không dựa trên một số sự kiện có khả năng xảy ra trong tương lai chứ không phải ngay lập tức, chúng tôi sử dụng các cuộc gọi lại
Đây là một ví dụ đơn giản khác để giải thích nơi có thể sử dụng lệnh gọi lại
function foo[x] {
   alert[x];
}
function bar[func] {
   func[];
}

//alerts "Hello World!" [from within bar AFTER being passed]
bar[function[]{ foo["Hello World!"] }];
0
Đây là hai chức năng đơn giản in một tin nhắn đến bàn điều khiển. Bây giờ, hãy tạo một hàm sẽ quyết định hàm nào sẽ được gọi dựa trên quyết định xem hàm nào trong số A hoặc B thực sự lớn hơn
function foo[x] {
   alert[x];
}
function bar[func] {
   func[];
}

//alerts "Hello World!" [from within bar AFTER being passed]
bar[function[]{ foo["Hello World!"] }];
1
đầu ra
Chúng ta có thể thấy cách các hàm có thể dễ dàng chuyển thành đối số cho các hàm khác giống như các biến thông thường và có thể được sử dụng bên trong thân hàm. Bằng cách này, chúng ta nói rằng các hàm này được gửi dưới dạng đối số là các cuộc gọi lại
Một số hàm thường được sử dụng có gọi lại là tham số. Chúng ta hãy xem một số trong số họ
forEach và bản đồ nhận một cuộc gọi lại làm tham số, được gọi trên mọi phần tử của trình vòng lặp [hoặc mảng]
setInterval và setTimeout nhận các hàm gọi lại sẽ được gọi sau khoảng thời gian đã đặt
sau đó và bắt gọi chức năng gọi lại sau khi lời hứa đã được giải quyết, dựa trên việc lời hứa bị từ chối hay đã được thực hiện

Truyền chức năng mà không gọi chúng

Hầu hết mọi người đều mắc một lỗi phổ biến khi chuyển các chức năng dưới dạng gọi lại bằng cách gọi chúng. Hãy nhớ rằng, chúng tôi luôn chuyển tên hàm cho một hàm khác và không gọi chúng trong khi gửi. Chức năng gọi lại thực sự được gọi bên trong một chức năng khác

Hãy xem xét đoạn mã sau

function foo[x] {
   alert[x];
}
function bar[func] {
   func[];
}

//alerts "Hello World!" [from within bar AFTER being passed]
bar[function[]{ foo["Hello World!"] }];

Trong khi chuyển chức năng 'hàm' nụ cười'', chúng tôi đã gọi nhầm chức năng ở đây

• Cú pháp đúng. chức năng gọi [cười]
• sai cú pháp. callFunction[smile[]]

Xem cửa sổ đầu ra

Chúng tôi có đầu ra SAI. Theo mã của chúng tôi, chức năng - nụ cười không nên được gọi vì 23 > 45 là sai

Cũng,

Đầu ra này đến từ dòng không. 9, trong khi chúng tôi mong đợi chức năng nụ cười được gọi ở dòng số. 6

Nhưng chúng tôi có tuyên bố nụ cười trên bảng điều khiển. Ngoài ra, bạn có thấy lỗi không - TypeError. nụ cười không phải là một chức năng?

Hãy hiểu điều này. Khi chúng ta truyền tên hàm, chúng ta truyền tham chiếu đến hàm đó. Chức năng mới sau đó có tham chiếu đến chức năng ban đầu. Sau đó, nó có thể gọi hàm bất cứ khi nào nó cảm thấy như vậy, dựa trên các quyết định của nó.

Nhưng khi chúng ta chuyển hàm được gọi, tôi. e. , như thế này - func[]. Chúng tôi đã gọi chức năng. Những gì chúng ta đang chuyển đến hàm tiếp theo không phải là tham chiếu hàm mà là đầu ra của hàm được gọi của chúng ta. Điều này chắc chắn không thể được gọi bên trong nội dung của chức năng tiếp theo. Đây chính xác là những gì thông báo lỗi đang nói

Mã chính xác cho logic này là

const func = [a] => {
    console.log[a]
}
func[20];
0
Tôi hy vọng bạn sẽ không bao giờ mắc lỗi này khi làm việc với các cuộc gọi lại

Làm cách nào để chuyển đối số đúng cách với cuộc gọi lại?

Bây giờ, nếu chúng ta cần truyền một số đối số cho hàm gọi lại trong khi nó đang được gọi bên trong hàm tiếp theo thì sao?

const func = [a] => {
    console.log[a]
}
func[20];
1
Rõ ràng, hàm gọi lại đang được gọi trong khi được truyền dưới dạng đối số. Chúng tôi vừa biết được đây là cách sai khi truyền hàm gọi lại. Sau đó, làm thế nào để chúng tôi gửi đối số đúng cách?
Bây giờ, hãy xem cái này
const func = [a] => {
    console.log[a]
}
func[20];
2
Tôi có thể làm điều này? . Tôi đang gửi tham chiếu đến một chức năng, đây không phải là vấn đề vì tôi không gọi nó. Và chức năng đó gọi nụ cười cùng với các đối số
Một ký hiệu viết tắt của văn bản giống nhau là

  

const func = [a] => {
    console.log[a]
}
func[20];
3
Điều này cũng hiệu quả vì chúng ta đang tạo một hàm ẩn danh và chuyển nó sang một hàm khác
Ghi chú. Các chức năng được tạo không có tên liên quan đến chúng là các chức năng ẩn danh

Nhận được ''điều này'' ngay khi Truyền chức năng

Hãy xem xét đoạn mã này

const func = [a] => {
    console.log[a]
}
func[20];
4
''student'' là một đối tượng đơn giản với một biến dữ liệu, được gọi là ''name'' và một hàm dữ liệu, được đặt tên là ''sayHi''. Bên trong hàm ''sayHi'', từ khóa ''this'' dùng để chỉ đối tượng gọi hàm dữ liệu này. Đây, '' này. tên'' đề cập đến giá trị của thuộc tính tên của đối tượng gọi ''sayHi'', đó là ''Rohit''
đầu ra
const func = [a] => {
    console.log[a]
}
func[20];
5
Bây giờ, nếu tôi muốn chuyển hàm ''sayHi'' sang một hàm khác dưới dạng gọi lại thì sao?. Nó vẫn sẽ chọn giá trị chính xác của '' this '' chứ? 
Nó không chọn ''Rohit'' làm giá trị của ''this. Tên''. Bây giờ, tại sao lại như vậy? . Vì lý do này, chúng tôi đã không nhận được giá trị của '' this. name'' bởi vì trong ngữ cảnh chung, ''this'' không tồn tại trong mã này
Chúng ta có thể giải quyết vấn đề này theo hai cách
Sử dụng chức năng ''liên kết''
Tạo một chức năng ẩn danh
Hãy thảo luận cả hai chi tiết
Sử dụng chức năng 'liên kết'
Hàm bind[] tạo ra một hàm liên kết, giữ lại giá trị của ''this'' trong chính nó. Vì lý do này, nếu chúng ta chuyển hàm sử dụng ''this'' làm hàm gọi lại, thì hàm đó sẽ không tìm kiếm phạm vi toàn cục nhưng sẽ có giá trị ''this'' được liên kết với nó
Xem mã và đầu ra bên dưới. Ở đây, giá trị của 'cái này. name' được chọn đúng là 'Rohit'. Điều này là do hàm hiện không xem xét phạm vi toàn cầu cho giá trị của 'this'
const func = [a] => {
    console.log[a]
}
func[20];
6
Tạo hàm ẩn danh
Đây là một cách khác để giải quyết vấn đề này. Chúng tôi có thể chuyển đổi chức năng của mình thành một chức năng ẩn danh. Nó cho chúng ta kết quả chính xác. Nhìn vào ảnh chụp màn hình giao diện điều khiển bên dưới
 

			
Tôi có thể chuyển hàm dưới dạng tham số trong JavaScript không?
			
Kết luận.  Các hàm trong mô hình lập trình hàm có thể được truyền cho các hàm khác dưới dạng tham số . Các chức năng này được gọi là gọi lại. Các hàm gọi lại có thể được truyền dưới dạng đối số bằng cách truyền trực tiếp tên của hàm và không liên quan đến chúng. 
		
			
Bạn có thể đặt một chức năng trong một tham số?
			
Một hàm có thể nhận các tham số . Đây chỉ là các giá trị bạn cung cấp cho hàm để hàm có thể thực hiện điều gì đó bằng cách sử dụng các giá trị đó. Các tham số này giống như các biến ngoại trừ các giá trị của các biến này được xác định khi chúng ta gọi hàm và không được gán giá trị trong chính hàm đó. 
		
			
Làm cách nào để viết hàm dưới dạng tham số trong js?
			
Nếu bạn muốn truyền một hàm, chỉ cần tham chiếu nó theo tên mà không có dấu ngoặc đơn.  . 
 
hàm foo[x] { cảnh báo[x]; . ".  
 
hàm foo[x] { cảnh báo[x]; . "[
 
		
			
Bạn có thể sử dụng một hàm làm tham số của một hàm khác không?
			
Hàm, giống như bất kỳ đối tượng nào khác,  có thể được truyền dưới dạng đối số cho hàm khác .