当前位置：首页 > JavaScript

js面向对象实现计数器

2026-03-02 02:30:23JavaScript

面向对象实现计数器的方法

使用JavaScript面向对象编程（OOP）实现计数器可以通过类（Class）的方式封装计数器的属性和方法。以下是一个完整的实现示例：

js面向对象实现计数器

class Counter {
  constructor(initialValue = 0) {
    this.value = initialValue;
  }

  increment() {
    this.value++;
    return this.value;
  }

  decrement() {
    this.value--;
    return this.value;
  }

  reset() {
    this.value = 0;
    return this.value;
  }

  getCurrentValue() {
    return this.value;
  }
}

使用计数器类

实例化计数器对象并调用其方法：

js面向对象实现计数器

const counter = new Counter(5); // 初始值为5
console.log(counter.getCurrentValue()); // 输出: 5

counter.increment();
console.log(counter.getCurrentValue()); // 输出: 6

counter.decrement();
console.log(counter.getCurrentValue()); // 输出: 5

counter.reset();
console.log(counter.getCurrentValue()); // 输出: 0

扩展功能

如果需要更灵活的计数器，可以添加步长（step）参数：

class AdvancedCounter {
  constructor(initialValue = 0, step = 1) {
    this.value = initialValue;
    this.step = step;
  }

  increment() {
    this.value += this.step;
    return this.value;
  }

  decrement() {
    this.value -= this.step;
    return this.value;
  }

  // 其他方法保持不变
}

实际应用示例

在网页中绑定按钮操作计数器：

<button id="increment">+</button>
<span id="counter-value">0</span>
<button id="decrement">-</button>
<button id="reset">Reset</button>

<script>
  const counter = new Counter();
  const valueDisplay = document.getElementById('counter-value');

  document.getElementById('increment').addEventListener('click', () => {
    counter.increment();
    valueDisplay.textContent = counter.getCurrentValue();
  });

  document.getElementById('decrement').addEventListener('click', () => {
    counter.decrement();
    valueDisplay.textContent = counter.getCurrentValue();
  });

  document.getElementById('reset').addEventListener('click', () => {
    counter.reset();
    valueDisplay.textContent = counter.getCurrentValue();
  });
</script>

这种面向对象的实现方式使代码更模块化，易于维护和扩展。通过封装计数器逻辑，可以在多个地方复用计数器实例。