使用回调方法将JavaScript函数转换为类 [英] Convert JavaScript function to class with callback methods

问题描述

我正在尝试将以下函数转换为JavaScript中的类(来自 CMS 创建的原始函数此处)，

I'm trying to convert the following function to a class in JavaScript (original function from CMS created here),

function Countdown(options) {
  var timer,
  instance = this,
  seconds = options.seconds || 10,
  updateStatus = options.onUpdateStatus || function () {},
  counterEnd = options.onCounterEnd || function () {};

  function decrementCounter() {
    updateStatus(seconds);
    if (seconds === 0) {
      counterEnd();
      instance.stop();
    }
    seconds--;
  }

  this.start = function () {
    clearInterval(timer);
    timer = 0;
    seconds = options.seconds;
    timer = setInterval(decrementCounter, 1000);
  };

  this.stop = function () {
    clearInterval(timer);
  };
}

在这种用法下，

var myCounter = new Countdown({  
    seconds:5,  // number of seconds to count down
    onUpdateStatus: function(sec){console.log(sec);}, // callback for each second
    onCounterEnd: function(){ alert('counter ended!');} // final action
});

myCounter.start();

我的尝试是

Countdown: class {
    constructor(options) {
        this.seconds = options.seconds || 10;
        this.updateStatus = options.onUpdateStatus || function () { };
        this.counterEnd = options.onCounterEnd || function () { };
        this.instance = this;
        this.timer = null;
    }

    decrementCounter() {
        this.updateStatus(this.seconds);
        if (this.seconds === 0) {
            this.counterEnd();
            this.instance.stop();
        }
        this.seconds--;
    }

    start() {
        clearInterval(this.timer);
        this.timer = 0;
        this.timer = setInterval(this.decrementCounter, 1000);
    }

    stop () {
        clearInterval(this.timer);
    }
}

并这样称呼它，

var counter = new Countdown({  
    seconds:5,  // number of seconds to count down
    onUpdateStatus: function(sec) {
        $("#timer").text(sec);
    }, // callback for each second
    onCounterEnd: function() {
        closeModal();
    } // final action
});
counter.start();

它在 decrementCounter()，

未捕获的TypeError:this.updateStatus不是函数

Uncaught TypeError: this.updateStatus is not a function

我在做什么错了?

推荐答案

此指的是没有 updateStatus 的全局对象，因为 setInterval函数不会保留 this -context.

this refers to the global object which doesn't have updateStatus, because the setInterval function doesn't preserve the this-context.

在构造函数中使用 bind 进行修复它:

Use bind in the constructor to fix it:

绑定创建一个新函数，该函数会将 this 设置为传递给 bind()的第一个参数.

Bind creates a new function that will have this set to the first parameter passed to bind().

constructor(options) {
    this.seconds = options.seconds || 10;
    this.updateStatus = options.onUpdateStatus || function() {};
    this.counterEnd = options.onCounterEnd || function() {};
    this.instance = this;
    this.timer = null;

    this.decrementCounter = this.decrementCounter.bind(this);
  }

这篇关于使用回调方法将JavaScript函数转换为类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！