【图】javascript变量作用域在不同浏览器的处理

1.关于prototype:这里prototype是javascript的一个特性，不是那个有名的prototype框架:

script type="text/javascript"
var string="hello world";
try{
alert(string.phone());
}catch(e){alert(e);}
String.prototype.phone=function()
{
return "159-10957151";
}

alert(string.phone());
/script

2.关于变量作用域,和IE,firefox对js的不同处理，这里有几个例子，有几个是原来从别处看到的记的笔记，有的是我自己挖掘出来的.

2.1

script type="text/javascript"
var deep_thought = {
   the_answer: 42,
   ask_question: function () {
    return this.the_answer;
   }
};

var the_meaning = deep_thought.ask_question();
alert(the_meaning);
/script

2.2

script type="text/javascript"
function test_this() {
return this;
}
var i_wonder_what_this_is = test_this();
alert(i_wonder_what_this_is);
// result: [object window];
/script

2.3:

script type="text/javascript"
function click_handler() {
alert(this); // 弹出 window 对象
}
/script
...
button id='thebutton' onclick='click_handler()'Click me!/button

2.4

script type="text/javascript"
function click_handler(obj) {
alert(obj);
//result:[object HTMLButtonElement]
}
/script
...
button id='thebutton' onclick='click_handler(this)'Click me!/button

2.5

button id='thebutton' onclick='click_handler(this)'Click me!/button
script type="text/javascript"
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
...

2.6

button id='thebutton' onclick='click_handler(this)'Click me!/button
script type="text/javascript"
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
...

2.7

button id='thebutton' onclick='click_handler(this)'Click me!/button
script type="text/javascript"
function btn_click(){
alert(this);
}

function addhandler() {
the_button = document.getElementById('thebutton');
the_button.onclick = btn_click;
}

window.onload = addhandler;

//result [undefined]
/script
...

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
...

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
...

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

2.11

script type="text/javascript"
function method()
{
var window={};
alert(window.location);
}
alert(window.location);
method();
alert(window.location);
/script

2.12

script type="text/javascript"
   var window={};//ERROR:非法赋值!
   // this works in IE,but throw an Exception in firefox
   alert(window.location);
/script

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

2.14:

注意这三个html文件的结果有什么不同.
a.html:
script type="text/javascript"
alert(sock);
function sock()
{
alert("function sock executed!");
}
alert(sock);
/script
b.html:
script type="text/javascript"
alert(sock);
var sock=function()
{
alert("function sock executed!");
}
alert(sock);
/script
c.html:
script type="text/javascript"
// 这里并不弹出"undefined"
// 有点偏心啊!
alert(sock);
/script