試圖理解的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)等返回的對象上。