JavaScript 对象未更新为附加值

Question

我有一个对象State().score，当它在Handler().addToScore()中调用时，应该用它的附加值进行更新。问题是它始终保持在它的初始值，即 0 .

const DOM = () => {
  const dom = {}
  dom.score = document.getElementsByClassName('score')[0]
  return dom
}
const State = () => {
  const state = {}
  state.score = 0 // This remains 0, I want it to update when adding to it
  return state
}
const Handler = () => {
  const handler = {}
  handler.addToScore = function() { 
    State().score += 10
    console.log(State().score) // Equals to 0 on every click and never gets updated
    DOM().score.innerHTML = State().score
  }
  return handler
}
function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}
function statusChangeCallback(response) {
  if(response.status === 'connected') {
    console.log( 'Logged in and authenticated' )
    Handler().addToScore()
  } else {
    console.log('Not authenticated')
  }
}

Answer 1

每次

运行它设置State()都会返回一个新对象，score 0

如果要保存State().score，则必须保存初始化的结果。或者，您可以使用get之三和set之三更改生成score的方式

const State = () => {
  const state = {}
  state.score = 0 // This remains 0, I want it to update when adding to it
  return state
}
console.log(State().score); // State() is a function that ALWAYS returns { score: 0 }
let savedScore = State().score;
savedScore += 1;
console.log(savedScore);

使用 get/set 的示例（有多种方法可以执行此操作：

https://jsfiddle.net/mswilson4040/1ds8mbqw/3/

class State {
    constructor() {
    this._score = 0;
  }
  get score() {
    return this._score;
  }
  set score(val) {
    this._score = val;
  }
}
const state = new State();
console.log(state.score);
state.score += 1;
console.log(state.score);

当然，另一种方法是不使State成为函数。看起来你实际上是在试图管理分数或状态，所以让State成为一个最终每次都能给你一个全新的状态（分数）的函数是行不通的。

像不让State函数这样简单的事情也可以工作：

const State = () => {
  const state = {}
  state.score = 0 // This remains 0, I want it to update when adding to it
  return state
}

应该是

const State = {
  score: 0
};