Xác định một hàm trong một hàm khác trong JavaScript

function foo(a) {
    if (/* Some condition */) {
        // perform task 1
        // perform task 3
    }
    else {
        // perform task 2
        // perform task 3
    }
}

Tôi có một hàm có cấu trúc tương tự như ở trên. Tôi muốn tóm tắt nhiệm vụ 3 thành một hàm, bar()nhưng tôi muốn giới hạn quyền truy cập của hàm này chỉ trong phạm vi của foo(a).

Để đạt được những gì tôi muốn, có đúng không khi thay đổi những điều sau đây?

function foo(a) {
    function bar() {
        // Perform task 3
    }

    if (/* Some condition */) {
        // Perform task 1
        bar();
    }
    else {
        // Perform task 2
        bar();
    }
}

Nếu điều trên là chính xác, có bar()được xác định lại mỗi khi foo(a)được gọi không? (Tôi đang lo lắng về việc lãng phí tài nguyên CPU ở đây.)

Vâng, những gì bạn có ở đó là đúng. Một số lưu ý:

• barđược tạo trên mọi lệnh gọi hàm foo, nhưng:
  • Trên các trình duyệt hiện đại, đây là một quá trình rất nhanh. (Một số công cụ có thể chỉ biên dịch mã cho nó một lần và sau đó sử dụng lại mã đó với ngữ cảnh khác nhau mỗi lần; công cụ V8 của Google [trong Chrome và các nơi khác] thực hiện điều đó trong hầu hết các trường hợp.)
  • Và tùy thuộc vào những gì barlàm, một số công cụ có thể xác định rằng chúng có thể "nội tuyến" nó, loại bỏ hoàn toàn lệnh gọi hàm. V8 làm được điều này và tôi chắc chắn rằng nó không phải là động cơ duy nhất làm được điều này. Đương nhiên họ chỉ có thể làm điều này nếu nó không thay đổi hành vi của mã.
• Tác động hiệu suất, nếu có, của việc bartạo ra mọi lúc sẽ rất khác nhau giữa các công cụ JavaScript. Nếu barlà tầm thường, nó sẽ thay đổi từ không thể phát hiện đến khá nhỏ. Nếu bạn không gọi foohàng nghìn lần liên tiếp (ví dụ: từ một mousemovetrình xử lý), tôi sẽ không lo lắng về điều đó. Ngay cả khi bạn là như vậy, tôi chỉ lo lắng về điều đó nếu tôi gặp sự cố trên động cơ chậm hơn. Đây là một trường hợp thử nghiệm liên quan đến các hoạt động DOM , cho thấy rằng có một tác động, nhưng một tác động nhỏ (có thể bị rửa trôi bởi nội dung DOM). Đây là một trường hợp thử nghiệm thực hiện tính toán thuần túy cho thấy tác động cao hơn nhiều, nhưng thành thật mà nói, chúng ta đang nói về sự khác biệt của micro giây vì thậm chí mức tăng 92% đối với thứ gì đó có vigiây để xảy ra vẫn còn rất, rất nhanh. Cho đến khi / trừ khi bạn nhìn thấy một tác động trong thế giới thực, đó không phải là điều đáng lo ngại.
• barsẽ chỉ có thể truy cập được từ bên trong hàm và nó có quyền truy cập vào tất cả các biến và đối số cho lệnh gọi hàm đó. Điều này làm cho nó trở thành một mẫu rất tiện dụng.
• Lưu ý rằng vì bạn đã sử dụng khai báo hàm nên bạn đặt khai báo ở đâu (trên cùng, dưới cùng hoặc giữa - miễn là nó ở cấp trên cùng của hàm, không phải bên trong câu lệnh điều khiển luồng, đó là lỗi cú pháp), nó được xác định trước khi chạy dòng đầu tiên của mã bước khôn ngoan.

Đây là những gì đóng cửa.

var foo = (function () {
  function bar() {
    // perform task 3
  };

  function innerfoo (a) { 
    if (/* some cond */ ) {
      // perform task 1
      bar();
    }
    else {
      // perform task 2
      bar();
    }
  }
  return innerfoo;
})();

Innerfoo (một bao đóng) giữ một tham chiếu đến thanh và chỉ một tham chiếu đến innerfoo được trả về từ một hàm ẩn danh chỉ được gọi một lần để tạo bao đóng.

Thanh không thể truy cập từ bên ngoài theo cách này.

var foo = (function () {
    var bar = function () {
        // perform task 3
    }
    return function (a) {

        if (/*some condition*/) {
            // perform task 1
            bar();
        }
        else {
            // perform task 2
            bar();
        }
    };
}());

Việc đóng lại giữ phạm vi bar()chứa, trả về hàm mới từ hàm ẩn danh tự thực thi sẽ đặt phạm vi hiển thị nhiều hơn foo(). Hàm tự thực thi ẩn danh được chạy chính xác một lần, vì vậy chỉ có một bar()phiên bản duy nhất và mỗi lần thực thi foo()sẽ sử dụng nó.

Vâng, điều đó hoạt động tốt.

Hàm bên trong không được tạo lại mỗi khi bạn nhập hàm bên ngoài, nhưng nó được gán lại.

Nếu bạn kiểm tra mã này:

function test() {

    function demo() { alert('1'); }

    demo();
    demo = function() { alert('2'); };
    demo();

}

test();
test();

nó sẽ hiển thị 1, 2, 1, 2, không 1, 2, 2, 2.

Tôi đã tạo một jsperf để kiểm tra các biểu thức hàm lồng nhau so với không lồng nhau và biểu thức hàm so với khai báo hàm và tôi rất ngạc nhiên khi thấy rằng các trường hợp kiểm tra lồng nhau hoạt động nhanh hơn 20 lần so với không lồng ghép. (Tôi đã đoán trước sự khác biệt ngược lại hoặc không đáng kể).

https://jsperf.com/nested-functions-vs-not-nested-2/1

Đây là trên Chrome 76, macOS.