試圖理解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() - 調用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約定， 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;
}

出於解釋的目的，我們將此函數稱為“外部”。 它需要一個參數，我猜是一個包含tick事件屬性的對象。 在外部的主體中，我們看到另一個匿名函數： nodes.forEach的參數。 讓我們稱這第二個匿名函數為“內部”。 該forEach這里的功能很可能是標准forEach迭代函數，所有的JavaScript陣列的性能; 它接受一個函數作為參數，並按順序調用數組中每個元素的函數，傳遞數組元素和元素索引。 Inner實際上是一個閉包的例子：函數體引用變量k ，它被定義為外部的局部變量。

JavaScript在某些方面就像C ++一樣，並且在某些方面根本不同。 除非你知道相似之處在哪里結束並且差異開始，否則你的C ++背景會讓你在編碼（和代碼閱讀）工作中嚴重誤入歧途。 我強烈推薦介紹性文章“重新介紹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() ）。

這稱為方法鏈。 每個連續函數都被調用為前面函數返回值的方法。

因此，在從d3.layout.force()返回的對象上調用方法.nodes(nodes) ，並在從.nodes(nodes)返回的對象上調用方法.links([]) .nodes(nodes) ，依此類推。