Déclarer les fonctions en JavaScript

Question

Double Possible:
Javascript: var nomfonction = function() {} vs fonction nomfonction() {}

Quelle est la différence entre ces deux façons de déclarer une fonction?

function someFunc() { ... }

var someFunc = function() { ... }

Je ne demande pas au sens technique du terme. Je ne demande pas ce qui est mieux pour la lisibilité, ou dont le style est préféré.

Answer 1

Je suis sur avis différent avec la plupart des gens ici. Techniquement, cette syntaxe peut dire la même pour la déclaration des fonctions de deux façons (Je suis incorrecte sur mon dernier relevé. J'ai lu sur un diff post pourquoi ils sont techniquement diff et je vais l'ajouter en fin de compte, pourquoi) ; mais la façon dont ils jouent un rôle dans l'évolution des modèles est énorme. Je vous recommande fortement de "Javascript: Les Bonnes Parties" par Doughlas Crockford.

Mais pour prouver mon point de vue dans un jeu subtil et d'une manière simple; voici un petit exemple.

   //Global function existing to serve everyone
  function swearOutLoud(swearWord)
    	{
    		alert("You "+swearWord);			
    	}
 //global functions' territory ends here

 //here is mr. spongebob. He is very passionate about his objects; but he's a bit rude.
	var spongeBob = {
		name : "squarePants",
		swear : function(swearWord) {
			name = "spongy";

			alert("You "+swearWord);
			return this;
		}		
	}

	//finally spongebob learns good manners too. EVOLUTION!
	spongeBob.apologize = function() {
		alert("Hey " + this.name + ", I'm sorry man"!");
		return this;
	}


	//Ask spongebob to swear and then apologize in one go (CASCADING EFFECT!!)
	alert(spongeBob.swear("twit").apologize());

si vous regardez le code ci-dessus, j'ai déclaré une fonction avec un nom swearOutLoud. Qui prendrait un gros mot à partir d'un objet ou d'un appel et vous donnera la sortie. Il peut effectuer des opérations sur un objet à l'aide de la "ce" paramètre qui est passé et les arguments.

Toutefois seconde déclaration est déclaré comme un attribut de l'objet appelé "bob l'éponge". Il est important de noter, comme ici, je suis le mouvement vers un objet piloté par le comportement. Alors que je suis aussi le maintien d' "effet de cascade" comme je l'ai retourner "ce" si je n'ai rien d'autre pour le retour.

Quelque chose de semblable est fait en jquery; et ce motif qui tombe en cascade est important si vous essayez d'écrire un cadre ou quelque chose. Vous aurez le lien vers le Générateur de modèle de conception aussi.

Mais avec des fonctions déclarées comme un des attributs d'un objet que je suis en mesure de réaliser un objet centrée sur le comportement qui conduit à une meilleure paradigme de programmation. Sauf si bien conçus; les fonctions déclarées à l'extérieur avec accès global conduire à un non-orienté objet manière de coder. J'ai en quelque sorte préfère le dernier.

Pour voir la cascade en effet, regardez la dernière déclaration où vous pouvez demander à bob l'éponge à jurer et de s'excuser à la fois; même si spologize a été ajouté comme un attribut plus tard.

J'espère que mon point de vue clair. La différence à partir d'un point de vue technique peut être petit; mais à partir de la conception et du code de l'évolution perspective, il est énorme et fait un monde de différence.

Mais c'est juste moi! À prendre ou à laisser. :)

**EDIT Donc, les appels sont techniquement différents; car un nom de déclaration est liée à l'espace de noms global et qui est définie au moment de l'analyse. Donc, peut-être même avant que la fonction est déclarée.

 //success
 swearOutLoud("Damn");

 function  swearOutLoud(swearWord) {
    alert("You " + swearWord)
 }

Code ci-dessus fonctionne correctement. Mais le code ci-dessous ne sera pas.

    swear("Damn!");
       var swear = function(swearWord) {
		console.log(swearWord);
	}

Answer 2

Un avantage de l'utilisation d' function someFunc() { ... } , c'est que le nom de la fonction s'affiche dans Firebug débogueur. Fonctions qui sont déclarées l'autre sens (var someFunc = function() { ... }) sont anonymes.

Answer 3

Style sage le deuxième exemple est plus cohérent avec les autres communes de façons de déclarer des fonctions et, par conséquent, il pourrait être soutenu que c'est plus lisible

this.someFunc = function() { ... }
...
someFunc: function() { ... },

Toutefois, comme le mentionne également qu'il est anonyme et donc le nom n'apparaît pas lors de l'analyse. Une autre façon de déclarer la fonction est la suivante qui vous obtient le meilleur des deux mondes

var someFunc = function someFunc() { ... }

Answer 4

En fait, la différence est que la deuxième déclaration nous donne la possibilité de déclarer des fonctions comme ceci permettant d'avoir une fonction comme une propriété d'un objet :

var myObject=new Object();
myObject.someFunc=function() { ... };

Answer 5

Une autre différence est que, sur la plupart des navigateurs, ce dernier vous permet de définir les différentes mises en œuvre selon les circonstances, alors que l'ancien ne sera pas. Disons que vous voulez de la croix-navigateur d'inscription à l'événement. Si vous avez essayé de définir un addEventListenerTo de la fonction comme ceci:

if (document.addEventListener) {
    function addEventListenerTo(target, event, listener) {
        ....
    }
} else if (document.attachEvent) {
    function addEventListenerTo(target, event, listener) {
        ....
    }
} else {
    function addEventListenerTo(target, event, listener) {
        ....
    }
}

sur certains navigateurs, toutes les fonctions finissent par être analysé, avec le dernier qui prévaut. Résultat: le ci-dessus ne fonctionne tout simplement pas. L'attribution des fonctions anonymes pour les variables, cependant, fonctionne. Vous pouvez également appliquer et fonctionnelle de base de la programmation orientée aspects techniques de l'utilisation des fonctions anonymes attribués à des variables.

var fib = memoize(function (n) { 
    if (n < 0) return 0;
    if (n < 2) return 1;
    return fib(n-1) + fib(n-2); 
});

...
// patch the $ library function
if (...) {
    $ = around($, fixArg, fixResult);
}