javascript - 如何在javascript方法链中填充输入参数？

Question

我想真正地了解javascript工作原理的详细信息。在方法链接期间，有时一个方法返回到另一个具有命名输入参数的方法。

例如，在D3中，模式如下所示:

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text(function(d) { return d; }); //what does this d refer to? How is it filled?

在jquery中，模式如下所示:

$.ajax({
  ...
})
  .done(function( data ) {  //what does this data refer to? How is it filled? 

我从实际编码中知道这些输入参数的名称可以是任何东西。但是归档输入参数的数据从何而来？它是否仅引用链中先前方法返回的数据？

Answer 1

有两个不同的主题，因此我将分别进行解释:

使用函数作为方法参数

首先，更正:您提供的示例不是“一个方法返回具有命名输入参数的另一个方法”的示例。它们是将函数作为另一种方法的输入参数的示例。

为了阐明这一点，我将举一个例子，其中一个函数的返回值用作另一个函数的输入。

var a = "Hello ",
    b = "World!";

var c = a.concat( b.toUpperCase() ); //c = "Hello WORLD!"

为了创建c，按顺序进行以下操作:

浏览器开始解析concat方法，但需要弄清楚给它提供什么参数。

该参数包含一个方法调用，因此将执行toUpperCase()的b方法，并返回字符串“WORLD!”。

返回的字符串成为a的concat()方法的参数，该参数现在可以执行。

就concat()方法而言，结果与您编写c = a.concat("WORLD!")相同–不在乎字符串“WORLD!”。是由另一个函数创建的。

您可以知道，由于函数名末尾的括号，b.toUpperCase()的返回值是作为参数而不是函数本身传递的。函数名称后面的括号告诉浏览器要执行该函数，只要浏览器已确定该函数的任何参数的值即可。如果没有括号，该函数将被视为任何其他对象，并且可以作为参数或变量传递，而无需实际执行任何操作。

当未执行的功能对象用作另一个功能的参数时，发生的事情完全取决于第二个功能内部的指令。如果将函数对象传递给console.log()，则该函数的字符串表示形式将被打印到控制台，而无需执行传递的函数。但是，大多数接受另一个函数作为输入的方法都旨在使用指定的参数来调用该函数。

一个示例是数组的map()方法。 map方法创建一个新数组，其中每个元素都是在原始数组的相应元素上运行映射功能的结果。

var stringArray = ["1", "2!", "3.0", "?"];

var numberArray = stringArray.map(parseFloat); //numberArray = [1, 2, 3, NaN]

函数parseFloat()是一个内置函数，它接受一个字符串并尝试从中找出一个数字。请注意，当我将其传递给map函数时，我只是将其作为变量名传递，而不是在结尾加上括号。它由map函数执行，而map函数决定了它获取的参数。 parseFloat函数将每次调用map的结果分配给它们在结果数组中的位置。

具体来说，map函数使用三个参数执行parseFloat:数组中的元素，该元素在数组中的索引以及整个数组。 parseFloat函数仅使用一个参数，因此，第二个和第三个参数将被忽略。 (但是，如果您尝试对parseInt做相同的事情，则会得到意外的结果，因为parseInt确实使用了第二个参数-将其视为整数的基数(“基数”)。)

map函数不在乎传递的函数需要多少个参数，当然也不在乎该函数中使用了哪些变量名。如果您是自己编写map函数，则它将类似于以下内容:

Array.prototype.myMap = function(f) {

    var result = [];

    for (var i = 0, n=this.length; i<n; i++) {

         result[i] = f( this[i], i, this);
                  //call the passed-in function with three parameters
    }
    return result;
};

调用f函数并给定参数，而不知道它是什么或做什么。参数以特定顺序给出-元素，索引，数组-但未链接到任何特定参数名称。

现在，类似map方法的局限性在于，只有传递值作为参数的情况下，很少有可以直接调用的Javascript函数。大多数功能是特定对象的方法。例如，我们不能将toUpperCase方法用作map的参数，因为toUpperCase仅作为字符串对象的方法存在，并且仅作用于特定的字符串对象，而不作用于map函数可能提供的任何参数。为了将字符串数组映射为大写，您需要创建自己的函数，该函数以map函数使用它的方式工作。

var stringArray = ["hello", "world", "again"];

function myUpperCase(s, i, array) {

     return s.toUpperCase(); //call the passed-in string's method

}

var uppercaseStrings = stringArray.map( myUpperCase );
   //uppercaseStrings = ["HELLO", "WORLD", "AGAIN"]

但是，如果只使用一次myUpperCase函数，则无需单独声明它并为其命名。您可以将其直接用作匿名函数。

var stringArray = ["hello", "world", "again"];

var uppercaseStrings = stringArray.map( 
                           function(s,i,array) {
                               return s.toUpperCase();
                           }
                       );
   //uppercaseStrings still = ["HELLO", "WORLD", "AGAIN"]

开始看起来很熟悉？这是许多d3和JQuery函数使用的结构-您传入函数(作为函数名称或匿名函数)，并且d3 / JQuery方法在选择的每个元素上调用函数，并传入指定的值作为第一个，第二个甚至第三个参数。

那么参数名称呢？如您所述，它们可以是您想要的任何东西。我可以在函数中使用非常长且具有描述性的参数名称:

function myUpperCase(stringElementFromArray, indexOfStringElementInArray, ArrayContainingStrings) { 

         return stringElementFromArray.toUpperCase();
}

纯粹根据map函数传递值的顺序，传递给函数的值将是相同的。实际上，由于我从不使用index参数或array参数，因此可以将它们排除在外函数声明，只使用第一个参数。其他值仍由map传递，但将被忽略。但是，如果我想使用map传入的第二个或第三个参数，则必须为第一个参数声明一个名称，只是为了保持编号的准确性:

function indirectUpperCase (stringIDontUse, index, array) {

         return array[index].toUpperCase();
}

这就是为什么如果要在d3中使用索引号，则必须编写function(d,i){return i;}。如果只是执行function(i){return i;}，则i的值将是数据对象，因为d3函数始终将其作为第一个参数传递，无论您如何调用它。传递参数值的是外部函数。参数名称仅存在于内部函数内部。

必要的警告和异常(exception):

我说过map函数不在乎传入函数期望多少个参数。没错，但是其他外部函数可以使用传入函数的.length属性来计算期望的参数数量并相应地传递不同的参数值。

您不必为访问传递的参数值而命名函数的参数。您也可以使用该函数内的arguments列表访问它们。因此，编写大写映射函数的另一种方式是:

function noParamUpperCase() {

       return arguments[0].toUpperCase();
}

但是，请注意，如果外部函数正在使用参数数量来确定要传递给内部函数的值，则该函数似乎将不接受任何参数。

方法链接

您会注意到，我在上述任何地方都没有提到方法链接。这是因为它是一个完全独立的代码模式，恰好在d3和JQuery中也经常使用。

让我们回到第一个示例，它创建了“Hello WORLD!”。走出“Hello”和“World!”。如果您想创建“HELLO World”，该怎么办？代替？你可以做

var a = "Hello ",
    b = "World!";

var c = a.toUpperCase().concat( b ); //c = "HELLO World!"

创建c时发生的第一件事是调用了a.toUpperCase()方法。该方法返回一个字符串(“HELLO”)，该字符串像其他所有字符串一样具有.concat()方法。因此，现在将.concat(b)作为返回的字符串的方法而不是原始字符串a的方法来调用。结果是b被连接到a大写版本的末尾:“HELLO World!”。

在这种情况下，返回值是与起始对象相同类型的新对象。在其他情况下，它可能是完全不同的数据类型。

var numberArray = [5, 15];

var stringArray = numberArray.toString().split(","); //stringArray = ["5", "15"]

我们从一个数字数组[5,15]开始。我们调用该数组的toString()方法，该方法会生成该数组的格式正确的字符串版本:“5,15”。现在，该字符串具有其所有可用的字符串方法，包括.split()，该字符串将字符串拆分为围绕指定拆分字符(在本例中为逗号)的子字符串数组。

您可以将其称为方法链接的一种，调用另一个方法返回的值的方法。但是，当使用方法链描述Javascript库的功能时，关键方面是方法的返回值与调用该方法的对象相同。

所以当你这样做

d3.select("body").style("background", "green");

d3.select("body")方法创建一个d3选择对象。该对象具有style()方法。如果使用样式方法设置样式，则实际上并不需要任何信息。它本来可以设计成根本不返回任何值。而是返回该方法所属的对象(this对象)。因此，您现在可以调用该对象的另一个方法。或者，您可以将其分配给变量。或两者。

var body = d3.select("body").style("background", "green")
                            .style("max-width", "20em");

但是，您始终必须注意不会返回同一对象的方法。例如，在许多d3代码示例中，您会看到

var svg = d3.select("svg").attr("height", "200")
                          .attr("width", "200")
                          .append("g")
                          .attr("transform", "translate(20,20)");

现在，方法append("g")不会返回对<svg>元素的相同选择。它返回一个由<g>元素组成的新选择，然后为其提供一个transform属性。分配给变量svg的值是链中的最后一个返回值。因此，在以后的代码中，您将必须记住，变量svg实际上并不引用<svg>元素的选择，而是引用<g>。我感到困惑，因此我尽量避免使用变量名svg进行选择，而该选择实际上不是<svg>元素。

当然，那些d3 .attr()或.style()方法中的任何一个都可以将函数而不是字符串作为第二个参数。但这不会改变方法链接的工作方式。