다양한 browsers_javascript 기술에서 javascript 변수 범위를 처리하는 방법

1. 프로토타입에 대하여: 여기서 프로토타입은 유명한 프로토타입 프레임워크가 아닌 자바스크립트의 기능입니다:

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]


2. 변수 범위 및 IE와 Firefox의 다양한 js 처리에 대한 몇 가지 예는 다음과 같습니다. 그 중 일부는 다른 곳에서 본 메모이고 일부는
2.1

[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]


2.2

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]

2.3: <button id="thebutton" onclick="click_handler()"></button>
... 클릭해주세요!

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]

2.4 <button id="thebutton" onclick="click_handler(this)"></button>
... 클릭해주세요!

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

<button id="thebutton" onclick="click_handler(this)">2.5 </button>
클릭해주세요!

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

] <button id="thebutton" onclick="click_handler(this)"></button>2.6
클릭해주세요!

[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]<button id="thebutton" onclick="click_handler(this)"> </button>2.7
클릭해주세요!

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

2.8 

<button id="thebutton" onclick="click_handler(this)">Click me!</button> <script type="text/javascript"> function real_func() { alert(this); } function btn_click(){ setTimeout(real_func,100); } function addhandler() { the_button = document.getElementById('thebutton'); the_button.onclick = btn_click; } window.onload = addhandler; //result [undefined] </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.9 

<button id="thebutton" onclick="click_handler(this)">Click me!</button> <script type="text/javascript"> Function.prototype.bind = function(obj) { var method = this, temp = function() { return method.apply(obj, arguments); }; return temp; } var real_func=function() { alert(this); } function btn_click(){ setTimeout( real_func.bind(this),100); } function addhandler() { the_button = document.getElementById('thebutton'); the_button.onclick = btn_click; } window.onload = addhandler; //result [undefined] </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.10 

<script> //** variables need to be defined alert(document); // [object HTMLdocument] alert(window.document); // [object HTMLdocument] alert(window.face); //pretty var face="pretty"; alert(face); //pretty alert(window.face); //pretty alert(window.sock); //undefined alert(sock); // ERROR: sock not defined </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.11

<script type="text/javascript"> function method() { var window={}; alert(window.location); } alert(window.location); method(); alert(window.location); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.12

<script type="text/javascript"> var window={};//ERROR:非法赋值! // this works in IE,but throw an Exception in firefox alert(window.location); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.13

<script type="text/javascript"> /** 这是一段很让人恼火的代码 可以禁用alert */ window.alert("hello world"); window.alert=function(str){ document.write(str); }; alert("hello world"); window.alert("hello world"); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.14:

注意这三个html文件的结果有什么不同.
a.html: 

<script type="text/javascript"> alert(sock); function sock() { alert("function sock executed!"); } alert(sock); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

b.html:

<script type="text/javascript"> alert(sock); var sock=function() { alert("function sock executed!"); } alert(sock); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

c.html:

<script type="text/javascript"> // 这里并不弹出"undefined" // 有点偏心啊! alert(sock); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.15

看看IE,firefox下分别运行有何不同:

<script type="text/javascript"> Object.prototype.hello=function(){ alert("hello"); } window.hello(); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]