Javascript 中的闭包 - 初学者问题

Question

我阅读了无数关于闭包的文章，但我仍在为之苦苦挣扎。也许有人可以向我解释为什么该功能无法按预期工作。

let counter = (key) => {
  let counter = 10;
  if (key === 'milk') {
    ++counter;
  }
  if (key === 'bread') {
    --counter;
  }
  return function() {
    console.log(counter)
  }
}

let shopping = counter();
shopping('milk'); //  why not 11
shopping('milk'); //  12
shopping('bread'); //  11 
shopping('bread'); //  10

对我来说，它应该始终根据参数递增或递减计数器，因为当前状态（计数器）保存在购物变量中。但是，现在的输出始终是 10。

Answer 1

从你调用 shopping 的方式来看，你似乎想给它传递一个参数，并且你希望计数器变量随之改变。

事实是，您已经在外部函数上实现了这个逻辑，而不是在 returned 函数上实现它。

因此，为了让它像您希望的那样工作，您需要在 returned 函数中移动参数和逻辑：

let counter = () => {
  let counter = 10;

  return function(key) {
    if (key === 'milk') {
      ++counter;
    }
    if (key === 'bread') {
      --counter;
    }
    console.log(counter);
  }
}

let shopping = counter();
shopping('milk');
shopping('milk');
shopping('bread');
shopping('bread');

备注：通过给两个不同的变量赋予相同的名称，你让事情变得更难解释：counter。当您选择不同的名称时，可读性会提高。

Answer 2

首先key参数应该属于返回函数而不属于上层函数还有自增自减的条件

let counter = () => {
    let counter = 10;
    return function(key) {
        if(key === 'milk') {
            ++counter;
        } else if(key === 'bread') {
            --counter;
        }
        console.log(counter);
    }
}

let shopping = counter();
shopping('milk');           //  11
shopping('milk');           //  12
shopping('bread');          //  11 
shopping('bread');          //  10

Answer 3

 let shopping = counter();

您调用 counter 并且不传递任何参数。 key 未定义。 if 语句均未触发。

 shopping('milk');

您调用 shopping，它是 返回的 函数 counter，看起来像这样：

function(){
    console.log(counter)
}

当您向它传递一个参数时，它不会做任何事情。它只是记录计数器的当前值。

闭包的唯一用途是保护 counter 变量。

函数所做的一切 else 是逻辑你需要运行每次调用返回的函数，所以一切else 应该在那个返回的函数中。

let counter = () => {
  let counter = 10;

  return function(key) {
    if (key === 'milk') {
      ++counter;
    }
    if (key === 'bread') {
      --counter;
    }
    console.log(counter)
  }
}

let shopping = counter();
shopping('milk');
shopping('milk');
shopping('bread');
shopping('bread');

Javascript 中的闭包 - 初学者问题

Closures in Javascript - beginner question

javascript

closures