我如何让原型在 JavaScript 中工作构造函数

how do I get prototype to work of a constructor function in JavaScript

本文关键字：JavaScript 工作 构造函数 原型      更新时间：2023-09-26
 var StartCountdown = function () {
  //grab value from the input text field
  var minutes = document.getElementById("minutes").value;
  //check if the value passed is a number
  if (isNaN(minutes)) {
     timeDisplay.innerHTML = "Enter a numeric value";
     return;
  };
  //this variable will decrement
  secondsRemaining = minutes * 60;
  //the ticking function and the milisecond (1)
  // calls the method repeatedly
  intervalHandle = setInterval(tick, 1000);
  //hide the input field once we have the numeric value
  // document.getElementById("inputArea").style.display = "none";
     StartCountdown.closeInputField;
  };
  StartCountdown.prototype = {
       closeInputField: function() {
               document.getElementById("inputArea").style.display = "none";
       }
  }

我想创建StartCountdown构造函数的原型函数，以便了解如何正确完成此操作。

这是没有原型的完整版本http://jsfiddle.net/2nXbN/2/

而不是

StartCountdown.closeInputField;

您需要使用 调用该函数

this.closeInputField();

注意：请确保使用 () 调用函数。没有它们，你只是引用函数，而不是调用它。

您也不必以这种方式创建原型。

创建函数后，只需附加到现有原型即可。

var StartCountDown = function() {
  // ...
};
StartCountDown.prototype.closeInputField = function() {
  // ...
};

在看了看你的小提琴之后，我也看到了其他几个需要改进的地方。这些只是一些想法供您根据需要使用。

这是一个 jsfiddle 演示

定时器

var Timer = function(elem) {
  this.seconds = 0;
  this.elem     = elem;
  this.initialize();
};
Timer.prototype.initialize = function() {
  this.timer = document.createElement("span");
  this.timer.innerHTML = "0:00";
  this.input = document.createElement("input");
  this.button = document.createElement("button");
  this.button.innerHTML = "Submit";
  this.button.addEventListener("click", this.startTimer.bind(this));
  this.elem.appendChild(this.timer);
  this.elem.appendChild(this.input);
  this.elem.appendChild(this.button);
};
Timer.prototype.startTimer = function(event) {
  this.removeInput();
  this.seconds = parseInt(this.input.value) * 60;
  this.interval = window.setInterval(this.countDown.bind(this), 1000);
  event.preventDefault();
};
Timer.prototype.stopTimer = function() {
  this.updateTimer("Done!");
  window.clearInterval(this.interval);
};
Timer.prototype.updateTimer = function(text) {
  this.timer.innerHTML = text;
};
Timer.prototype.countDown = function() {
  if (this.seconds === 0) {
    return this.stopTimer();
  }
  this.updateTimer(this.timeRemaining(this.seconds));
  this.seconds--;
};
Timer.prototype.timeRemaining = function(seconds) {
  var minutes   = Math.floor(seconds/60),
      seconds   = seconds % 60,
      separator = seconds % 2 === 0 ? ":" : " ";
  if (seconds.toString().length < 2) {
    seconds = [0, 0, seconds].slice(-2).join("");
  }
  return minutes + separator + seconds;
};
Timer.prototype.removeInput = function() {
  this.input.remove();
  this.button.remove();
};

用法

找到一个你想要表现得像计时器的 DOM 元素 ( elem ( 并调用new Timer(elem) 

var timer = document.getElementsByTagName("div")[0];
new Timer(timer);

多个定时器

var timers = document.getElementsByTagName("div");
for (var i=0, len=timers.length; i<len; i++) {
  new Timer(timers[i]);
}
相关文章：