试图理解javascript代码

trying to understand javascript code

本文关键字：javascript 代码      更新时间：2023-09-26

我正试图通过弄脏双手来理解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;
  });

有人能用更简单的语言把它分解给我吗。感谢

此代码：

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，也可能是其他对象）
  • 等等

最后将CCD_ 18返回的值分配给CCD_。

关于第二段代码：

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约定，force的on函数可能用于注册事件处理程序—在这种情况下用于CCD_ 22事件。事件处理程序是匿名函数：

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事件属性的对象。在outer的主体中，我们看到了另一个匿名函数：nodes.forEach的参数。让我们将第二个匿名函数称为"inner"。这里的forEach函数很可能是标准的forEach迭代器函数，它是所有JavaScript数组的属性；它将一个函数作为参数，并依次调用数组中每个元素的函数，传递数组元素和元素索引。Inner实际上是闭包的一个例子：函数体引用变量k，该变量被定义为outer的局部变量。

JavaScript在某些方面与C++相似，但在某些方面却有根本的不同。除非你知道相似之处从哪里开始，否则你的C++背景可能会让你在编码（和代码阅读）工作中误入歧途。我强烈推荐介绍性论文"重新介绍JavaScript"。它涵盖了该语言的所有主要功能，应该有助于澄清C++和JavaScript的相似之处和不同之处。

这：

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)返回的对象调用，依此类推

相关文章：