從變量調用 function

Question

function makeCounter() {
  let count = 0;
  
  return function() {
    return count++;
  }
}

makeCounter() 

alert(makeCounter()) // alerts the function itself

為什么我不能像上面那樣調用 function 並使其工作？

為什么我必須先將 function 保存到這樣的變量中？

function makeCounter() {
  let count = 0;
  
  return function() {
    return count++;
  }
}

let counter = makeCounter()

counter()

alert(counter())

有什么不同？

Answer 1

當你像這樣調用makeCounter()時，它當然會被執行，但是這個 function 返回一個 function。 當關鍵字return在 function undefined中不存在時，每個 Javascript function總是返回一些東西。

因此，在您的情況下，您正在實施模塊設計模式，它允許您創建在 function 之外不可見的PRIVATE變量，在這種情況下，隱藏變量就是count 。

由於您不想多次保持計數器可用，因此 function 是執行器以產生遞增的效果。 您想返回一個 function 可以訪問該私有變量，所以部分是這樣的

function X() {
     // private data are define here
     let name = "John doe",
     let age = 52;
     
     // public data are define in the return object
     return {
         getName: () => return name,
         setName: (newName) => name = newName
     }
}

如您所見，在執行X function 后，您無法直接訪問名稱變量。 但是返回的 object 讓您可以訪問 object，它有一些有用的方法可以操作X function 中的私有數據。

So here you have define the makeCounter functon as this function need to keep track of the counter that data is same as private inside of the function so the returned function can have access to that private data so when the return function is executed the counter can be增量。

由於可以多次調用計數器，因此您必須與在變量中返回的 function 相同，因此您可以隨時調用它，並且makeCounter function 內部的counter將被更新。

 function makeCounter() { let count = 0; return function() { return count++; } } const counter = makeCounter(); console.log(counter()); // log 0 console.log(counter()); // log 1 console.log(counter()); // log 2 console.log(counter()); // log 3

但是，如果您不將返回的 function 保存在變量中，則您必須只調用一次 function 並松開對計數器的引用，並且每次調用makeCounter()()時，這將是計數器的新引用

 function makeCounter() { let count = 0; return function() { return count++; } } console.log(makeCounter()()); // log 0 console.log(makeCounter()()); // log 0 console.log(makeCounter()()); // log 0 console.log(makeCounter()()); // log 0

Answer 2

You are indeed returning a function, and you would like to invoke the returned function, so main function will create the function in return statement but it doesn't invoke, to do that functionality you should invoke the returned function hence u need to store and調用它.. 為了更清楚，請嘗試 JavaScript 中的 function typeof。

如果我錯了，請糾正我！

Answer 3

function 可能會返回 function。 據我記得，這樣的設計在當時用於創建有狀態的 function，並且仍然被轉譯器用於為舊的 Javascript 環境提供支持。

例如，如果您想創建一個 function 來返回一個數字並處理該數字以供以后調用。 function 應該返回另一個 function 來封裝你號碼的 state ，否則它無法記住之前的號碼值。

因此，話雖如此，讓我們創建一個有狀態的 function：

 let statefulFunction = () => { let number = 0; return { add(amount = 1) { number += 1; return number; } } }, statefulFunctionInstance = statefulFunction(); document.querySelector('button').addEventListener('click', event => { event.target.innerText = statefulFunctionInstance.add(); });

 <button>0</button>

我記得使用這種設計將諸如nextSlide類的功能封裝在幻燈片中或類似的東西中。 它可用於存儲 DOM 查詢和表單值等。