Tại sao tôi có thể sử dụng hàm trước khi được xác định trong JavaScript?

Question

Mã này luôn luôn làm việc, thậm chí trong các trình duyệt khác nhau:

function fooCheck() { 
    alert(internalFoo()); // We are using internalFoo() here... 

    return internalFoo(); // And here, even though it has not been defined... 

    function internalFoo() { return true; } //...until here! 
} 

fooCheck(); 

tôi không thể tìm thấy một tài liệu tham khảo duy nhất để lý do tại sao nó phải làm việc, mặc dù. Lần đầu tiên tôi thấy điều này trong ghi chú trình bày của John Resig, nhưng nó chỉ được đề cập đến. Không có lời giải thích nào hay ở đâu cho vấn đề đó.

Ai đó có thể làm sáng tỏ tôi không?

Answer 1

Tuyên bố function là phép thuật và khiến mã định danh của nó bị ràng buộc trước bất kỳ thứ gì trong khối mã * được thực thi.

Điều này khác với một bài tập có biểu thức function, được đánh giá theo thứ tự từ trên xuống bình thường.

Nếu bạn đã thay đổi ví dụ để nói:

var internalFoo = function() { return true; }; 

nó sẽ ngừng làm việc.

Khai báo hàm là hoàn toàn tách biệt với biểu thức hàm, mặc dù chúng trông gần như giống hệt nhau và có thể không rõ ràng trong một số trường hợp.

Điều này được ghi lại trong ECMAScript standard, phần 10.1.3. Thật không may ECMA-262 không phải là một tài liệu rất dễ đọc ngay cả theo tiêu chuẩn tiêu chuẩn!

*: hàm chứa, khối, mô-đun hoặc tập lệnh.

Answer 2

Tôi chỉ sử dụng JavaScript một chút. Tôi không chắc chắn nếu điều này sẽ giúp đỡ, nhưng có vẻ rất giống với những gì bạn đang nói về và có thể đưa ra một số cái nhìn sâu sắc:

http://www.dustindiaz.com/javascript-function-declaration-ambiguity/

Answer 3

Một số ngôn ngữ có yêu cầu rằng mã nhận dạng phải được xác định trước khi sử dụng. Một lý do cho điều này là trình biên dịch sử dụng một pass đơn trên sourcecode.

Nhưng nếu có nhiều vé (hoặc một số séc được hoãn lại), bạn hoàn toàn có thể sống mà không có yêu cầu đó. Trong trường hợp này, mã có thể được đọc đầu tiên (và diễn giải) và sau đó các liên kết được thiết lập.

Answer 4

Nội dung của hàm "internalFoo" cần phải đi đâu đó tại thời gian phân tích cú pháp, do đó khi mã được đọc (a.k.a phân tích cú pháp) của trình thông dịch JS, cấu trúc dữ liệu cho hàm được tạo và tên được gán.

Chỉ sau, sau đó mã được chạy, JavaScript thực sự cố gắng để tìm hiểu xem "internalFoo" tồn tại và nó là gì và liệu nó có thể được gọi vv

Answer 5

Trình duyệt đọc HTML của bạn từ đầu đến cuối và có thể thực thi nó khi nó được đọc và phân tích thành các khối thực thi (các khai báo biến, các định nghĩa hàm, vv) Nhưng tại bất kỳ thời điểm nào cũng chỉ có thể sử dụng những gì đã được định nghĩa trong html trước thời điểm đó. Điều này khác với các ngữ cảnh lập trình khác mà biên dịch tất cả mã nguồn của bạn, liên kết nó với bất kỳ thư viện nào bạn cần, và xây dựng một mô-đun thực thi, tại đó bắt đầu thực hiện điểm.

Bạn có thể xác định các hàm tham chiếu đến các mục (biến, hàm khác, v.v.) được xác định thêm, nhưng bạn không thể thực thi các hàm đó cho đến khi tất cả các phần có sẵn.

Khi bạn làm quen với JavaScript, bạn sẽ nhận thức sâu sắc về nhu cầu viết những thứ theo đúng trình tự.

Sửa đổi: Để xác nhận câu trả lời được chấp nhận (ở trên), hãy sử dụng Firebug để bước qua phần tập lệnh của trang web. Bạn sẽ thấy nó bỏ qua từ hàm này sang hàm khác, chỉ truy cập vào dòng đầu tiên, trước khi nó thực thi bất kỳ mã nào.

Answer 6

Đối với lý do tương tự sau đây sẽ luôn đặt foo trong không gian tên toàn cầu:

if (test condition) { 
    var foo; 
} 

Answer 7

Nó được gọi là cẩu - Gọi (gọi là) một hàm trước nơi mà nó đã được xác định.

Hai loại khác nhau của các chức năng mà tôi muốn viết về là:

Biểu Chức năng & giảm tốc Chức năng

1. Chức năng Biểu hiện:

   Một biểu hiện chức năng có thể được lưu trữ trong một biến nên họ không cần tên hàm. Chúng cũng sẽ được đặt tên như một hàm ẩn danh (một hàm không có tên).

   Để gọi (được gọi), họ luôn cần sử dụng tên biến số . Những loại chức năng này sẽ không hoạt động nếu các cuộc gọi trước khi nó được xác định có nghĩa là Hoisting không xảy ra ở đây. Chúng ta luôn phải định nghĩa hàm biểu thức trước và sau đó gọi nó.

   let lastName = function (family) { 
   console.log("My last name is " + family); 
   }; 
   let x = lastName("Lopez"); 
   

   Đây là cách bạn có thể viết trong ECMAScript   6:

   lastName = (family) => console.log("My last name is " + family); 
   
   x = lastName("Lopez"); 
   

2. giảm tốc Chức năng:

   Các hàm được khai báo với cú pháp sau đây không thực hiện ngay lập tức. Chúng được "lưu lại để sử dụng sau này" và sẽ được thực thi sau này, khi chúng được gọi (được gọi). Các loại chức năng này hoạt động nếu bạn gọi chúng TRƯỚC KHI hoặc SAU nơi chúng đã được xác định. Nếu bạn gọi một hàm giảm tốc trước khi nó được xác định - Hoisting - hoạt động đúng.

   function Name(name) { 
       console.log("My cat's name is " + name); 
   } 
   Name("Chloe"); 
   

   Treo dụ:

   Name("Chloe"); 
   function Name(name) { 
       console.log("My cat's name is " + name); 
   }