Il existe déjà de très bonnes réponses, mais j'en publie une nouvelle pour souligner mon observation sur le cas III ci-dessous sur ce qui se passe lorsque vous avez une déclaration de retour explicite dans une fonction que vous êtes en new
train de créer. Jetez un œil aux cas ci-dessous:
Cas I :
var Foo = function(){
this.A = 1;
this.B = 2;
};
console.log(Foo()); //prints undefined
console.log(window.A); //prints 1
Ci-dessus est un cas simple d'appel de la fonction anonyme pointée par Foo
. Lorsque vous appelez cette fonction, elle revient undefined
. Puisqu'il n'y a pas d'instruction de retour explicite, l'interpréteur JavaScript insère avec force une return undefined;
instruction à la fin de la fonction. Ici , la fenêtre est l'objet d'invocation (contextuelle this
) qui obtient de nouveaux A
et B
propriétés.
Cas II :
var Foo = function(){
this.A = 1;
this.B = 2;
};
var bar = new Foo();
console.log(bar()); //illegal isn't pointing to a function but an object
console.log(bar.A); //prints 1
Ici, l'interpréteur JavaScript voyant le new
mot - clé crée un nouvel objet qui agit comme l'objet d'invocation (contextuel this
) de la fonction anonyme pointée par Foo
. Dans ce cas A
et B
devenez propriétés sur l'objet nouvellement créé (à la place de l'objet fenêtre). Étant donné que vous n'avez aucune instruction de retour explicite, l'interpréteur JavaScript insère avec force une instruction de retour pour renvoyer le nouvel objet créé en raison de l'utilisation du new
mot - clé.
Cas III :
var Foo = function(){
this.A = 1;
this.B = 2;
return {C:20,D:30};
};
var bar = new Foo();
console.log(bar.C);//prints 20
console.log(bar.A); //prints undefined. bar is not pointing to the object which got created due to new keyword.
Ici encore, l'interpréteur JavaScript voyant le new
mot - clé crée un nouvel objet qui agit comme l'objet d'invocation (contextuel this
) de la fonction anonyme pointée par Foo
. Encore une fois, A
et B
devenez des propriétés sur l'objet nouvellement créé. Mais cette fois, vous avez une déclaration de retour explicite, donc l'interpréteur JavaScript ne fera rien de lui-même.
La chose à noter dans le cas III est que l'objet créé en raison d'un new
mot clé s'est perdu de votre radar. bar
pointe en fait vers un objet complètement différent qui n'est pas celui créé par l'interpréteur JavaScript à cause du new
mot-clé.
Citant David Flanagan de JavaScripit: The Definitive Guide (6th Edition), Ch. 4, page n ° 62:
Lorsqu'une expression de création d'objet est évaluée, JavaScript crée d'abord un nouvel objet vide, tout comme celui créé par l'initialiseur d'objet {}. Ensuite, il appelle la fonction spécifiée avec les arguments spécifiés, en passant le nouvel objet comme valeur du mot-clé this. La fonction peut ensuite l'utiliser pour initialiser les propriétés de l'objet nouvellement créé. Les fonctions écrites pour être utilisées en tant que constructeurs ne renvoient pas de valeur, et la valeur de l'expression de création d'objet est l'objet nouvellement créé et initialisé. Si un constructeur renvoie une valeur d'objet, cette valeur devient la valeur de l'expression de création d'objet et le nouvel objet créé est ignoré.
--- Informations supplémentaires ---
Les fonctions utilisées dans l'extrait de code des cas ci-dessus ont des noms spéciaux dans le monde JS comme ci-dessous:
Cas I et II - Fonction constructeur
Cas III - Fonction d'usine. Les fonctions d'usine ne doivent pas être utilisées avec le new
mot-clé que j'ai fait pour expliquer le concept dans le thread actuel.
Vous pouvez lire sur la différence entre eux dans ce fil.