函数式编程是一个复杂的话题，本文仅从getter/setter方法和链式调用两个方面，介绍D3.js源码中的一些函数式编程思想。

先看一段代码

function ExampleWidget (style) {
    const instance = {};
    let title;
    instance.render = function () {
        const header = document.createElement("h1");
        header.innerText = title;
        document.body.appendChild(header);
        return instance;
    }
    instance.title = function (t) {
        if (arguments.length) {
            title = t;
            return instance;
        }
        else return title;
    }
    return instance;
}

const widget = ExampleWidget();

// setting
widget.title('D3 Functional-Programming');

// getting
console.log(widget.title());

// method chaining (链式调用)
widget.title('D3 Functional-Programming').render();

getter/setter方法

先说用法，当我们调用widget.title()的时候，我们调用的是getter，当我们调用widget.title('D3 Functional-Programming')的时候，我们调用的是setter。

那么D3是怎样实现这样的方法的呢？

在第10-17行这段代码中，函数通过判断有无参数来确定当前是getting还是setting。当参数个数为0的时候，D3认为这是一个getting，所以它把title的值返回回去。当参数的个数不为0的时候，D3认为这是一个setting，所以它把参数的值赋给内部变量title。

链式调用

我们在实例代码的第28行，完成了一个链式调用，连续调用了title('D3 Functional-Programming')和render()两个方法。

实现这样的链式调用非常简单，只需要在函数实现的最后一行，return当前实例就可以了。（第8行、第13行）

实例的可执行代码：github.com/dongqiaogon…