与功能工厂和关闭作斗争

Question

很久之后，我又玩了一遍纯 JS。我正在努力解决关闭问题。

任务：我正在使用函数工厂为返回的函数设置参数，然后我想调用该函数。

问题：据我了解，参数是通过引用传递的，当执行上下文从堆栈中弹出时，变量会导致未定义的内存空间。我怎样才能做到这一点？

    function changeColorConstructor(greenLimit, redLimit) {
        var greenLimit = greenLimit;
        var redLimit = redLimit;
        console.log('1. Green Limit in Constructor shell: ' + greenLimit);
        
        return function(metric) {
          var color;
    
          console.log('3. Green Limit in returned function: ' + greenLimit);
    
          switch(metric) {
            case metric >= greenLimit:
              console.log('Green');
              color = '#56C621'; // green
              break;
            case metric < greenLimit && metric > redLimit:
              console.log('Yellow');
              color = '#F2E607'; // yellow
              break;
            case metric <= redLimit:
              console.log('Red');
              color = '#C64C20'; // red
              break;
            default:
              color = '#C0C0C0'
              break;
          }
          return color;
        }
    
      }
    
      var indexColor = changeColorConstructor(5000, 10000);
      console.log('2. Returned function: ' + indexColor);
    
      console.log('4. Output from production function: ' + indexColor(5000));

Answer 1

据我所知，您的问题不在于闭包或函数工厂，而在于switch：

switch(metric) {
    case metric >= greenLimit:

此代码将metric 与metric >= greenLimit 的结果进行比较，即它的工作方式类似于if (metric == (metric >= greenLimit))。

metric >= greenLimit 是 true 或 false，因此将其与 metric 进行比较没有多大意义。

在下面的 sn-p 中，我已将您的 switch 语句替换为您想要的 if / else 级联，并删除了无意义的 var greenLimit = greenLimit; 分配。

function changeColorConstructor(greenLimit, redLimit) {
    console.log('1. Green Limit in Constructor shell: ' + greenLimit);

    return function (metric) {
        var color;

        console.log('3. Green Limit in returned function: ' + greenLimit);

        if (metric >= greenLimit) {
            console.log('Green');
            color = '#56C621'; // green
        } else if (metric < greenLimit && metric > redLimit) {
            console.log('Yellow');
            color = '#F2E607'; // yellow
        } else if (metric <= redLimit) {
            console.log('Red');
            color = '#C64C20'; // red
        } else {
            color = '#C0C0C0'
        }
        return color;
    };
}

var indexColor = changeColorConstructor(5000, 10000);
console.log('2. Returned function: ' + indexColor);

console.log('4. Output from production function: ' + indexColor(5000));

Answer 2

当我使用此 switch-case 技巧时，我能够打印出“绿色”：Switch on ranges of integers in JavaScript

基本上，将要测试的开关设置为布尔值“true”以比较案例中的范围。

    function changeColorConstructor(greenLimit, redLimit) {
        var greenLimit = greenLimit;
        var redLimit = redLimit;
        console.log('1. Green Limit in Constructor shell: ' + greenLimit);
        
        return function(metric) {
          var color;
    
          console.log('3. Green Limit in returned function: ' + greenLimit);
    
          switch(true) {
            case metric >= greenLimit:
              console.log('Green');
              color = '#56C621'; // green
              break;
            case metric < greenLimit && metric > redLimit:
              console.log('Yellow');
              color = '#F2E607'; // yellow
              break;
            case metric <= redLimit:
              console.log('Red');
              color = '#C64C20'; // red
              break;
            default:
              color = '#C0C0C0'
              break;
          }
          return color;
        }
    
      }
    
      var indexColor = changeColorConstructor(5000, 10000);
      console.log('2. Returned function: ' + indexColor);
    
      console.log('4. Output from production function: ' + indexColor(5000));