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

我试图真正理解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?

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

在jquery中，模式如下所示：

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?

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

---

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

如果我理解正确的话

这些数据指的是什么？怎么装的

你是说它是怎么工作的？这取决于调用回调的方式。例如：

function Lib() {}

Lib.prototype.text = function(callback) {
  var data = 'hello world';
  callback(data); // `data` is the first parameter
  return this; // chain
};

var lib = new Lib();

lib.text(function(data){
  console.log(data); //=> "hello world"
});

---

在d3中，d3.select（“body”）将返回某个

{search\u元素：document.body，selectAll:function，…}

，因此使用点符号可以调用上一个对象的可用函数。它可能只是返回类本身。所以所有的方法都可以用下一个点的任何顺序。但是在ajax中，必须调用一些函数，以便它们填充对象的重要参数，

done

函数使用这些参数。

d对应于前面的方法调用中由

.data（data.enter（）

首先传入的数据集中的单个元素。发生的事情是，d3隐式地在映射到数据的相应dom元素上循环，从而形成了数据驱动文档或d3的整个概念

也就是说，对于数据中的每个元素，当调用

selectAll（）

时，您应该希望看到附加到dom中的元素数量与数据集中的元素数量相同。因此，当您点击

.attr（）

调用时，与dom中的元素相对应的单个数据被传递到函数中。当你阅读的时候

.append("rect").attr("width",function(datum){})...

您应该将其作为绑定到所选内容的整个数据集中一个元素的单个迭代来阅读

我有点不确定我是否回答了你的问题，因为这似乎是关于声明式/函数式编程以及方法链接的混合问题。以上答案与d3的声明性/功能性方式有关。下面的答案是关于方法链接的

这里有一个很好的例子，它提供了Mike Bostock在其精彩文章中概述的方法链接的更多见解

我建议您通读这里（）找到的D3API，以进一步了解每个函数的操作。例如selection.filter此外，我强烈建议您加入一个玩具示例，例如您给出的示例，以进一步了解正在发生的事情

关于d3可重用图表的方法链接

function SomeChart()
{
    var someProperty = "default value of some sort";

    function chartObject()
    {
    }

    chartObject.setSomeProperty(propertyValue)
    { 
     if (!arguments.length) return someProperty;
     someProperty = property;
     return chartObject;
    }

    return chartObject;
}  



var chart = SomehChart();

现在的图表是什么

chart = chart.setSomeProperty("some special value");

chart = chart.setSomeProperty();

现在的图表是什么

chart = chart.setSomeProperty("some special value");

chart = chart.setSomeProperty();

现在的图表是什么

chart = chart.setSomeProperty("some special value");

chart = chart.setSomeProperty();

以下两者之间有什么区别

var chart = SomeChart().setSomeProperty("some special value");

及

---

答案是除了

chart=chart.setSomeProperty（）之外，它们都是相同的
两个不同的主题，因此我将分别解释它们：

使用函数作为方法参数
首先，更正：您给出的示例不是“一个方法返回到具有命名输入参数的另一个方法”的示例。它们是将一个函数作为另一个方法的输入参数的示例

为了澄清，我将给出一个示例，其中一个函数的返回值用作另一个函数的输入

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

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

要创建
c
，按顺序执行以下操作：

浏览器开始解析
concat
方法，但需要确定给它什么参数
该参数包含一个方法调用，因此执行
b
的
toUpperCase（）
方法，返回字符串“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
函数分配到它们在结果数组中的位置

具体来说，映射函数
function noParamUpperCase() {

       return arguments[0].toUpperCase();
}

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

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

var numberArray = [5, 15];

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

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

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

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