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

【 tulaoshi.com - Web开发 】

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

2.15

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

script type="text/javascript"
Object.prototype.hello=function(){
  alert("hello");
}
window.hello();
/script