conflictuel Javascript nom de la variable dans Chrome 61.0.3163.79

navigateur Chrome My a récemment été mis à jour à la version 61.0.3163.79 et je remarqué un comportement étrange avec le code Javascript suivant:conflictuel Javascript nom de la variable dans Chrome 61.0.3163.79

<!doctype html> 
 
<html lang="fr"> 
 
    <head> 
 
     <script> 
 
      var scroll = { 
 
       myFunction : function() {console.log('myFunction called');} 
 
      } 
 
     
 
      scroll.myFunction(); /* first call */ 
 
      window.scroll.myFunction(); /* second call */ 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <button onclick="scroll.myFunction()">test1</button> <!-- third call --> 
 
     <button onclick="window.scroll.myFunction()">test2</button> <!-- fourth call --> 
 
    </body> 
 
</html>

Cette le code écrase la fonction window.scroll (ne me demandez pas pourquoi, c'est un code existant). Le résultat dans la console est le suivant lorsqu'il est exécuté et lorsque le « test1 » et les boutons « test2 » sont cliqués:

myFunction called 
myFunction called 
Uncaught TypeError: scroll.myFunction is not a function at HTMLButtonElement.onclick 
myFunction called

En version antérieure Chrome, et MSIE 11, l'appel de fonction a fonctionné correctement en cliquant sur le « test1 "et "boutons test2", ce qui dans les messages suivants dans la console:

myFunction called 
myFunction called 
myFunction called 
myFunction called

maintenant, les questions suivantes:

Pourquoi le comportement du navigateur Chrome 61.0.3163.79 différent de la première versions et d'autres navigateurs?
Est-ce un bug?
Ce comportement sera-t-il adopté par les futures versions et d'autres navigateurs?

Notez que dans le même temps, j'ai changé le nom de la variable pour éviter le conflit de noms avec les fonctionnalités natives du navigateur.

Source

2017-09-19 Julien Kronegg

Voici un très bon exemple de ne pas utiliser de globals .. :) .. Il semble que le bouton ait une propriété scroll, peut-être ajoutée récemment. Donc, this.scroll = TheButton.scroll .. Changez votre code en window.scroll.myFunction, et cela fonctionnera à nouveau. – Keith

@Keith: J'ai modifié le code pour refléter la variante suggérée. S'il vous plaît promouvoir votre commentaire dans une réponse. –

<button onclick="scroll.myFunction()">test1</button>

Le problème ici est que la fonction de défilement de votre après est sur l'objet de la fenêtre ,.

Il apparaîtrait dans les versions récentes de Chrome qu'ils ont ajouté une méthode de défilement au bouton actuel. Donc, ce que vous finissez par appeler est button.scroll.myFunction, plutôt que window.scroll.myFunction. Les fournisseurs de navigateurs peuvent ajouter n'importe quelle méthode nommée à tout moment, donc même si vous avez créé un global appelé myScroll, rien n'empêche en théorie le fournisseur du navigateur d'ajouter un myScroll à l'élément button. Évidemment, il est peu probable qu'ils le fassent, mais quelque chose à savoir.

La meilleure façon d'éviter ce genre de problèmes est de toujours avoir le contrôle de votre portée, ne jamais compter sur les globals, à moins que ces globals soient passés dans une portée. Les fermetures Javascript aident vraiment ici. Malheureusement dans votre exemple, vous avez utilisé la liaison d'événements HTML, plutôt que la liaison de code, ce qui rend cela impossible.

Source

2017-09-21 10:28:27 Keith

conflictuel Javascript nom de la variable dans Chrome 61.0.3163.79

Répondre

Questions connexes