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

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


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

alert(string.phone());


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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);


[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];
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.3:

function click_handler() {
alert(this); // 弹出 window 对象
}

...
Click me!

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.4

function click_handler(obj) {
alert(obj);
//result:[object HTMLButtonElement]
}

...
Click me!

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.5
Click me!

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]


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.6
Click me!

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]


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.7
Click me!

function btn_click(){
alert(this);
}

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

window.onload = addhandler;

//result [undefined]


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.8
Click me!

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]
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.9
Click me!

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]
[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
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2.11

function method()
{
var window={};
alert(window.location);
}
alert(window.location);
method();
alert(window.location);


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
2.12

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


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
2.13

/** 这是一段很让人恼火的代码
可以禁用alert
*/
window.alert("hello world");
window.alert=function(str){
document.write(str);
};
alert("hello world");
window.alert("hello world");


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
2.14:

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


alert(sock);
function sock()
{
alert("function sock executed!");
}
alert(sock);
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
b.html:


alert(sock);
var sock=function()
{
alert("function sock executed!");
}
alert(sock);


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
c.html:


// 这里并不弹出"undefined"
// 有点偏心啊!
alert(sock);


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
2.15

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

Object.prototype.hello=function(){
alert("hello");
}
window.hello();


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]