如何在 JavaScript 中调用带有部分前置参数的函数?
JavaScript 函数可以带参数或不带参数调用。带参数调用时,函数将使用作为值传入的参数执行。不带参数调用时,函数将不传入任何参数执行。
在某些情况下,希望调用带有部分参数(但不是全部参数)的函数。这可以通过使用 Function.prototype.apply 方法或使用扩展运算符 (...) 来实现。
使用 Function.prototype.apply 方法
Function.prototype.apply 方法可用于调用带有部分参数(但不是全部参数)的函数。 apply 方法的第一个参数是 this 值,后面跟着要传递给函数的参数数组。
语法
apply(thisArg) apply(thisArg, argsArray)
参数
thisArg − 为函数调用提供的 this 值。如果函数未处于严格模式,则 null 和 undefined 将被替换为全局值,原始值将转换为对象。
argsArray 可选 − xAn 类似数组的对象,指定应使用哪个函数调用的参数,如果不应向函数提供任何参数,则为 null 或 undefined。
示例
例如,考虑以下代码 −
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <div id="result"></div> <script> function add(a, b) { return a + b; } document.getElementById("result").innerHTML = add.apply(null, [1, 2]) </script> </body> </html>
此值作为第一个参数传递给 apply 方法,参数数组作为第二个参数传递。使用 this 值和作为值传递的参数调用函数。
Function.prototype.apply 方法是一种使用部分参数(但不是全部参数)调用函数的强大方法。通过使用 apply 方法,您可以避免对要传递给函数的参数进行硬编码。
使用扩展运算符
扩展运算符 (...) 可用于使用部分参数(但不是全部参数)调用函数。
扩展运算符将参数数组扩展为单个参数。
例如,请考虑以下代码 -
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <div id="result"></div> <script> function add(a, b) { return a + b; } document.getElementById("result").innerHTML = add(...[1, 2]) </script> </body> </html>
参数数组扩展为单个参数,并使用这些参数调用函数。
使用 bind() 方法
Function.prototype.bind() 方法可用于创建一个新函数,该函数使用一些前置参数调用原始函数。
例如,考虑以下代码−
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <div id="result"></div> <script> function add(a, b) { return a + b; } const add1 = add.bind(null, 1); document.getElementById("result").innerHTML = add1(2) </script> </body> </html>
bind 方法的第一个参数是 this 值,其余参数在调用函数时用作该函数的参数。在此示例中,this 值传递为 null,值 1 作为 add 函数的第一个参数传递。
bind 方法返回一个新函数,该函数使用给定的参数调用。在此示例中,新函数使用值 2 调用,函数 add 使用值 1 和 2 调用。
JavaScript 函数可以带参数或不带参数调用。在某些情况下,希望使用部分参数(但不是全部参数)调用函数。这可以通过使用 Function.prototype.apply 方法或使用扩展运算符 (...) 来实现。