2017-09-19 9 views
3

내 크롬 브라우저는 최근 버전 61.0.3163.79으로 업데이트되었습니다 나는 다음과 같은 자바 스크립트 코드로 이상한 행동을 발견 :충돌 자바 스크립트 변수 이름은 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 

이전 크롬 버전에서, 그리고 MSIE 11에서, 함수 호출이 제대로 작동 : 콘솔의 결과는"TEST1 "와"TEST2 "버튼을 클릭 할 때 실행하면 다음과 같다 "와"TEST2 "버튼을, 콘솔에 다음과 같은 메시지가 결과 : 이제

myFunction called 
myFunction called 
myFunction called 
myFunction called 

질문 :

  • 왜이전에서 61.0.3163.79 행동 다른 크롬 브라우저입니다출시 및 다른 브라우저?
  • 이것은 버그입니까?
  • 이 동작은 향후 릴리스 및 다른 브라우저에서 채택됩니까?

그동안 브라우저 네이티브 기능과 이름이 충돌하지 않도록 변수 이름을 변경했습니다. 여기

+1

다음은 전역을 사용하지 않는 좋은 예입니다. :) Button에 scroll 속성이 있으며 최근에 추가 된 것처럼 보입니다. 그래서 this.scroll = TheButton.scroll .. 코드를 window.scroll.myFunction으로 변경하면 다시 작동합니다. – Keith

+0

@Keith : 제안 된 변형을 반영하도록 코드를 편집했습니다. 답변에 대한 귀하의 의견을 홍보하십시오. –

답변

1

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

문제는이 후 윈도우 객체에 스크롤이다 ,.

최근 버전의 Chrome에는 실제 버튼에 스크롤 방법이 추가 된 것처럼 보입니다. 그래서 전화가 끝나는 곳은 window.scroll.myFunction이 아니라 button.scroll.myFunction입니다.

브라우저 공급 업체는 언제든지 명명 된 메서드를 추가 할 수 있으므로 myScroll이라는 전역을 만든 경우에도 이론적으로 브라우저 공급 업체가 myScroll을 button 요소에 추가하는 것을 막을 수있는 방법은 없습니다. 명백하게 그들은 그렇게 할 것 같지 않지만, 알아야 할 것이 있습니다.

이런 종류의 문제를 피하는 가장 좋은 방법은 항상 범위를 제어하고, 전역을 사용하지 않고 범위에 전달하지 않는 것입니다. Javascript 클로저가 정말 도움이됩니다. 불행히도 예제에서 코드 바인딩이 아닌 HTML 이벤트 바인딩을 사용 했으므로이를 불가능하게 만든다.