'Dies' ist undefiniert innerhalb einer Prototyp-Methode, die Promise verwendet und von einer anderen Prototyp-Methode desselben Objekts aufgerufen wird?

Question

Ich erstelle ein einfaches Formular, wo wir 2 Datumseingaben haben und die Gültigkeit des Datumsobjekts prüfen; Ich folge dem Prototypmuster und erstelle 2 Methoden.

dies war bisher in Ordnung arbeiten, aber wenn ich Versprechen innerhalb Validate-Methode verwenden, gibt es Fehler „nicht Eigentum‚startdate‘undefinierter lesen kann“. Also meine Frage ist, warum dies in diesem Fall nicht definiert ist?

und wie es zu lösen?

unten ist mein Schnipsel.

(function() { 
 
    'use strict'; 
 

 

 
    let startDate, endDate; 
 

 
    const _calculate = function() { 
 
     // console.log('inside constructor'); 
 
     this.endDate = new Date(); 
 
     this.ageFind = true; // for first tab 
 
    }; 
 

 
    _calculate.prototype = { 
 
     //function to get data for calculating the time diff (setting startDate, endDate) 
 
     init: function(formName) { 
 
      // console.log("getDifference"); 
 
      if (this.countdown) { 
 
       clearInterval(this.countdown); 
 
      } 
 
      // other form name is 'secondForm' 
 
      this.ageFind = (formName === 'firstForm') ? true : false; 
 
      var fd = new FormData(document.getElementById(formName)); 
 
      // Start date 
 
      let startDay = fd.get('start_date'); 
 
      let startMonth = fd.get('start_month'); 
 
      let startYear = fd.get('start_year'); 
 
      this.startDate = new Date(`${startMonth}-${startDay}-${startYear}`); 
 
      // End date 
 
      let endDay = fd.get('end_date'); 
 
      let endMonth = fd.get('end_month'); 
 
      let endYear = fd.get('end_year'); 
 
       this.endDate = new Date(`${endMonth}-${endDay}-${endYear}`); 
 
      
 
      this.isValidDate().then((res) => { 
 
       console.log('is valid'); 
 
      }).catch((err) => { 
 
       console.error('Invalid date.', err); 
 
      }); 
 
     }, 
 

 
     isValidDate: function() { 
 
      console.log("validateDate", this.startDate, this.endDate); 
 
      return new Promise(function(resolve, reject) { 
 
       console.log('inside promise'); 
 
       if (isFinite(this.startDate) && isFinite(this.endDate)) { 
 
        var [startTimeStamp, endTimeStamp] = [this.startDate.getTime(), this.endDate.getTime()]; 
 
        // console.log("startTimeStamp, endTimeStamp", startTimeStamp, endTimeStamp); 
 
        // swap the date if `end date` is smaller than `start date` 
 
        if (endTimeStamp < startTimeStamp) { 
 
         [this.startDate, this.endDate] = [this.endDate, this.startDate]; 
 
        } 
 
        resolve(true); 
 
       } else { 
 
        reject(false); 
 
       } 
 
      }); 
 
     } 
 
    }; 
 

 
    window._cal = new _calculate(); 
 
})();

div { 
 
float: left; 
 
} 
 

 
.start-date,.end-date { 
 
margin: 4px; 
 
}

<form name="firstForm" id="firstForm"> 
 
    <fieldset class="start-date"> 
 
    <legend>Start Date</legend> 
 
    <select id="start_date" name="start_date"> 
 
     <option selected disabled>Start Date</option> 
 
     <option value="1">1</option> 
 
    </select> 
 
    <select id="start_month" name="start_month"> 
 
     <option selected disabled>Start Month</option> 
 
     <option value="10">October</option> 
 
    </select> 
 
    <select id="start_year" name="start_year"> 
 
     <option selected disabled>Start Year</option> 
 
     <option value="2016">2016</option> 
 
     <option value="2017">2017</option> 
 
    </select> 
 
    </fieldset> 
 
    <fieldset class="end-date"> 
 
    <legend> End date</legend> 
 
     <select id="end_date" name="end_date"> 
 
     <option selected disabled>End Date</option> 
 
     <option value="1">1</option> 
 
    </select> 
 
    <select id="end_month" name="end_month"> 
 
     <option selected disabled>End Month</option> 
 
     <option value="10">October</option> 
 
    </select> 
 
    <select id="end_year" name="end_year"> 
 
     <option selected disabled>End Year</option> 
 
     <option value="2016">2016</option> 
 
     <option value="2017">2017</option> 
 
    </select> 
 
    </fieldset> 
 
    <br/> 
 
    <button type="button" onclick="_cal.init('firstForm')">Calculate!</button> 
 
</form>

Answer 1

ist der Kontext aufgrund function verloren, müssen Sie es Schließung:

isValidDate: function() { 
     var self = this; 
     return new Promise(function(resolve, reject) { 
      console.log(self.startDate); 
      // ... 
     }); 
    }