Question

我刚接到一个快速的JS测试，从我的雇主那里完成，我迷路了。关于最后一个问题，他让我做了以下事情：

使用JavaScript，根据实现'图表'功能   例如：

注意：下面使用'==='来传达预期的输出。

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();

第三，javascript中有pattern，你使用与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!";

他提供的例子说明了你可以用这三个概念做些什么。

Answer 2

这绝对有可能。第一行var myBarChart = chart();告诉您chart是一个函数，因此您拥有：

function chart ( ) {

}

下一行myBarChart.type()告诉您chart()返回的值是一个具有type属性的对象，该属性本身就是一个返回'line'的函数。所以现在你有了：

function chart ( ) {
    return {
        type: function ( ) {
            return 'line';
        }
    }
}

下一行myBarChart.type('bar');本身并没有告诉你任何内容，但之后的行告诉我们后续调用.type()应该返回新类型，因此.type()是充当setter和getter（例如，类似于jQuery's val）。所以现在你有类似的东西：

function chart ( ) {
    var storedType = 'line';
    return {
        type: function ( newType ) {
            if ( newType )
                storedType = newType;
            else
                return storedType;
        }
    }
}

下一行myBarChart()告诉我们chart的返回值实际上需要是一个函数，而不是普通对象。该函数需要返回'Here\'s your ' + storedType + ' chart!'，并且它需要具有我们的对象之前具有的type属性。向函数添加属性的最简单方法是将该函数存储在变量中，然后添加属性。结果是：

function chart ( ) {
    var storedType = 'line';
    var func = function ( ) {
        return 'Here\'s your ' + storedType + ' chart!';
    };
    func.type = function ( newType ) {
        if ( newType )
            storedType = newType;
        else
            return storedType;
    }
    return func;
}

接下来的两行var myScatterChart = chart().type('scatter');告诉您，当使用参数调用.type时，它应该返回与调用chart()返回的函数相同的函数。这可以通过返回func或this来完成答案来完成：

function chart ( ) {
    var storedType = 'line';
    var func = function ( ) {
        return 'Here\'s your ' + storedType + ' chart!';
    };
    func.type = function ( newType ) {
        if ( newType ) {
            storedType = newType;
            return func;
        } else
            return storedType;
    }
    return func;
}

Answer 3

您需要知道函数是第一类对象。它意味着像任何其他普通对象一样，它可以具有属性。知道你可以实现这样的功能。这是一个可能的解决方案：

function chart () {
  const obj = () => `Here's your ${obj.type()} chart!`
  let __type = 'line'

  obj.type = type => {
    if (type) {
      __type = type
      return obj
    }
    return __type
  }
  return obj
}

var myBarChart = chart() - chart必须返回新功能。
myBarChart.type() === 'line' - 返回的函数必须具有type属性，这是另一个函数，它返回某种类型（line或chart）。
myBarChart.type('bar') - 用作setter时，将__type设置为新值。我们将其保留为局部变量__type。
chart返回一个函数，该函数在调用时返回一个带有类型信息的字符串。

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

3 个答案: