獲得提示並將其保存為 javascript 中的 object 屬性

Question

我對跟隨 javascript 感到困惑。在下面的代碼中，讀取方法提示用戶輸入一個值並將其保存為 object 屬性。

let calculator = {
  sum() {
    return this.a + this.b;
  },

  mul() {
    return this.a * this.b;
  },

  read() {
    this.a = +prompt('a?', 0);
    this.b = +prompt('b?', 0);
  }
};

calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );

但是當我執行 console.log(calculator.a); 時，結果是未定義的。 為什么會這樣？ 讀取方法真的將提示保存為 object 屬性還是發生了其他事情？ 請幫忙

Answer 1

您的代碼有效，但在您第一次登錄this.a/b時無效 - 因為兩者都尚未初始化。 因此，當您在讀取后登錄時，將顯示這些值。

 let calculator = { sum() { return this.a + this.b; }, mul() { return this.a * this.b; }, read() { this.a = +prompt('a?', 0); this.b = +prompt('b?', 0); } }; calculator.read(); alert( calculator.sum() ); alert( calculator.mul() ); console.log(calculator.a);

提示和警報真的很煩人。 讓我們提供一個替代方案，使用兩個數字字段、一個input處理程序（事件委托）和一個工廠 function 來避免使用this並能夠將計算器關聯到兩個輸入元素：

 document.addEventListener(`input`, handle); const calculatorFactory = (a = 0, b = 0, elemA, elemB) => { elemA.value = a; elemB.value = b; return { read: () => { a = +elemA.value || 0; b = +elemB.value || 0; }, get sum() {return a + b; }, get mul() {return a * b; }, get a() { return a; }, get b() { return b; }, }; }; const calculator = calculatorFactory(10, 5, document.querySelector(`#valA`), document.querySelector(`#valB`) ); getResult(calculator); function getResult(calculator) { calculator.read(); console.clear(); console.log(`calculator.a = ${calculator.a}`); document.querySelector(`#aValue`).textContent = calculator.sum; return document.querySelector(`#bValue`).textContent = calculator.mul; } function handle(evt) { if (/valA|valB/.test(evt.target.id)) { return getResult(calculator); } }

 #aValue:before { content: 'Sum: '; } #bValue:before { content: 'Multiplied: '; } #AB:before { content: 'Values: '; }

 <input id="valA" type="number"> value a <input id="valB" type="number"> value b <div> <div id="aValue"></div> <div id="bValue"></div> </div>