Làm thế nào để giữ các biểu thức hàm JavaScript trong bộ nhớ?

Question

let sayBye = function () {
    console.log(`Bye`);
}

let bye = sayBye;   
sayBye = null;    // X

bye();            // Y

Trước khi hỏi câu hỏi này, tôi đã tìm kiếm trên google và tôi tìm thấy bài đăng này .

Sau đó, tôi nghĩ, trước dòng X, cấu trúc tương tự như thế này:

sayBye ---------------                                              
                      |      
                      |  => function() {....}
                      |
bye-------------------

Sau dòng x, tôi nghĩ nó như thế này:

sayBye                        MEMORY                                      
                            
                      |  => function() {....}
                      |
bye-------------------

Nhưng khi tôi viết lời chào tạm biệt trong các công cụ dành cho nhà phát triển Firefox, tôi đã thấy điều này

Làm thế nào là nó có thể? Khi tôi viết let bye = sayBye;sayBye có bị trùng lặp không?

let sayBye = function () {
    console.log(`Bye`);
}

let bye = sayBye;   
sayBye = null;    // X

bye();            // Y

console.log(bye);

Answer 1

Từ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name#Inferred_function_names:

Các biến và phương thức có thể suy ra tên của một hàm ẩn danh từ vị trí cú pháp của nó (tính năng mới trong ECMAScript 2015).

Chrome và Firefox đều cung cấp "sayBye"khi in bye.name.

---

Từ các thử nghiệm cá nhân, bảng điều khiển Chrome hiển thị bye.toString()khi yêu cầu bye, trong khi Firefox hiển thị đầu ra tùy chỉnh của họ, nơi họ hiển thị tên suy luận của hàm (điều này thực sự có ý nghĩa, vì biết tên thường giúp gỡ lỗi).

Answer 2

Các hàm là đối tượng nên phép gán x = y không được sao chép. Tôi đã thử Nodejs này mà tôi nhận được

Bye
[Function: sayBye]

Nếu bạn không đặt tên, hàm JS sẽ tự động thêm tên cho nó. Trong ES6, bạn có thể kiểm tra tên của hàm bằng cách sử dụng myFunction.name , tức là 'tên' là thuộc tính của một đối tượng hàm. Điều quan trọng là đây là thuộc tính chỉ đọc . Thực hành tốt là sử dụng constthay vì lettrong khi sử dụng biểu thức hàm. Ngoài ra, nếu có thể, hãy thử đặt tên cho việc gỡ lỗi hàm rất dễ dàng trên ngăn xếp cuộc gọi

Answer 3

Bạn đang bối rối bởi tên của chức năng.

Những thứ trong ký ức diễn ra giống hệt như bạn nghĩ.

Tuy nhiên, hàm không có tên rõ ràng, vì vậy trình duyệt đã đặt một tên ngầm cho hàm, đó là tên của thuộc tính biến hoặc đối tượng mà nó được gán lần đầu , trong trường hợp này sayBye,.

Sau đó, nó được gán cho một biến khác, nhưng tên không thay đổi.

Bạn có thể thấy điều này nếu bạn đặt một cái tên rõ ràng cho nó:

//  Explicit name ----vvvv
let sayBye = function myFn() {
    console.log(`Bye`);
}

let bye = sayBye;   
sayBye = null;    // X

bye();            // Y

console.log(bye);