试图理解的JavaScript代码

Question

我想通过让我的手脏语言来理解JavaScript代码..我的背景主要是Python和C++。

所以我正想通过这个代码在这里

http://bl.ocks.org/mbostock/1021841

var force = d3.layout.force() 
.nodes(nodes) 
.links([]) 
.size([w, h]) 
.start(); 

我猜测 “”代表一种方法..但是哪个对象？ 和我有很难理解这种错综复杂的函数（方法？）

force.on("tick", function(e) { 

    // Push different nodes in different directions for clustering. 
    var k = 6 * e.alpha; 
    nodes.forEach(function(o, i) { 
    o.y += i & 1 ? k : -k; 
    o.x += i & 2 ? k : -k; 
    }); 

有人能打破它给我简单的语言。 由于

Answer 1

此代码：

var force = d3.layout.force() 
.nodes(nodes) 
.links([]) 
.size([w, h]) 
.start(); 

应在基本相同的阅读，你会读它，如果它是C++（除var关键字;在C++中，你不得不声明一个特殊类型force） 。像C++一样，空白（大部分）是微不足道的。每个.表示一个属性访问。 （与C++不同，JavaScript对象不区分字段和方法;一切都属于属性，如果它是一个函数属性，那么可以通过在带括号的圆括号—后面加上括号中的函数参数来调用它）。在这里：

• d3.layout - 访问d3的layout财产。
• .force() - 调用属于d3.layout的属性force。在force内部，d3.layout将可用作关键字this。
• .nodes(nodes) - 调用nodes功能是什么对象是由调用返回的force()的属性（也许d3.layout，也许是别的东西）。
• 等

最后分配给force由start()返回的值。

关于第二个代码段：

force.on("tick", function(e) { 

    // Push different nodes in different directions for clustering. 
    var k = 6 * e.alpha; 
    nodes.forEach(function(o, i) { 
    o.y += i & 1 ? k : -k; 
    o.x += i & 2 ? k : -k; 
    }); 

在这里，我们看到一个的例子（2，实际上）。基于通常的JavaScript约定，force的on函数可能用于在此情况下为"tick"事件注册事件处理程序—。事件处理程序是匿名函数：

function(e) { 
    // Push different nodes in different directions for clustering. 
    var k = 6 * e.alpha; 
    nodes.forEach(function(o, i) { 
    o.y += i & 1 ? k : -k; 
    o.x += i & 2 ? k : -k; 
} 

为了便于说明，我们将此函数称为“outer”。它需要一个参数，我猜想它是一个包含tick事件属性的对象。在外部体中，我们看到另一个匿名函数：参数为nodes.forEach。我们称之为第二个匿名函数“inner”。这里的forEach函数很可能是标准的forEach迭代器函数，它是所有JavaScript数组的属性;它将一个函数作为参数，并按顺序调用数组中每个元素的函数，传递数组元素和元素索引。 Inner实际上是一个关闭的示例：函数主体引用变量k，它被定义为外部的局部变量。

JavaScript在某些方面就像C++一样，在某些方面有着根本性的不同。除非你知道相似之处的结束和差异的开始，否则你的C++背景会导致你在编码（和代码阅读）方面陷入严重的误区。我强烈推荐介绍性论文"A re-introduction to JavaScript"。它涵盖了该语言的所有主要功能，并且应该有助于澄清C++和JavaScript如何相似以及它们有何不同。

Answer 2

此：

var force = d3.layout.force() 
.nodes(nodes) 
.links([]) 
.size([w, h]) 
.start(); 

是与此相同：

var force = d3.layout.force().nodes(nodes).links([]).size([w, h]).start(); 

可变force的值将是从在链中的最后一个方法的返回值（在这种情况下.start()）。

这被称为方法链。每个连续的函数被调用作为它之前的函数的返回值的方法。

因此，该方法.nodes(nodes)被称为是从d3.layout.force()返回和方法.links([])的呼吁对象从.nodes(nodes)等返回的对象上。