javascript - 如何使用可调用方法创建对象，但我也可以像函数一样调用它

Question

我经常使用 d3.js，最近一直在思考它们的 LinearScale 函数。

它允许您执行以下操作:

var x = d3.scaleLinear()
    .domain([10, 130])
    .range([0, 960]);

x(20); // 80
x(50); // 320

据我所知:

• x 保存 d3.scaleLinear() 的返回值
• x 是类似对象的，因为我们可以调用方法“range”和“domain”
• x 也是类似函数的，因为我们可以像“x(20)”一样调用它并获取返回值

我不需要了解有关 d3 如何实现此功能的任何具体信息，d3 只是我想到的第一个允许我执行此操作的 API 示例。

我有兴趣在 JavaScript 中实现类似的东西，并且想以最简单的形式了解必要的设计模式。

我尝试查看 d3 的源代码，但有很多额外的功能，并且它分为多个文件 - 这使我很难找到我要找的东西，尤其是当我不这样做时不知道那是什么。任何帮助将不胜感激。

Answer 1

首先要注意的是，在 JavaScript 中，函数只是可以附加属性的对象，这些属性可以包含其他函数。

基本上，scaleLinear() 返回一个函数，该函数又用作 API 对象。

附加到 API 对象/函数的函数用于获取或设置由封装闭包创建的内部状态。

附加到 API 对象/函数的函数通常返回 API 实例以允许调用链接。

希望下面的示例能够阐明如何开发这样的东西。

function Greet() {
  var person = '';
  var message = 'Hello';

  var api = function () {
    console.log(message + ' ' + person);
    return api;
  };

  api.person = function (value) {
    // if nothing is passed into function act as getter
    if (!arguments.length) return person; 
    // otherwise set the value
    person = value;
    // return the api function for more chaining or calling
    return api;
  };

  api.message = function (value) {
    if (!arguments.length) return message; 
    message = value;
    return api;
  };

  return api;
}
    
var greeter = Greet().person('Daniel');

greeter();  // 'Hello Daniel'

greeter.message('Whaddup').person('Martha')(); // 'Whaddup Martha'

我刚刚记得 Mike Bostock(d3 的创建者)写了一篇博客文章，他在其中详细介绍了该模式: https://bost.ocks.org/mike/chart/