为什么我会收到此错误？未捕获的 TypeError：state.removeFlag 不是函数答案

【问题标题】：Why am I getting this error? Uncaught TypeError: state.removeFlag is not a function为什么我会收到此错误？未捕获的 TypeError：state.removeFlag 不是函数
【发布时间】：2015-07-17 02:07:16
【问题描述】：

问题

Uncaught TypeError: state.removeFlag is not a function

额外信息

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

注意：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);

【问题讨论】：

需要在addFlag和removeFlag方法中使用this.state。您正在覆盖全局 state 变量。
哇，答案很明显，谢谢。

标签： javascript object methods typeerror bitwise-operators

【解决方案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);

【讨论】：

此外，“this”可能并不总是您想要的。在函数内部定义它是更安全和常见的做法： var self = this;然后在使用它的任何地方使用 self 。 stackoverflow.com/questions/337878/var-self-this
@razethestray：这是处理上下文的一种方法，但我不会说这是常见的做法。
@Guffa 感谢有关按位删除的提示，我正在测试我的版本，但我遇到了这个错误，这阻止了我。

【解决方案2】：

你正在覆盖状态变量

this.addFlag = function(flag){
    state = (state | flag); // that's the global variable defined outside
}

var state = new State();

state变量，不再是函数的新实例，而是0，你需要访问this.state来代替

this.addFlag = function(flag){
    this.state = (state | flag); // that's the global variable defined outside
}

【讨论】：

【解决方案3】：

您需要在函数中使用this 关键字。另外，我个人更喜欢将函数移到对象之外并使用原型......

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

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

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

【讨论】：

【解决方案4】：

你可以试试这样的：

function State(){
    return  {
        state: 0,
        addFlag: function(flag){
            this.state = (this.state | flag);
        },
        removeFlag: function(flag){
            this.state = (~this.state | flag);
        }
    }
}

【讨论】：