不同浏览器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需刷新才能执行]