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

Question

I just received a quick JS test to complete from my employer, and I got lost. On the last question he asked me to do the following:

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!";

I said I can't do it, but is it invalid, or I just lost my mind completely? It isn't a constructor, as it's not having new parameter. And also it wouldn't return a string, if that would accept any Setters. Or am I wrong?

Please, answer my question, as I'm feeling dumb now.

Answer 1

There's a number of concepts at play here.

First of all, you can have a function that returns another function:

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

      return fn;
 }

 let myBarChart = chart();
 myBarChart();

Secondly, you can attach additional fields to functions. (If you come from a C# or Java background that might feel wrong, but you can do this in 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();

Thirdly, there's a pattern in javascript where you use the same function as a getter or setter. It's discussed on the 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!";

The example he provided demonstrates what you can do with these three concepts.

Answer 2

It's definitely possible. The first line var myBarChart = chart(); tells you that chart is a function, so you have:

function chart ( ) {

}

The next line myBarChart.type() tells you that the value returned by chart() is an object with a type property that is itself a function that returns 'line' . So now you have:

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

The next line myBarChart.type('bar'); doesn't tell you anything on its own, but the line after that tells us that subsequent calls to .type() should return the new type, so .type() is acting as both a setter and getter (analogous to jQuery's val , for example). So now you have something like:

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

The next line myBarChart() tells us that the return value of chart actually needed to be a function, not a plain object. That function needs to return 'Here\\'s your ' + storedType + ' chart!' and it needs to have the type property that our object had before. The easiest way to add a property to a function is to store that function in a variable and then add the property. So the result is:

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;
}

The next two line var myScatterChart = chart().type('scatter'); tells you that when .type is called with an argument, it should return the same function as was returned by calling chart() . That can be done by either returning func or this to complete the answer:

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

You need to know that functions are first class objects. It means that like any other normal object it can have properties. Knowing that you could implement this function something like this. Here is one possible solution:

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
}

1. var myBarChart = chart() - chart must return new function.

2. myBarChart.type() === 'line' - returned function must have type property which is another function, which returns some sort of type ( line or chart ).

3. myBarChart.type('bar') - when used as a setter, set __type to new value. Let's keep it as local variable __type .

4. chart returns a function which when called returns a string with type information.