如何在 JavaScript 中呼叫帶有附加部分引數的函式？

在 JavaScript 中，可以透過向函式傳遞引數來呼叫函式。但是，有時需要使用一些引數已經填充好的引數來呼叫函式。這可以使用一種稱為部分函式應用的技術來完成。

什麼是部分函式應用？

部分函式應用是一種透過“預先填充”現有函式的一些引數來建立新函式的方法。當您想建立一個與現有函式類似的新函式，但一些引數已經設定好時，這很有用。

例如，假設您有一個計算矩形面積的函式。此函式採用兩個引數——矩形的寬度和高度。

現在假設您想建立一個計算正方形面積的新函式。這個新函式將類似於現有函式，但它只需要一個引數——正方形的邊長。

這就是部分函式應用的用武之地。您可以使用部分函式應用來建立一個新函式，它是現有函式的“部分”版本。這個新函式將具有已經設定的第一個引數（寬度），並且它只需要第二個引數（高度）。

如何在 JavaScript 中使用部分函式應用？

在 JavaScript 中使用部分函式應用有幾種不同的方法。

方法 1

最常見的方法是使用 bind() 方法。

bind() 方法是從現有函式建立新函式的一種方法。bind() 方法採用兩個引數——要繫結的函式以及要繫結到函式的第一個引數的值。

例如，假設您有以下函式：

function add(a, b) { 
   return a + b; 
}

您可以使用 bind() 方法建立一個第一個引數 (a) 已經設定的新函式。

var add5 = add.bind(null, 5);

現在可以這樣使用 add5 函式：

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function add(a, b) {
         return a + b;
      }
      var add5 = add.bind(null, 5);
      document.getElementById("result").innerHTML = add5(10)
   </script>
</body>
</html>

如您所見，第一個引數 (5) 已經設定，第二個引數 (10) 傳遞給 add5 函式。

方法 2

使用部分函式應用的另一種方法是建立一個函式，該函式採用現有函式和一個值，並返回一個具有現有函式第一個引數已經設定的新函式。

例如，您可以編寫這樣的函式：

function bind(fn, val) { 
   return function() { 
      return fn.apply(null, 
      [val].concat(Array.prototype.slice.call(arguments)));
   };
}

此函式採用現有函式和一個值，並返回一個將值繫結到現有函式第一個引數的新函式。

例如，您可以使用 bind() 函式建立這樣的新函式：

var add5 = bind(add, 5);

現在可以這樣使用 add5 函式：

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function add(a, b) {
         return a + b;
      }
      function bind(fn, val) {
         return function() {
            return fn.apply(null, [val].concat(Array.prototype.slice.call(arguments)));
         };
      }
      var add5 = add.bind(add, 5);
      document.getElementById("result").innerHTML = add5(10)
   </script>
</body>
</html>

如您所見，第一個引數 (5) 已經設定，第二個引數 (10) 傳遞給 add5 函式。

部分函式應用是一種用於從現有函式建立新函式的有用技術。它可以用來建立與現有函式類似的函式，但一些引數已經設定好。

更新於：2022年9月14日

361 次瀏覽

啟動您的 職業生涯

完成課程後獲得認證

開始學習
廣告