Javascript 作用域以及执行顺序

最新推荐文章于 2020-06-29 11:33:24 发布

iteye_12837

最新推荐文章于 2020-06-29 11:33:24 发布

阅读量237

点赞数

文章标签： javascript xhtml ViewUI

今天看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 οnlοad="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  这么做的好处是，有助于防止同名的局部变量和全局变量之间的冲突。