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 - 访问layout。{/ li>的d3属性
.force() - 调用属force属性的d3.layout函数。在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;
  });

在这里，我们看到anonymous function的一个示例（实际上是两个）。根据通常的JavaScript约定，on的{{1}}函数可能用于注册事件处理程序 - 在本例中为force事件。事件处理程序是匿名函数：

"tick"

出于解释的目的，我们将此函数称为“外部”。它需要一个参数，我猜是一个包含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; }的参数。让我们称这第二个匿名函数为“内部”。这里的nodes.forEach函数很可能是标准forEach迭代器函数，它是所有JavaScript数组的属性;它接受一个函数作为参数，并按顺序调用数组中每个元素的函数，传递数组元素和元素索引。 Inner实际上是闭包的一个例子：函数体引用变量forEach，它被定义为外部的局部变量。

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)，依此类推。

试图理解JavaScript代码

2 个答案: