objet javascript obtient surchargée dans IE

Question

Geeks,

J'ai les codes suivants:

Snippet A:

var x = (function(){ this.id="Dog"; return this; }()); 
var y = (function(){ this.id="Cat"; return this; }()); 
alert(x.id); //outputs Cat 
alert(y.id); //outputs Cat 

Snippet B:

var x = (new function(){ this.id="Dog"; }); 
var y = (new function(){ this.id="Cat"; }); 
alert(x.id); //ouputs Dog 
alert(y.id); //outputs Cat 

Pourquoi x remplacé par y dans Snippet A et pas sur B?

Answer 1

Dans l'extrait A, sur x et y, le mot-clé this fait référence à l'objet global, vous créez en définissant la valeur à la même variable globale (window.id).

Dans l'extrait B, vous utilisez l'opérateur new et les fonctions sont exécutées en tant que fonctions constructeur. Le mot clé this fait référence à un objet nouvellement créé.

Pour éviter ce comportement dans votre extrait A, vous pouvez créer une nouvelle instance d'objet et de l'utiliser au lieu de this:

var x = (function(){ 
    var instance = {}; 
    instance.id = "Dog"; 
    return instance; 
}()); 

var y = (function(){ 
    var instance = {}; 
    instance.id = "Cat"; 
    return instance; 
}()); 

alert(x.id); //outputs Dog 
alert(y.id); //outputs Cat 

Lorsque vous appelez des fonctions globales, car ils sont membres de l'objet global:

globalFunction(); 

équivaut à:

window.globalFunction(); 

A Le contexte à l'intérieur de cette fonction sera l'objet global lui-même (window).

Answer 2

La différence entre les deux est que Snippet B utilise un constructor function en préfixant l'appel avec le mot-clé new, tandis que A ne soit pas extrait. C'est la réponse courte.

La réponse longue est que même si l'extrait A introduit une nouvelle portée sur chaque appel de fonction anonyme, car il est pas utilisé dans un contexte constructeur, il est variable de this indique simplement l'objet window global. Donc snippet A est équivalent à ceci:

var x = (function(){ window.id="Dog"; return window; }()); 
var y = (function(){ window.id="Cat"; return window; }()); 

Ainsi, chaque invocation aplatit juste la même variable [global].

Puisque l'extrait B utilise le mot clé new, vous définissez et appelez immédiatement une fonction de constructeur. JavaScript procède à l'initialisation de la variable this dans la fonction constructeur pour pointer vers une nouvelle instance de la fonction anonyme [juste définie].

Vous avez peut-être déjà vu l'idiome new function(){} présenté comme le meilleur moyen de définir et d'exécuter immédiatement un bloc de code. Eh bien, il vient avec le surcoût de l'instanciation de l'objet JavaScript (comme vous l'avez trouvé), et n'est généralement plus utilisé aussi largement.