涉及JavaScript'；对象结构

我正在用JavaScript编写一个完整的客户端系统。我有大约4.js文件，但不需要从中发布代码，也不需要html

无论如何，在解释问题之前，我将尝试解释代码是关于什么的，以及代码本身

基本上，它是一个设计级别的有限状态机。目前，我只有3种状态：初始状态、转换状态和最终状态（目前，状态机是一个队列）。代码如下：

var state = 0

var IntInsert = //my object that represents a namespace, or a set of functions
{
    insertCtrl : function() //main function: it calls the others
    {
        if (lookup()) return
        if (!state) state = 1
        var key = document.getElementById("newegg").value
        switch(state)
        {
            case 1:
                this.preInsert(key)
                break
            case 2:
                this.firstInsert(key)
                break
        }
    },

    preInsert : function(key)
    {
        $("#terminal").css("color", "green")
        $("#terminal").text("Inserting element '" + String(key) + "'")
        $("#t2cell" + String(cuckoohash.h2(key))).css("background-color", "White")
        $("button").prop("disabled", true)
        $("input").prop("disabled", true)
        $("#nextstep").prop("disabled", false)
        state++
    },

    firstInsert : function(key)
    {
        key = [document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML, document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML = key][0] // key <-> t1[h1(key)]
        if (!key)
        {
            $("#t1cell" + String(cuckoohash.h1(document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML))).css("background-color", "LightGreen")
            this.finishedInsert()
        }
    },

    finishedInsert : function()
    {
        $("#terminal").css("color", "green")
        $("#terminal").text("Element '" + String(key) + "' inserted")
    }
}

var state=0
var IntInsert=//表示名称空间或一组函数的my对象
{
insertCtrl:function（）//主函数：它调用其他函数
{
if（lookup（））返回
如果（！state）state=1
var key=document.getElementById（“newegg”）.value
开关（状态）
{
案例1：
此。预插入（键）
打破
案例2：
此。第一次插入（键）
打破
}
},
预插入：功能（键）
{
$（“#终端”）.css（“颜色”、“绿色”）
$（“#终端”）.text（“插入元素“+”字符串（键）+“”）
$（“#t2cell”+字符串（buckoohash.h2（key））.css（“背景色”、“白色”）
$（“按钮”）.prop（“已禁用”，真）
$（“输入”）.prop（“已禁用”，真）
$（“#下一步”）.prop（“已禁用”，false）
陈述++
},
第一次插入：函数（键）
{
key=[document.getElementById（“t1”）。行[buckoohash.h1（key）]。单元格[0]。innerHTML，document.getElementById（“t1”）。行[buckoohash.h1（key）]。单元格[0]。innerHTML=key][0]//键t1[h1（key）]
如果（！键）
{
$（“#t1cell”+字符串（buckoohash.h1（document.getElementById（“t1”）.rows[buckoohash.h1（key）].cells[0].innerHTML））.css（“背景色”，“浅绿色”）
这个。finishedInsert（）
}
},
finishedInsert:函数（）
{
$（“#终端”）.css（“颜色”、“绿色”）
$（“#终端”）.text（“元素“+”字符串（键）+“插入”）
}
}

在this.firstInsert（键）行中，发生了一个错误。Firebug告诉我：TypeError:this.firstInsert不是函数。这很奇怪，因为它被定义为一个函数，Firebug本身在它的高级面板中将它表示为一个函数

如果我将函数从对象中取出，并将其用作全局函数，则完全没有错误。这就是为什么我认为可以忽略代码的整个语义来回答我的问题，即：为什么这会发生在对象内部？我错过了什么

---

在阅读了已确认的答案后，我意识到声明对象中的代码的全部要点是为我正在创建的整个状态机代码创建一个名称空间是很重要的，因此我肯定可以将状态变量放在其中。这样做的目的是避免使用具有全局变量和函数的大型代码库。

您看到错误的原因很可能是因为在运行时，“this”正在更改为不具有您的函数的对象。尝试重新构造代码，并在

上“关闭”此

，如下所示：

var IntInsert = function()
{
    var self = this;
    ...
    var insertCtrl = function() //main function: it calls the others
    {
        ... 
        case 2:
            self.firstInsert(key)
            break
        ...
    }
    ...

    var firstInsert = function(key)
    {
        ...
    }

    return {
        insertCtrl: insertCtrl,
        firstInsert: firstInsert
    }
}

var state = 0

var IntInsert = //my object that represents a namespace, or a set of functions
{
    insertCtrl : function() //main function: it calls the others
    {
        if (lookup()) return
        if (!state) state = 1
        var key = document.getElementById("newegg").value
        switch(state)
        {
            case 1:
                IntInsert.preInsert(key)
                break
            case 2:
                IntInsert.firstInsert(key)
                break
        }
    },

    preInsert : function(key)
    {
        $("#terminal").css("color", "green")
        $("#terminal").text("Inserting element '" + String(key) + "'")
        $("#t2cell" + String(cuckoohash.h2(key))).css("background-color", "White")
        $("button").prop("disabled", true)
        $("input").prop("disabled", true)
        $("#nextstep").prop("disabled", false)
        state++
    },

    firstInsert : function(key)
    {
        key = [document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML, document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML = key][0] // key <-> t1[h1(key)]
        if (!key)
        {
            $("#t1cell" + String(cuckoohash.h1(document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML))).css("background-color", "LightGreen")
            IntInsert.finishedInsert()
        }
    },

    finishedInsert : function()
    {
        $("#terminal").css("color", "green")
        $("#terminal").text("Element '" + String(key) + "' inserted")
    }
}

---

。。。或者符合您需要的类似内容。

您看到错误的原因很可能是因为在运行时“this”正在更改为不具有您的功能的对象。尝试重新构造代码，并在

上“关闭”此

，如下所示：

var IntInsert = function()
{
    var self = this;
    ...
    var insertCtrl = function() //main function: it calls the others
    {
        ... 
        case 2:
            self.firstInsert(key)
            break
        ...
    }
    ...

    var firstInsert = function(key)
    {
        ...
    }

    return {
        insertCtrl: insertCtrl,
        firstInsert: firstInsert
    }
}

var state = 0

var IntInsert = //my object that represents a namespace, or a set of functions
{
    insertCtrl : function() //main function: it calls the others
    {
        if (lookup()) return
        if (!state) state = 1
        var key = document.getElementById("newegg").value
        switch(state)
        {
            case 1:
                IntInsert.preInsert(key)
                break
            case 2:
                IntInsert.firstInsert(key)
                break
        }
    },

    preInsert : function(key)
    {
        $("#terminal").css("color", "green")
        $("#terminal").text("Inserting element '" + String(key) + "'")
        $("#t2cell" + String(cuckoohash.h2(key))).css("background-color", "White")
        $("button").prop("disabled", true)
        $("input").prop("disabled", true)
        $("#nextstep").prop("disabled", false)
        state++
    },

    firstInsert : function(key)
    {
        key = [document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML, document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML = key][0] // key <-> t1[h1(key)]
        if (!key)
        {
            $("#t1cell" + String(cuckoohash.h1(document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML))).css("background-color", "LightGreen")
            IntInsert.finishedInsert()
        }
    },

    finishedInsert : function()
    {
        $("#terminal").css("color", "green")
        $("#terminal").text("Element '" + String(key) + "' inserted")
    }
}

---

。。。或者类似的东西来满足您的需要。

我认为您在调用函数时对

这个
有疑问。您尚未显示如何调用函数，但很可能在该行之前记录
this
时，它不是您的
IntInsert
对象，而是
全局窗口
对象
我想您对调用函数时的
这是什么有疑问。您没有显示如何调用函数，但很可能在该行之前记录
this
时，它不是
IntInsert
对象，而是
全局窗口
对象
您的问题可能是由如何调用方法引起的。在Javascript中，
this
的值取决于方法的调用方式，而不是方法的声明方式。您不显示调用代码（问题可能出在哪里），但是如果您通过某种回调调用某个方法，则很容易丢失正确的方法调用，该调用将为您保留
this
的值。有关如何根据函数调用方式确定
此
值的更多信息，请参阅

有许多不同的可能解决方案

因为您的对象是一个单例（其中只有一个，并且您已经给了该实例一个名称），我建议，解决问题的最简单方法是只引用命名的singleton
IntInsert
，而不是引用
this
，因为这将解决方法中的
this
值的任何问题

您可以这样做：

var IntInsert = function()
{
    var self = this;
    ...
    var insertCtrl = function() //main function: it calls the others
    {
        ... 
        case 2:
            self.firstInsert(key)
            break
        ...
    }
    ...

    var firstInsert = function(key)
    {
        ...
    }

    return {
        insertCtrl: insertCtrl,
        firstInsert: firstInsert
    }
}

var state = 0

var IntInsert = //my object that represents a namespace, or a set of functions
{
    insertCtrl : function() //main function: it calls the others
    {
        if (lookup()) return
        if (!state) state = 1
        var key = document.getElementById("newegg").value
        switch(state)
        {
            case 1:
                IntInsert.preInsert(key)
                break
            case 2:
                IntInsert.firstInsert(key)
                break
        }
    },

    preInsert : function(key)
    {
        $("#terminal").css("color", "green")
        $("#terminal").text("Inserting element '" + String(key) + "'")
        $("#t2cell" + String(cuckoohash.h2(key))).css("background-color", "White")
        $("button").prop("disabled", true)
        $("input").prop("disabled", true)
        $("#nextstep").prop("disabled", false)
        state++
    },

    firstInsert : function(key)
    {
        key = [document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML, document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML = key][0] // key <-> t1[h1(key)]
        if (!key)
        {
            $("#t1cell" + String(cuckoohash.h1(document.getElementById("t1").rows[cuckoohash.h1(key)].cells[0].innerHTML))).css("background-color", "LightGreen")
            IntInsert.finishedInsert()
        }
    },

    finishedInsert : function()
    {
        $("#terminal").css("color", "green")
        $("#terminal").text("Element '" + String(key) + "' inserted")
    }
}

您可以使用以下选项：

    $("#terminal").css("color", "green").text("Element '" + String(key) + "' inserted");

    $("#terminal").text("Element '" + key + "' inserted");


在Javascript中，您很少需要使用
string（key）
显式强制转换为字符串，因此：

    $("#terminal").css("color", "green");
    $("#terminal").text("Element '" + String(key) + "' inserted");

    $("#terminal").text("Element '" + String(key) + "' inserted");

您可以使用以下选项：

    $("#terminal").css("color", "green").text("Element '" + String(key) + "' inserted");

    $("#terminal").text("Element '" + key + "' inserted");

向字符串中添加任何内容都将自动将其转换为字符串，以供您自动使用

您费劲地创建了一个单例名称空间对象
IntInsert
，但您声明了不在该名称空间对象中的变量
state
。看起来你应该做另一个，而不是两个的奇怪组合。您可能想要名称空间对象中的相关内容，也可能不想要，而像
state这样的通用命名变量可能会出现命名冲突。我想应该是你的目标

混合使用jQuery选择器（如
$（“#terminal”）
和
document.getElementById（“newegg”）
）是很奇怪的。如果你坚持，代码通常会更干净