javascript - 带有 setter/getter 的构造函数返回字符串

Question

我刚刚从我的雇主那里收到了一个需要完成的快速 JS 测试，但我迷路了。关于最后一个问题，他要求我执行以下操作:

Using JavaScript, implement a 'chart' function according to the example:

Note: '===' is used below to communicate the expected output.

var myBarChart = chart(); 
myBarChart.type() === 'line';
myBarChart.type('bar'); 
myBarChart.type() === 'bar'; 
myBarChart() === "Here's your bar chart!";

var myScatterChart = chart().type('scatter'); 
myScatterChart() === "Here's your scatter chart!";

我说了我做不到，但这是无效的，还是我完全失去了理智？它不是构造函数，因为它没有新参数。而且它也不会返回一个字符串，如果它接受任何 setter 的话。还是我错了？

请回答我的问题，因为我现在感觉很蠢。

Answer 1

这里有很多概念。

首先，你可以有一个返回另一个函数的函数:

 function chart() {
      var fn = function() {
          console.log('You are calling the anonymous function!')
      };

      return fn;
 }

 let myBarChart = chart();
 myBarChart();

其次，您可以将附加字段附加到函数。 (如果您来自 C# 或 Java 背景可能会感觉不对，但您可以在 Javascript 中做到这一点)。

 function chart() {
      var fn = function() {
          console.log('You are calling the anonymous function!')
      };

      // Attaching a new field
      fn.type = function() {
          console.log('Now you are calling the type function!');
      }
      return fn;
 }

 let myBarChart = chart();
 myBarChart.type();

第三，有一个 pattern在 javascript 中，您使用与 getter 或 setter 相同的函数。在 Software Engineering Stackexchange site 上进行了讨论.

function chart() {
     var typeValue = 'line';

     var fn = function() {
         return (typeValue === 'line' ? "Here's your line chart!" : "Here's your bar chart!");
     };


     fn.type = function(value) {
          if(typeof(value) !== 'undefined') {
             typeValue = value;
             return fn;
          } else {
             return typeValue;
          }
     };

     return fn;
}

let myChart = chart();
myChart.type() === 'line';
myChart() === "Here's your line chart!";
let setterReturnValue = myChart.type('bar');
setterReturnValue === myChart;
myChart() === "Here's your bar chart!";

他提供的示例演示了您可以使用这三个概念做什么。