如何更新基于作用域/闭包的解构 JavaScript 变量？答案

【问题标题】：How To Update A Destructured JavaScript Variable Based On Scopes/Closures?如何更新基于作用域/闭包的解构 JavaScript 变量？
【发布时间】：2019-05-16 07:43:12
【问题描述】：

下面的代码是一个destructured count 变量和increaseCount 更新函数。

当我执行 increaseCount 函数时，如何更新 count 变量的值？

这可能吗？

注意：我不希望 count 变量成为全局变量。

从下面的代码中，我尝试使用 Closures 来解决问题。但即使在第二个 console.log 之后，仍然会显示 1。

function getCount() {
    let _count = 1;

    const _updateCount = () => {
        _count = _count + 1;
    };

    return [_count, _updateCount];


}

const [count, updateCount] = getCount();


console.log(count); /* <===== Expect initial count to be 1 */

updateCount();

console.log(count); /* <===== After calling updateCount I Expect count to be 2 */

我希望 count 在 first console.log 被调用时为 1。
当调用 updateCount 时，我希望 count 变量更新为 2。
因此，当调用第二个 console.log 时，我希望显示 2。

【问题讨论】：

标签： javascript function variables scope closures

【解决方案1】：

鉴于您当前的代码，如果您希望能够多次调用 getCount 是不可能的 - 您解构了顶层的原语 count。更改它的唯一方法是重新分配 getCount 内部的外部变量，这是个坏主意。

let count;
function getCount() {
    count = 1;

    const _updateCount = () => {
        count = count + 1;
    };

    return _updateCount;
}

const updateCount = getCount();


console.log(count); /* <===== Expect initial count to be 1 */

updateCount();

console.log(count); /* <===== After calling updateCount I Expect count to be 2 */

一个简单的解决方法是不要在数组的第一个位置放置一个基元，而是使用一个返回内部_count的函数：

function getCount() {
    let _count = 1;

    const _updateCount = () => {
        _count = _count + 1;
    };

    return [() => _count, _updateCount];


}

const [getInternalCount, updateCount] = getCount();


console.log(getInternalCount()); /* <===== Expect initial count to be 1 */

updateCount();

console.log(getInternalCount()); /* <===== After calling updateCount I Expect count to be 2 */

【讨论】：

这行得通。但是有没有办法不让getInternalCount，而不是一个函数。我试图使 getInternalCount 成为 getter 但在第二个 console.log 之后它仍然返回 1
不，如果不使返回数组的第一项成为某种函数，这是不可能的

【解决方案2】：

_count 的范围与您尝试console.log 的count 的范围不同

要显示_count 的值，您必须使用函数访问它，如下所示：

function getCount() {
  // This is visibile only to the function getCount
  let _count = 1;

  const _updateCount = () => {
    _count = _count + 1;
  };

  const _showCount = () => {
    console.log(_count);
  }

  return [_count, _updateCount, _showCount];
}

// Count here will be a different variable
const [count, updateCount, showCount] = getCount();


console.log(count); /* <===== Expect initial count to be 1 */

updateCount();
showCount(); // Will show ===> 2

updateCount();
showCount(); // Will show ===> 3

【讨论】：

【解决方案3】：

您可以使用带有已实现 toString 方法的对象，并在原始预期环境中使用此变量来获取计数。

function getCount() {
    let _count = 1;
    const _updateCount = () => {
        _count = _count + 1;
    };
    return [{ toString: () => _count }, _updateCount];
}

const [count, updateCount] = getCount();
console.log(count + '');
updateCount();
console.log(count + '');

【讨论】：