Javascript 未定义函数

我对JavaScript非常陌生，我需要一些建议来说明为什么我会收到一条错误消息，其中指出

this.node

是

未定义的

我拥有的是一个基于
ExtJs
构建的应用程序，它使用MVC架构师。在我的控制器中，我开发了一个包含树和网格的布局。在树中，可以通过单击新按钮添加父节点，其方法可以完美地工作

但是，使用用于插入记录的相同表单从我的数据库中通过
id
更新记录的方法正在生成一条消息，说明
此节点。节点
是
未定义的

这是我的
编辑处理程序的代码
：

handleBtnEdit: function (btn, ev, eOpts) {
    console.log(this);
    var id = parseInt(this.node.get("id")), rec = this.app.getStore("ProblemRequirements").getById(id);
    this.launchForm(rec);
}, 
handleBtnAdd: function (btn, ev, eOpts) {
    var rec = Ext.create("SPOT.model.ProblemRequirement");
    this.launchForm(rec);
}, 
handleBtnSave: function (btn, eOpts) {
    var win = btn.up("window"), pnl = win.down("form"), frm = pnl.getForm(), grid = pnl.down("grid"), store = grid.getStore(), rec = frm.getRecord();
    if (frm.isValid()) {
        rec.set(frm.getValues());
        win.setLoading("Saving, please wait...");
        rec.save({
            callback : function(rec, operation) {
                if (operation.success) {
                    win.close();
                    this.getStore("ProblemRequirements").load();
                    this.playMsg("Problem requirement successfully " + (operation.action === "update" ? "updated" : "created" ) + ".");
                } else {
                    win.setLoading(false);
                    Ext.Msg.alert("Error!", operation.error[0].ERROR);
                }
            },
            scope : this
        });
    }
}, 
launchForm: function (rec) {
    Ext.create("Ext.window.Window", {
        buttons : [{
            handler : this.handleBtnSave,
            scope : this,
            text : "Save"
        }, {
            handler : this.handleBtnCancel,
            scope : this,
            text : "Cancel"
        }],
        closable : false,
        draggable : false,
        iconCls : (rec.phantom ? "icon-add" : "icon-edit"),
        items : [{
            listeners : {
                afterrender : {
                    fn : function(pnl, eOpts) {
                        pnl.getForm().loadRecord(rec);
                    },
                    scope : rec
                }
            },
            xtype : "problemrequirementForm"
        }],

        modal : true,
        resizable : false,
        title : (rec.phantom ? "Create a New" : "Edit") + " Problem Requirement",
        width : 500
    }).show();
},

节点
超出范围。您需要确定在中定义了什么范围
节点
，并适当地引用它，或者需要使其全局可见，或者需要在本地（
此
）范围中定义它

考虑这个人为的例子：

// Set global window var 'a'
window.a = 'foo';

// Create an object which has it's own scope:
var x = {
    a:'bar',

    speak:function(scope){
        console.log(scope['a']);
    }
};

然后你可以这样做：

// Have x report on its own scope (in function 'speak' this is the same
// as doing: console.log(this['a'])
x.speak(x);

> bar

// Set the scope to the (global) 'window' scope
x.speak(window);

> foo

现在，如果我们重新定义
x
，使其没有成员
a
，并尝试相同的操作：

var x = {
    speak:function(scope){
        console.log(scope['a']);
    }
};

x.speak(window);

> foo

x.speak(x);

> undefined

在上一个示例中，在
x
对象的范围内没有
a
，因此结果是
undefined
。它无法在全局范围中看到
a
，因为它只显式地检查本地（
this
）范围

显然，这是一个愚蠢的例子，但希望它能有所帮助

欢呼声
节点
超出范围。您需要确定在中定义了什么范围
节点
，并适当地引用它，或者需要使其全局可见，或者需要在本地（
此
）范围中定义它

考虑这个人为的例子：

// Set global window var 'a'
window.a = 'foo';

// Create an object which has it's own scope:
var x = {
    a:'bar',

    speak:function(scope){
        console.log(scope['a']);
    }
};

然后你可以这样做：

// Have x report on its own scope (in function 'speak' this is the same
// as doing: console.log(this['a'])
x.speak(x);

> bar

// Set the scope to the (global) 'window' scope
x.speak(window);

> foo

现在，如果我们重新定义
x
，使其没有成员
a
，并尝试相同的操作：

var x = {
    speak:function(scope){
        console.log(scope['a']);
    }
};

x.speak(window);

> foo

x.speak(x);

> undefined

在上一个示例中，在
x
对象的范围内没有
a
，因此结果是
undefined
。它无法在全局范围中看到
a
，因为它只显式地检查本地（
this
）范围

显然，这是一个愚蠢的例子，但希望它能有所帮助

干杯
用此版本替换
把手编辑
，并复制粘贴控制台日志

handleBtnEdit: function (btn, ev, eOpts) {
    console.log("-- Start of handleBtnEdit --");

    console.log(btn);
    console.log("-- 1 --");

    console.log(ev);
    console.log("-- 2 --");

    console.log(this);
    console.log("-- 3 --");

    console.log(this.getAttribute("id"));
    console.log("-- 4 --");

    console.log(this.node);
    console.log("-- 5 --");

    //var id = parseInt(this.node.get("id"));
    //var rec = this.app.getStore("ProblemRequirements").getById(id);
    //this.launchForm(rec);
}, 

另外，添加调用
handleBtnEdit
的代码

更新

控制台日志：

-- Start of handleBtnEdit -- 
btn :: Object { disabled= false , iconCls= "icon-edit" , id= "btn-edit" , more...} 
-- 1 -- 
ev :: Object { browserEvent=Event click, type= "click" , button= 0 , more...} 
-- 2 -- 
this :: Object { application={...}, id= "ProblemRequirements" , hasListeners={...}, more...} 
-- 3 --

因此，参数传递到一个带有
id=“btn edit”
的按钮中。
此
似乎是一个
对象
，具有
id=“ProblemRequirements”

更新2

由于
此
中没有节点，且其
id
似乎不是我们需要的，请尝试以下代码：

handleBtnEdit: function (btn, ev, eOpts) {
    var id = parseInt(btn.id);
    var rec = this.application.getStore("ProblemRequirements").getById(id);
    this.launchForm(rec);
}, 

用此版本替换
handletnedit
，并复制粘贴控制台日志

handleBtnEdit: function (btn, ev, eOpts) {
    console.log("-- Start of handleBtnEdit --");

    console.log(btn);
    console.log("-- 1 --");

    console.log(ev);
    console.log("-- 2 --");

    console.log(this);
    console.log("-- 3 --");

    console.log(this.getAttribute("id"));
    console.log("-- 4 --");

    console.log(this.node);
    console.log("-- 5 --");

    //var id = parseInt(this.node.get("id"));
    //var rec = this.app.getStore("ProblemRequirements").getById(id);
    //this.launchForm(rec);
}, 

另外，添加调用
handleBtnEdit
的代码

更新

控制台日志：

-- Start of handleBtnEdit -- 
btn :: Object { disabled= false , iconCls= "icon-edit" , id= "btn-edit" , more...} 
-- 1 -- 
ev :: Object { browserEvent=Event click, type= "click" , button= 0 , more...} 
-- 2 -- 
this :: Object { application={...}, id= "ProblemRequirements" , hasListeners={...}, more...} 
-- 3 --

因此，参数传递到一个带有
id=“btn edit”
的按钮中。
此
似乎是一个
对象
，具有
id=“ProblemRequirements”

更新2

由于
此
中没有节点，且其
id
似乎不是我们需要的，请尝试以下代码：

handleBtnEdit: function (btn, ev, eOpts) {
    var id = parseInt(btn.id);
    var rec = this.application.getStore("ProblemRequirements").getById(id);
    this.launchForm(rec);
}, 

属性与作用域无关。能否进一步解释中定义的作用域节点的含义以及如何正确引用它？你能给我举个例子说明怎么做吗？@Bergi你的Blith语句需要一些限定条件，因为我可以很容易地说，这不是真的。@Madbreaks:这里的值“错误”，与变量范围无关。并且
节点
也不是变量。@Madbreaks:No.
此
是为函数调用动态确定的上下文（正确：
thisArg
）。它与静态变量作用域无关。请阅读我上面链接的文档，如果这对ES规范没有帮助的话。属性与范围无关。您能否进一步解释定义范围节点的含义以及如何正确引用它？你能给我举个例子说明怎么做吗？@Bergi你的Blith语句需要一些限定条件，因为我可以很容易地说，这不是真的。@Madbreaks:这里的值“错误”，与变量范围无关。并且
节点
也不是变量。@Madbreaks:No.
此
是为函数调用动态确定的上下文（正确：
thisArg
）。它与静态变量作用域无关。请阅读我上面链接的文档，如果这对ES规范没有帮助。您是否尝试过
此.getAttribute（“id”）
？添加getAttribute不会改变任何事情。我将在何处进行此调用，以及应该查看哪些结果？添加
警报（此）作为函数中的第一行。这应该会提醒您正在查看哪种类型的元素。好的，您可以尝试
console.log（This）
并告诉您在控制台中看到了什么。您是否尝试过
This.getAttribute（“id”）
？添加getAttribute不会改变任何事情。我将在何处进行此调用以及应该查看哪些结果？添加
警报（This）作为函数中的第一行。这会提醒您正在查看哪种元素。好的，您可以尝试
console.log（This）
并告诉您在控制台中看到了什么。请不要发布多个答案。如果您有其他想法，请相应地更新您的第一个答案。--handleBtnEdit的开始--Proble…1266556（第202行）对象{disabled=false，iconCls=“icon edit”，id=“btn edit”，more…}Proble…1266556（第204行）--1--Proble…1266556（第205行）对象{browservevent=Event click，type=“click”，button=0，more…}问题…1266556（第207行）--2--