javascript - 尝试编写一个显示和更改某些对象属性的 JS 脚本

Question

所以我一直在学习 Javascript 的初学者类(class)。 我正在编写一个脚本来读取一个对象并以 HTML 格式显示它。

我还包含了一种根据出生日期 (DOB) 计算年龄的方法，因为我总是喜欢为挑战做一些额外的事情。

现在我设法做到了，这样我就可以更改 DOB，它也会在更改时显示，但年龄计算仍然显示从第一个 DOB 计算的年龄，然后我在网页上手动更改它。

我真的迷失在这一点上，面向对象编程对我来说非常困难，我花了一段时间才走到这一步。非常感谢一些反馈!

var person = new createPerson('Stijn', 'Lammers', "1994-06-05", 0);
var getDOB = document.getElementById("inputDag");
getDOB.addEventListener("keyup", enter);

document.getElementById('knop').onclick = function(){show(person)};

function enter(event){                         //function to change the DOB value.
if(event.keyCode === 13){
    var year = document.getElementById("inputJaar");
    var month = document.getElementById("inputMaand");
    var day = document.getElementById("inputDag");
    var yearValue = +year.value;
    var monthValue = +month.value;
    var dayValue = +day.value;
    if (yearValue > 2018 || monthValue > 12 || dayValue > 31){
        alert("Incorrect date");
    }else{
        person.DOB = yearValue + "-" + monthValue + "-" + dayValue; 
    }
  }
}

function createPerson(naam, achternaam, DOB, leeftijd){
    this.naam = naam;
    this.achternaam = achternaam;
    this.DOB = DOB;
    this.leeftijd = function(){               //method to calculate age.
        var today = new Date();
        var birthDate = new Date(DOB);
        var age = +today.getFullYear() - +birthDate.getFullYear();
        var m = today.getMonth() - birthDate.getMonth();
        if (m <0 || (m === 0 && today.getDate() < birthDate.getDate())){
            age = age -1;
        }
        return age;
    }
}


function show(p){
    document.getElementById('tekst').innerHTML = person.naam + " " + 
    person.achternaam + " " + person.DOB + " " + person.leeftijd();
}

HTML 主体:

<input type="text" id="inputJaar" size="1" maxlength="4" placeholder="YYYY">
<input type="text" id="inputMaand" size="1" maxlength="2" placeholder="MM">
<input type="text" id="inputDag" size="1" maxlength="2" placeholder="DD"><br>   
<button id='knop'>klik</button>
<p id='tekst'></p>

Answer 1

我认为您的问题与 leeftijd 定义中的这一行有关:

var birthDate = new Date(DOB);

在那里，您将 DOB 参数作为参数传递，而不是此人的 DOB (this.DOB)。

根据您的操作方式，我不太确定您应该如何操作。我相信这会奏效:

function createPerson(naam, achternaam, DOB, leeftijd){
  this.naam = naam;
  this.achternaam = achternaam;
  this.DOB = DOB;
  var self = this;
  this.leeftijd = function(){               //method to calculate age.
      var today = new Date();
      var birthDate = new Date(self.DOB); // here we take the DOB of the person. The 'self' stuff feels weird, I know, google about 'self = this' to know more
      var age = +today.getFullYear() - +birthDate.getFullYear();
      var m = today.getMonth() - birthDate.getMonth();
      if (m <0 || (m === 0 && today.getDate() < birthDate.getDate())){
          age = age -1;
      }
      return age;
  }
}

但是，现在不要这样做!。这不是您应该在 JavaScript 中执行 OOP 的方式。您正在为您创建的每个人创建一个 leftijd 函数。那很糟。所有的人实例都应该有相同的函数来计算他们的年龄。这是通过将函数添加到构造函数原型(prototype)来实现的。

现在，在 javaScript 中有几种方法可以做到这一点。老式的方法是在 Person 原型(prototype)中手动设置 leftijd 函数:

function Person(naam, achternaam, DOB, leeftijd){
  this.naam = naam;
  this.achternaam = achternaam;
  this.DOB = DOB;
}

Person.prototype.leftijd = function(){               //method to calculate age.
  var today = new Date();
  var birthDate = new Date(this.DOB);
  var age = +today.getFullYear() - +birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m <0 || (m === 0 && today.getDate() < birthDate.getDate())){
      age = age -1;
  }
  return age;
}

(请注意我是如何将 createPerson 重命名为 Person 的。构造函数在 javaScript 中通常是大写的。另外，使用 new 你知道你正在创建一个新人，所以创建感觉多余)

在上面的代码中，我将 leftijd 函数附加到 Person 的原型(prototype)，这基本上意味着所有 Person 实例都将具有此函数。

相反，在您的原始代码中，创建的每个人都有自己的 leftijd 函数，这当然会分配更多内存。这是一个细微的差别，但您绝对不想在构造函数中向 this 添加函数。

现在，这个prototype 的东西感觉很奇怪，虽然知道它很好，但是有class 语法which is far simpler and straightforward :

class Person{
  constructor(naam, achternaam, DOB, leeftijd){
    this.naam = naam;
    this.achternaam = achternaam;
    this.DOB = DOB;
  }

  leftijd(){
    var today = new Date();
    var birthDate = new Date(this.DOB);
    var age = +today.getFullYear() - +birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m <0 || (m === 0 && today.getDate() < birthDate.getDate())){
        age = age -1;
    }
    return age;
  }
}

最后，两种方式的作用相同，但类语法隐藏了prototype 的怪异之处，并且类似于 Java 等更多其他语言。

祝你学习 javaScript 好运!