Параметры функции Javascript

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" имеет параметр с именем "узел", но когда код вызывает его, он ничего не передает. Также объект "узел" не является глобальным (насколько я знаю).

Итак, я не понимаю, как это работает? Это какая-то магия, которая есть у Javascript?

Кроме того, когда я делаю console.debug для печати "узла", в нем есть что-то. (console.debug для FireBug)

Спасибо за ваше время, J * +1010 *

Answer 1

Когда код выполняет `TreePanel.on ('click', showDocumentFromTree) ', он не вызывает метод showDocumentFromTree, передает функцию showDocumentFromTree в качестве аргумента. Затем он будет вызван обработчиком события onclick, для которого он настроен, и тогда ему будет передан аргумент узла.

Answer 2

Первая строка связывает функцию showDocumentFromTree с событием щелчка. То, что передается в TreePanel.on, является ссылкой на функцию showDocumentFromTree, а не сам вызов.

Когда происходит событие, будет вызвана связанная функция (и), с инициирующим объектом в качестве первого параметра. В этом случае это будет узел DOM, по которому щелкнули.

Для иллюстрации, первая строка может быть переписана так:

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

ОК, может быть, это не так понятно, но вы можете видеть, что он фактически передает функцию в качестве аргумента методу on вместо вызова самого метода.

Answer 3

TreePanel - это класс / компонент в Extjs. В вашей первой строке:

TreePanel.on ('click', showDocumentFromTree);

Вы назначаете обработчик click для класса TreePanel. Это означает, что всякий раз, когда нажимается TreePanel, она вызывает вашу функцию showDocumentFromTree. Частью события Click для TreePanel является передача TreeNode, который инициировал или был элементом, который "вызвал" событие click.

Чтобы увидеть, как работает эта функция, посмотрите на класс Ext.tree.TreeEventModel, в частности функции initEvents, delegateClick и onNodeClick.

Answer 4

Не повторяя того, что говорили другие авторы о браузере, предоставляющем аргументы функции, я хотел бы сделать общее замечание о javaScript как о языке. JavaScript, в отличие от языков, таких как C ++ и Java, НЕ учитывает параметры, определенные в сигнатуре функции. Это означает, что у вас может быть такая функция:

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

Тогда назовите это любым способом ниже:

doSomething();

doSomething(foo);

doSomething(foo, bar);

doSomething(foo, bar, baz);

и т.д ..

Если он вызывается без параметров, определенных в подписи, отсутствующие параметры будут неопределенными. Доступ к дополнительным параметрам возможен только через массив args, который есть у всех функций.

Я знаю, что это не относится к вашему вопросу, но я подумал, что это может быть полезно для контекста и общего интереса.

Answer 5

В этом случае параметр showDocumentFromTree является магическим параметром, который предоставляется браузером, когда пользователь нажимает на элемент, к которому прикреплено действие. В этом случае node будет означать TreePanel. Javascript - это ключевое слово объясняет более подробно об этом механизме. Вероятно, чаще используется имя параметра this, чем node, как в вашем примере.