Deux fonctions avec le même nom en JavaScript - comment cela peut-il fonctionner?

Autant que je sache, la fonction foo() { aaa(); } est juste var foo = function(){ aaa() } en JavaScript.

Qui est en fait incorrect. JavaScript a deux différents, mais liés choses: la Fonction déclarations, et la fonction expressions. Ils se produisent à différents moments dans le cycle d'analyse et ont des effets différents.

C'est une fonction déclaration:

function foo() {
    //...
}

Les déclarations de fonction sont traitées lors de l'entrée dans le cadre englobant, avant toute étape-par-étape de code est exécuté.

C'est une fonction expression (plus précisément, un anonyme):

var foo = function() {
    //...
};

Les expressions de fonction sont traitées dans le cadre de l'étape-par-étape de code, à l'endroit où ils apparaissent (comme toute autre expression).

Votre code est cité à l'aide d'un fonction nommée expression, qui ressemble à ceci:

var x = function foo() {
    //...
};

(Dans votre cas, c'est l'intérieur d'un objet littéral, donc, c'est sur le côté droit d'une : au lieu d'une =, mais c'est toujours une fonction nommée expression.)

C'est parfaitement valide, ignorant la mise en œuvre de bugs (plus dans un instant). Il crée une fonction avec le nom foo, n'est pas mettre foo dans le cadre englobant, et attribue alors que la fonction de la x variable (tout ce qui se passe lorsque l'expression est détectée dans l'étape-par-étape de code). Quand je dis qu'il n'a pas mis foo dans le cadre englobant, je veux dire exactement que:

var x = function foo() {
    alert(typeof foo); //alerts "function" (in compliant implementations)
};
alert(typeof foo);     //alerts "undefined" (in compliant implementations)

Remarque comment c'est différent de la façon dont la fonction déclarations de travail (d'où le nom de la fonction est ajouté à l'affichage de la portée).

Fonction nommée expressions de travailler sur des versions compatibles. Historiquement, il y avait des bugs dans les implémentations (début Safari, IE8 et plus tôt). Les implémentations modernes se tromper, y compris IE9 et. (Plus de détails ici: deux et ici: nom de fonction expressions démystifié.)

Donc, dans cet exemple, le me variable devraient pas être corectly résolu à partir de l'intérieur de l'méthodes

En fait, il devrait être. Une fonction est le vrai nom (le symbole entre function et l'ouverture de la parenthèse) est toujours portée au sein de la fonction (si la fonction est à partir d'une déclaration ou d'une fonction nommée expression).

NOTE: La ci-dessous a été écrit en 2011. Avec les progrès de JavaScript depuis, je n'en ressens plus le besoin de faire des choses comme la ci-dessous, sauf si je sais que je vais avoir affaire avec IE8 (ce qui est très rare de nos jours).

var foo = (function(){
    var publicSymbols = {};

    publicSymbols.bar1 = bar1_me;
    function bar1_me() {
        var index = 1;
        alert(bar1_me);
    }

    publicSymbols.bar2 = bar2_me;
    function bar2_me() {
        var index = 2;
        alert(bar2_me);
    }

    return publicSymbols;
})();

var foo = (function(){
    return {
        bar1: bar1_me,
        bar2: bar2_me
    };

    function bar1_me() {
        var index = 1;
        alert(bar1_me);
    }

    function bar2_me() {
        var index = 2;
        alert(bar2_me);
    }
})();

OriginalL'auteur T.J. Crowder

Ce qui se passe ici est que function() a de nombreuses significations différentes et les utilise.

Quand je dis

bar1 : function me() {
}

alors que c'est 100% équivalent à

bar1 : function() {
}

c'est à dire le nom n'a pas d'importance lorsque vous utilisez la fonction à attribuer à la variable bar1. À l'intérieur, me est affecté, mais dès que la définition de la fonction est à gauche (lorsque vous affectez bar2), me est créé de nouveau comme une variable locale pour la définition de la fonction qui est stocké dans bar2.

OriginalL'auteur Aaron Digulla