Попытка написать сценарий JS, который показывает и изменяет определенные свойства объекта

Question

Итак, я делаю курс для начинающих по Javascript.Я пишу сценарий, который читает объект и показывает его в 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.Вы создаете leftijd функцию для каждого человека, которого вы создаете.Это плохо.Все экземпляры людей должны иметь одинаковую функцию для расчета их возраста.Это делается путем добавления функции в конструктор prototype .

Теперь в javaScript есть несколько способов сделать это.Старомодным способом является ручная настройка функции leftijd в прототипе Person:

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 вы знаете, что создаете нового человека, поэтому create чувствует себя избыточно)

В этом коде выше я присоединяю функцию leftijd к прототипу Person, что в основном означает, что все Personэкземпляры будут иметь эту функцию.

В исходном коде каждый созданный человек имеет свою собственную функцию leftijd, которая, конечно, выделяет больше памяти.Это небольшая разница, но вы определенно не хотите добавлять функции к this внутри конструктора.

Теперь, этот материал prototype кажется странным, и хотя об этом полезно знать, естьэто синтаксис class , который намного проще и понятнее :

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!