07. 函数、作用域、闭包与回调

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

闭包可以让函数“记住”创建时的变量。
回调函数常见于事件、数组方法、异步请求。
把重复的绑定逻辑封装成函数，可以减少代码重复。

四、练习建议

给计数器增加最大值和最小值限制。
写一个 `createToggle()` 工厂函数。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/07-functions-scope.js，下面同步展示，方便学习和复制。

// 页面 07：函数、作用域、闭包
function createCounter(initialValue = 0) {
  let count = initialValue;

  function setCount(nextValue) {
    count = nextValue;
    return count;
  }

  return {
    increase(step = 1) {
      return setCount(count + step);
    },
    decrease(step = 1) {
      return setCount(count - step);
    },
    reset() {
      return setCount(initialValue);
    },
    getValue() {
      return count;
    }
  };
}

const counter = createCounter(0);
const counterOutput = document.querySelector('#p7-output');

function renderCounter(message = '当前计数') {
  counterOutput.textContent = `${message}：${counter.getValue()}`;
}

function bindClick(selector, callback) {
  document.querySelector(selector).addEventListener('click', callback);
}

bindClick('#p7-plus', () => {
  counter.increase();
  renderCounter('已增加');
});

bindClick('#p7-minus', () => {
  counter.decrease();
  renderCounter('已减少');
});

bindClick('#p7-reset', () => {
  counter.reset();
  renderCounter('已重置');
});

renderCounter();