javascript - 为什么我会收到此错误？未捕获的类型错误: state.removeFlag不是函数

Question

问题

未捕获的类型错误:state.removeFlag 不是函数

额外信息

我在使用下面的代码时遇到问题，导致出现上面的错误。我的意图很简单，我想在“类”中设置两个函数然后调用它们，但是我收到上述错误，并且无法发现问题。我希望另一双眼睛能有所帮助。我感谢您能给我的任何帮助。

注意:Flags.CROSS_SLOT 的值为 1

代码

function State(){
    this.state = 0; //bitstring representing the user's choices in the UI

    this.addFlag = function(flag){
        state = (state | flag);
    }

    this.removeFlag = function(flag){
        state = (~state | flag);
    }
}

var state = new State();

state.addFlag(Flags.CROSS_SLOT);
console.log(state.state);
state.removeFlag(Flags.CROSS_SLOT);
console.log(state.state);

Answer 1

问题在于类中的方法正在更改用于保存类实例的全局 state 变量，而不是更改类中的属性。第一次调用会覆盖该变量，因此第二次调用会失败，因为该变量不再包含该对象。

Javascript 没有对象作用域，因此在方法内使用 state 标识符并不意味着对象中的 state 属性。您需要使用 this 关键字来访问对象中的成员。

此外，使用 & 运算符删除标志并将 ~ 运算符应用于该标志，否则您将翻转所有标志并添加您尝试添加的标志删除。

function State(){
    this.state = 0; //bitstring representing the user's choices in the UI

    this.addFlag = function(flag){
        this.state = this.state | flag;
    }

    this.removeFlag = function(flag){
        this.state = this.state & ~flag;
    }
}

演示:

// function to show values in StackOverflow snippet
function log(s) { document.write(s + '<br>'); };


function State(){
    this.state = 0; //bitstring representing the user's choices in the UI

    this.addFlag = function(flag){
        this.state = this.state | flag;
    }

    this.removeFlag = function(flag){
        this.state = this.state & ~flag;
    }
}

var state = new State();

var Flags = {
  CROSS_SLOT: 1
};

state.addFlag(Flags.CROSS_SLOT);
log(state.state);
state.removeFlag(Flags.CROSS_SLOT);
log(state.state);