什麼時候需要使用bind

有時候在撰寫程式的時候，特別是設計表單事件時，都有可能會放置function的時候，如果對觀念上有誤解，很有可能會造成呼叫後發生錯誤。以下就來介紹一下設計事件需要注意的問題。

一般的Function使用

以下是我們時常使用Function的方式，一開始initialForm被定義之後，當這個Function被呼叫的同時，就會馬上被執行。

function initialForm(customList) {
  const customElement = document.createElement('li');
  customList.append(customElement);
}

initialForm(customList);

搭配事件使用的Function

請查看以下簡單的範例

function sayHelloToEveryone() {
  alert('Hello');
}

greetButton.addEventListener('click', sayHelloToEveryone);

讓我們注意這行

greetButton.addEventListener('click', sayHelloToEveryone);

你可能會問，那可不可以寫成這樣？

greetButton.addEventListener('click', sayHelloToEveryone());

答案是不！絕對不會這樣使用Function的。
有發現什麼特別的地方嗎？
當你在右邊加入了括弧之後，就表示你希望在編譯這行程式碼的同時，也要馬上執行這個Function
但是這不是我們希望做到的效果，我們通常加入事件，都是希望使用者點擊按鈕才會呼叫這個Function

那…你可能會想再問，如果我直接加上括弧這樣寫會發生什麼問題？
以上面的範例來說，你會得到undefined的錯誤訊息，因為function並不會會傳任何資訊

有參數的Function

很好，相信你已經知道上面的觀念了。
那你可能會問，如果Function長這樣呢？

function sayHelloToEveryone(name) {
  alert('Hello ', name);
}

如果需要使用一般的方式，函數是否有辦法知道需要使用的參數呢？

greetButton.addEventListener('click', sayHelloToEveryone);

答案是，不可以，但是還是有其他解決方式可以使用。

解決方案1 - on the fly

這邊產生一個匿名函數，避免執行的同時，馬上執行Function

greetButton.addEventListener('click', function() {
  sayHelloToEveryone('yy');
});

解決方案2 - built into / preconfigure

透過bind，可以預先準備未來執行的Function綁定在這個事件。
第一個參數通常會放this，但是以目前這個Function，我們並不需要使用到this，因此使用null。
第二個參數之後，就接你設計的函數所需的參數即可。

greetButton.addEventListener('click', sayHelloToEveryone.bind(null, 'yy'));

小結

相信到這邊應該多少對JS有一些了解了，如果還不了解的話，可以找一些案例去練習看看。