Pourquoi l'alias des fonctions JavaScript provoque-t-il des erreurs dans certains navigateurs mais pas dans d'autres ?

Aliasing des fonctions JavaScript : un obstacle inattendu

Question :

Malgré les tentatives utilisant à la fois les méthodes alias et function-wrapper, l'alias document.getElementById échoue dans Firefox, Chrome et même les fenêtres de débogage. Une erreur est générée dans Firefox, tandis qu'une « invocation illégale » se produit dans Chrome. De plus, l'opération fonctionne dans Internet Explorer 8.

Enquête :

Après une analyse approfondie, le problème réside dans la façon dont les fonctions JavaScript sont vaguement attachées aux objets et interagissent avec la portée.

Explication :

Lors de l'appel d'une fonction JavaScript, l'interpréteur attribue une portée et la transmet à la fonction. Si une fonction utilise ceci pour faire référence à la portée, la valeur de ceci sera la portée qui a été transmise.

Cependant, vous pouvez spécifier manuellement la portée à l'aide de la méthode apply, en remplaçant la portée par défaut attribuée par le interprète.

Le problème d'alias :

L'alias de document.getElementById en tant que $ rencontre une erreur car lorsque vous appelez $('someElement'), la portée est définie sur l'objet window, pas sur le document objet. Par conséquent, si l'implémentation de getElementById s'attend à ce que la portée soit le document, la fonction échouera.

Correction :

Pour résoudre ce problème, vous pouvez utiliser $.apply(document, [' someElement']) pour définir explicitement la portée de l'objet document.

Pourquoi cela fonctionne dans Internet Explorer :

Le succès inattendu de l'alias dans Internet Explorer peut être attribué au fait que dans IE , l'objet window est équivalent à l'objet document. Si tel est le cas, l'alias devrait fonctionner correctement dans IE.

Exemple complet :

Pour illustrer davantage le problème, considérons la fonction Person suivante :

function Person(birthDate) {
  this.birthDate = birthDate;
  this.getAge = function() { return new Date().getFullYear() - this.birthDate.getFullYear(); };
  this.getAgeSmarter = function() { return this.getAge(); };
  this.getAgeSmartest = function() { return (this.constructor == Person ? this : self).getAge(); };
}

Avec deux instances de la classe Person créées, yogi et anotherYogi, voici les sorties correspondantes :

• console.log(yogi.getAge()) : 100 (correct)
• console. log(ageAlias()) : -1 (portée incorrecte)
• console.log(ageAlias.apply(yogi)) : 100 (portée correcte)
• console.log(ageSmarterAlias()) : 100 (portée correcte)
• console.log(ageSmarterAlias.apply(anotherYogi)) : 100 (portée incorrecte)
• console.log(ageSmartestAlias()) : 100 (portée correcte)
• console.log(ageSmartestAlias.apply(document)) : 100 (portée correcte)
• console.log(ageSmartestAlias.apply(anotherYogi)) : 200 (portée correcte)

L'exemple démontre la complexité de la portée et l'importance d'utiliser la méthode apply lors de l'alias des fonctions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!