JavaScript - bind() 方法

bind() 方法

JavaScript 中的 bind() 方法建立一個新的函式，該函式具有指定的 this 值和可選引數，而不會立即呼叫原始函式。它通常用於設定函式的上下文 (this) 並部分應用引數。此方法用於將特定物件繫結到通用函式。

要理解 bind() 方法，我們首先應該理解“this”關鍵字。在 JavaScript（以及其他程式語言）中，this 是一個特殊的關鍵字，用於在函式內部引用呼叫該函式的物件。this 的值取決於函式的呼叫方式，並且 this 的行為在不同的上下文中可能會有所不同。

語法

JavaScript function bind() 方法的語法如下：

functionToBind.bind(thisValue, arg1, arg2, ...);

這裡 functionToBind 是要設定其 this 值和引數的原始函式。

引數

thisValue - 當呼叫新函式時，應作為 this 引數傳遞的值。
arg1, arg2, ... - 當呼叫新函式時將被固定的（部分應用的）可選引數。這些引數將被附加到提供給新函式的引數之前。

現在讓我們透過一些程式示例來了解 Function bind() 方法。

不使用 bind() 方法

在這裡，我們將建立一個通用函式 greet()，它只是列印到控制檯。我們建立一個名為 person 的常量物件並賦予它一些屬性，即 name，然後我們透過傳遞訊息“Hello”來呼叫函式 greet。

<html>
<body>
   <div id = "demo"> </div>
   <script>
	  const output = document.getElementById("demo");
      function greet(message) {
         output.innerHTML = message + ', ' + this.name;    
	  }
      const person = { name: 'John Doe' };
      greet('Hello'); 
   </script>      
</body>
</html>

輸出

Hello,

在此示例中，當直接呼叫 greet 函式而不使用 bind 時，this 值不會顯式設定，導致使用未定義或全域性物件（在瀏覽器環境中為 window）作為 this。

使用 bind() 方法

為了克服前面程式碼中無法獲取任何關聯名稱的問題，我們使用 bind 函式將物件 person 繫結到函式 greet。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      // Original function
      function greet(message) {
         output.innerHTML = message + ', ' + this.name;
      }
      // Object with a 'name' property
      const person = { name: 'John Doe' };    
      const greetPerson = greet.bind(person, 'Hello');
      greetPerson();
   </script>      
</body>
</html>

輸出

Hello, John Doe

bind 方法能夠建立一個新的函式 greetPerson，其中 this 值已顯式設定為 person 物件，並且引數“Hello”也像前面的程式碼一樣被部分應用。

使用 bind() 可確保函式在所需的上下文中執行，從而避免與 JavaScript 函式中 this 的預設行為相關的問題。

示例：將不同的物件繫結到同一個函式

我們建立了三個具有點 x 和 y 座標的物件，建立了一個函式 printVal 來列印點的座標到控制檯。bind 方法將點繫結到 printVal 函式，並列印每個點的 x、y 座標。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const points1 = { 
         X: 100, 
         Y: 100
      } 
      const points2 = { 
         X: 200, 
         Y: 100
      } 

      const points3 = { 
         X: 350, 
         Y: 400
      } 
      function printVal() { 
         output.innerHTML += "Coordinates: "+this.X + "," + this.Y + "<br>"; 
      } 

      const printFunc2 = printVal.bind(points1); 
      printFunc2(); 

      const printFunc3 = printVal.bind(points2); 
      printFunc3(); 

      const printFunc4 = printVal.bind(points3); 
      printFunc4(); 
   </script>      
</body>
</html>

輸出

Coordinates: 100,100
Coordinates: 200,100
Coordinates: 350,400

示例：設定函式引數的預設值

這是一個新的場景，我們利用 bind 函式來預定義引數。multiply() 函式只需接受 2 個輸入並返回它們的乘積。透過使用 bind() 方法，我們可以根據需要將任何引數設定為預設值。

在下面的示例中，它將變數 y 設定為 2，因此在透過僅一個引數即 x 為 5 呼叫該函式時，它將乘以預設的 2 並返回 5x2=10 的輸出。

<html>
<body>
   <div id = "output"> </div>
   <script>
      // Original function with parameters
      function multiply(x, y) {
         return x * y;
      }

      // Using bind to preset the first parameter
      const multiplyByTwo = multiply.bind(null, 2);
      
      // Calling the bound function with only the second parameter
      document.getElementById("output").innerHTML= multiplyByTwo(5); 
   </script>      
</body>
</html>

輸出

需要注意的是，bind 方法會建立一個並返回一個新的函式，而不會修改原始函式。同一個函式可以被重複使用，並且可以使其適應不同的使用場景，而無需實際修改。

列印頁面