当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript变量作用域在不同浏览器的处理

Javascript
JavaScript 语言精粹学习笔记
有关div页面拖动、缩放、关闭、遮罩效果代码
JQuery this 和 $(this) 的区别
JS 时间显示效果代码
jquery 表单进行客户端验证demo
JS 获取span标签中的值的代码 支持ie与firefox
JavaScript 获取用户客户端操作系统版本
可以读取EXCEL文件的js代码
JS去除字符串的空格增强版(可以去除中间的空格)
监控用户是否关闭浏览器的js代码
javascript 继承实现方法
JSON 入门指南 想了解json的朋友可以看下
javascript 函数调用规则
动态表格Table类的实现
JSON 客户端和服务器端的格式转换
jQuery ui1.7 dialog只能弹出一次问题
javascript 遍历验证所有文本框的值
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
javascript 简练的几个函数
csdn 博客中实现运行代码功能实现

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 160 ::
收藏到网摘: n/a

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>