d3的可重用組件對象？

Question

當我們調用

var xAxis = d3.svg.axis() 

是我們實例化一個新的軸對象？我知道axis組件是作爲閉包來實現的，但如果它也是一個對象，我很困惑。

我的問題也適用於Mike的文章Towards Reusable Charts，特別是this section的末尾。用他的模式，如果我們這樣做

var myChart = chart().width(720).height(80); 

是myChart對象？如果不是，那是什麼？做這個和做什麼之間有什麼區別var myChart = new chart();？

Answer 1

是的，我們每次都在實例化一個新的軸對象。這個實例是一個function，它在JavaScript中是一個一級對象;這意味着，你可以像這樣分配屬性給它：

function myFunc() {} 
myFunc.foo = "bar"; 

myFunc();// This is possible (naturally) 
console.log(myFunc.foo);// ...and this is valid too 

如果包裹在一個函數上面的代碼：

function giveMeMyFunc() { 
    function myFunc() {} 
    return myFunc; 
} 

然後調用每次

myFuncInstance = giveMeMyFunc(); 

你得到一個myFunc（它也是Object）的新實例，因爲每次調用都會聲明一次myFunc。

所以我們已經確定函數也是一個對象。而且，當一個函數返回另一個函數時，就好像它正在返回一個Object的新實例，但也是一個函數，你仍然可以調用myFuncInstance()。

爲驅動點回家，或許回答您的其他問題，我們可以看看d3.svg.axis()實際上是如何實現的（從D3源代碼鬆散摘錄）：

d3.svg.axis = function() { 
    /* Some variables here, which essentially are instance properties (protected through closure) */ 
    var scale = 123; 
    ... 

    /* This is a function, but since JavaScript functions are first-class objects, it's essentially an instance. */ 
    /* Each time (the outer) `d3.svg.axis()` is called, (the inner) `axis` function is a unique – not a shared – object. */ 
    function axis() { 
    /* This is where the work of drawing the axis takes place, but won't get 
     called until the axis is used (see below). */ 
    } 

    /* Since the inner function `axis` is also an object, the following is an instance method */ 
    axis.scale = function(x) { 
    scale = x;// here we're setting `scale`, which is basically an instance property 

    // returning `axis` – a.k.a. our instance – is what enables method chaining: myAxis.scale(5).orient("left") 
    return axis; 
    } 

    /* More methods here, like `axis.scale` above */ 

    /* Last line is very important: */ 
    /* This is where the newly created instance is return. Remember from */ 
    /* above, `axis` is a function, but it's an Object too, and it has the */ 
    /* methods we've just applied to it. */ 
    return axis; 
} 


/* Given all that, the line below returns an instance of `axis` (the inner function), 
    which has more methods applied to it. */ 
myAxis = d3.svg.axis(); 

最後，由於實例myAxis也是一個函數，你可以調用它。這就是D3的確，當你申請一個軸選擇：

d3.select('.x_axis').call(myAxis); 

D3將調用myAxis函數體，這是在function axis() {}以上定義會做的實際繪製的元素裏面的一些SVG東西所有的工作，匹配'.x_axis'選擇器。