Javascript 作用域以及执行顺序

今天看Javascript 核心技术,看到一个很有说服力的代码,特此总结一下,以下是我对JS执行过程的理解,见代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Effect Field</title>

<script type="text/javascript" src="global.js"></script>

<script type="text/javascript" src="global2.js"></script>

<script type="text/javascript">

//定义全局变量

message = "I'm in the page";



function testScope() {

	message += "/t called in testScope";

	alert(message);

}

</script>

</head>



<body onload="testScope();global2Print();globalPrint()">

<script type="text/javascript">

message += "/t embedded in page";

document.writeln(message);

</script>

</body>

</html>
浏览器会先解释所有的脚本语言,这里包括两个包含进来的JS文件和 两个本页的JS文件,首先message被赋值了 "I'm in the page",然后在本页的第二个JS脚本快中,又被+=了"/t embedded in page" ,所以此时message的值为 "I'm in the page embedded in page",然后document.writeln(message);会现在浏览器中画出I'm in the page embedded in page,然后在HTML的body标签中调用了3个方法,第一个方法testScope()中又将msaage+=了 "/t called in testScope",所以这个时候 alert出来的结果为 “I'm in the page embedded in page called in testScope”,再调用包含的JS文件 global2.js中的global2Print()方法 global2.js文件代码如下:
function global2Print() {

	message += '/t also accessed in global2Print';	

	alert(message);

}

又调用了global.js文件中的globalPrint()方法,与global2.js文件中不同的是,在这里,message定义为全局,没有定义在函数内部,所以在一开始 windows.onload之前,就已经载入了,所以此时message在这里应该为'undefined',所以不做累加,global.js文件代码如下:
if(typeof(message) != 'undefined') message += '/t globally in globalPrint';

//alert(typeof(message));

function globalPrint() {

	alert(message);	

}

PS:在定义一个变量时,建议显示的使用关键字 var  这么做的好处是,有助于防止同名的局部变量和全局变量之间的冲突。
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭