2017-09-19 14 views
3

私のChromeブラウザは、最近のバージョン61.0.3163.79に更新されていると私は、次のJavaScriptコードで奇妙な行動に気づい:競合Javascriptの変数名は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>

これをコードはwindow.scroll関数を上書きします(理由はわかりませんが、これは従来のコードです)。 「TEST1をクリックすると

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

以前のChromeのバージョンでは、とMSIE 11で、関数の呼び出しが正常に働いていた:コンソールでの結果は、「TEST1」と「TEST2」ボタンがクリックされたときに実行するとするときは、次のですコンソールに次のメッセージが生じ」と 『TEST2』ボタン、:

myFunction called 
myFunction called 
myFunction called 
myFunction called 

は今の質問:

  • なぜChromeブラウザは以前と異なる61.0.3163.79動作ですリリースと他のブラウザ
  • これはバグですか?
  • この動作は将来のリリースや他のブラウザで採用されるのでしょうか?

その間、ブラウザのネイティブ機能との名前の競合を避けるため、変数名を変更しました。

+1

はここでグローバルを使用していないのは非常に良い例..です:) ..ボタンはスクロールプロパティ、多分最近追加さを持っているように見えます。だからthis.scroll = TheButton.scroll ..あなたのコードをwindow.scroll.myFunctionに変更すれば、それは再び動作します。 – Keith

+0

@Keith:提案された変形を反映するようにコードを編集しました。あなたのコメントを回答にプロモートしてください。 –

答えて

1

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

ここでの問題は、あなたの後をスクロールするには、ウィンドウオブジェクトの上にあるということです、。

彼らが実際のボタンにスクロール方法を追加したクロームの最近のバージョンに表示されます。だから、window.scroll.myFunctionではなく、button.scroll.myFunctionとなります。

ブラウザベンダーは、いつでも任意の名前のメソッドを追加することができますので、あなたがmyScrollというグローバルを作成した場合でも、理論的には、ボタン要素にmyScrollを追加し、ブラウザのベンダーを止めるものは何もありません。明らかにそれはそうではありませんが、認識すべきことがあります。

問題のこれらの並べ替えを回避する最善の方法これらのグローバル変数がスコープに渡されていない限り、常にあなたのスコープのコントロールを持つことである、グローバルに頼ることはありません、。 JavaScriptのクロージャは本当にここで助けます。残念ながら、あなたの例では、コードバインディングではなくHTMLイベントバインディングを使用していますので、これは不可能です。