javascript - 原型(prototype)和关闭

Question

我正在尝试解决一些关于原型(prototype)(也许还有闭包)的 JavaScript 问题。我对这个概念非常很陌生。

我需要创建一个 MyNumber 原型(prototype)，然后添加增量函数，该函数将返回一个加 1 的数字。这里我将创建该原型(prototype)的多个实例，每个实例将分别跟踪自己的值。

这是我逻辑上错误的代码:

function MyNumber(num) {
  this.num = num;
}

MyNumber.prototype.increment = function() {
   return function() {
     ++this.num
   }
}

在这个示例之后，我需要创建一个时钟原型(prototype)，它每秒递增一。

Answer 1

当你使用函数构造函数时，我建议你使用 ES6 的 classes 。它将允许您编写更具可读性和可维护性的代码。通过创建您自己的 constructor() 和 increment() 方法，您的 MyNumber 函数可以变成一个 class 。 increment() 方法负责增加数字并返回新数字。

由于您需要一个时钟，因此您还可以创建一个额外的 Clock 类。此扩展 MyNumber 类，允许Clock 访问MyNumber 类中声明的属性和方法。由于时钟需要有一个内部计数器，我们可以扩展 MyNumber 来为我们提供计数功能。

Clock 类有一个构造函数，它通过执行 super() 调用来调用 MyNumber 的构造函数。这将初始化 Clock 类中的 this.num。构造函数还接受其他参数，例如操作，这是每次时钟“滴答”时执行的函数，以及表示时钟“滴答”的速度的speed。

Clock 类还实现了 begin() 方法，该方法使用 setInterval() 重复执行传递过来的箭头函数。箭头函数每 x 米/秒执行一次(基于 this.speed 属性)。每次执行箭头函数时，它都会增加时钟内部计数器(使用扩展 MyNumber 类提供的 .increment())。它还执行最初通过构造函数传递的 action 函数。

然后，您可以创建 Clock 类的实例，并将所需的参数传递给构造函数，如下所示:

class MyNumber {
  constructor(num) {
    this.num = num;
  }
  
  increment() {
    return ++this.num;
  }
}

class Clock extends MyNumber {
  constructor(beginTime, action, speed=1) { // default speed to `1`
    super(beginTime);
    this.act = action;
    this.speed = speed; // in seconds
  }
  
  begin() {
    this.act(this.num); // call once before looping
    setInterval(() => { // executes every `this.speed` seconds
      const new_time = this.increment(); // increment the time and get the new time
      this.act(new_time); // execute the action
    }, this.speed*1000); 
  }
}

const clock = new Clock(3, t => console.log(`Tick tock, the time is ${t}`));
clock.begin();