Question

我正在开发一个涉及ExtJS库的项目，我发现了一段没有意义的代码（但它有效）。请帮忙:(。

TreePanel.on('click', showDocumentFromTree);
function showDocumentFromTree(node) {   
    if (TreePanel.getSelectionModel().isSelected(node)) {
        dataStore.baseParams = {
            node : node.id,
            limit : 10
        }
        dataStore.load({
            params : {
                start : 0
            }
        });
    }
};

因此“showDocumentFromTree”的函数定义有一个名为“node”的参数，但是当代码调用它时，它没有传递任何东西。此外，对象“节点”不是全局的（据我所知）。

所以我对它的运作方式感到困惑？这是Javascript的神奇之处吗？

另外，当我执行console.debug打印“node”时，它有内容。（fireBug的console.debug）

感谢您的时间， Ĵ

Answer 1

当代码执行`TreePanel.on（'click'，showDocumentFromTree）'时，不是调用showDocumentFromTree，它是传递函数showDocumentFromTree作为参数。稍后将通过它正在设置的onclick事件处理程序调用它，然后它将传递给它的node参数。

Answer 2

第一行将showDocumentFromTree函数绑定到click事件。传递给TreePanel.on的是对showDocumentFromTree函数的引用，而不是对调用本身的引用。

当事件触发时，将调用绑定函数，并将触发对象作为第一个参数。在这种情况下，它将是单击的DOM节点。

为了说明，可以将第一行重写为：

TreePanel.on('click', function(node) {
   showDocumentFromTree(node);
});

好吧，也许这不是更清楚，但你可以看到它实际上将函数作为参数传递给on方法，而不是调用方法本身。

Answer 3

TreePanel是Extjs中的一个类/组件。在你的第一行：

TreePanel.on（'click'，showDocumentFromTree）;

您正在为TreePanel类分配click处理程序。这意味着，只要单击TreePanel，它就会调用showDocumentFromTree函数。 TreePanel的Click事件的一部分是传递发起的TreeNode，或者是“导致”点击事件的项目。

要了解此功能的工作原理，请特别查看Ext.tree.TreeEventModel类，initEvents，delegateClick和onNodeClick函数。

Answer 4

在这种情况下，showDocumentFromTree的参数是一个魔术参数，当用户点击附加了操作的元素时，该参数由浏览器提供。在这种情况下，node会引用TreePanel。 Javascript - The this keyword解释了有关此机制的更多细节。在您的示例中，使用参数名称this比node更为常见。

Answer 5

如果没有重复其他海报所说的关于为函数提供参数的浏览器，我想对javaScript作为一种语言作一般性说明。与C ++和Java等语言不同，JavaScript不尊重函数签名中定义的参数。这意味着您可以拥有如下功能：

function doSomething(myParam){
  ... Does Some Stuff
}

然后以下列任何方式调用它：

doSomething();

doSomething(foo);

doSomething(foo, bar);

doSomething(foo, bar, baz);

等。

如果在没有签名中定义的参数的情况下调用它，则缺少的参数将是未定义的。额外参数只能由所有函数都具有的args数组访问。

我知道这不是特定于你的问题，但我认为它可能对背景和普遍兴趣有好处。

Javascript函数参数

5 个答案: