不同浏览器javascript变量作用域的处理方法_javascript技巧

2.关于变量作用域,和IE,firefox对js的不同处理，这里有几个例子，有几个是原来从别处看到的记的笔记，有的是我自己挖掘出来的.
2.1
var deep_thought = { the_answer: 42, ask_question: function () { return this.the_answer; } }; var the_meaning = deep_thought.ask_question(); alert(the_meaning); </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.2

function test_this() { return this; } var i_wonder_what_this_is = test_this(); alert(i_wonder_what_this_is); // result: [object window]; </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.3:

function click_handler() { alert(this); // 弹出 window 对象 } </ script> ... <button id='thebutton' onclick='click_handler()'>Click me!</button>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.4

function click_handler(obj) { alert(obj); //result:[object HTMLButtonElement] } </ script> ... <button id='thebutton' onclick='click_handler(this)'>Click me!</button>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.5

<button id='thebutton' onclick='click_handler(this)'>Click me!</button> function BigComputer(answer) { this.the_answer = answer; this.ask_question = function () { alert(this.the_answer); } } function addhandler() { var deep_thought = new BigComputer(42), the_button = document.getElementById('thebutton'); the_button.onclick = deep_thought.ask_question; } window.onload = addhandler; //result [undefined] </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.6

<button id='thebutton' onclick='click_handler(this)'>Click me!</button> function BigComputer(answer) { var self=this; self.the_answer = answer; self.ask_question = function () { alert(self.the_answer); } } function addhandler() { var deep_thought = new BigComputer(42), the_button = document.getElementById('thebutton'); the_button.onclick = deep_thought.ask_question; } window.onload = addhandler; //result [42] </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.7

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

2.8

<button id='thebutton' onclick='click_handler(this)'>Click me!</button> 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> 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

//** 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

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

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

/** 这是一段很让人恼火的代码 可以禁用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:
alert(sock); function sock() { alert("function sock executed!"); } alert(sock); </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
b.html:
alert(sock); var sock=function() { alert("function sock executed!"); } alert(sock); </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
c.html:
// 这里并不弹出"undefined" // 有点偏心啊! alert(sock); </ script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
2.15

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

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