javascript预编译

转载 2012年03月29日 13:59:04

原文出处:http://www.iqianduan.com/post/pretreatment-of-javascript.html

这位老兄说的不错,必须自己再转一下!

-----------------------------华丽的分割线-------------------------------------------------------------------------------------------------------------------------

下午有点时间,翻出了之前搜藏的word稿《悟透JavaScript》,这是一本很耐读的书,但读起来又不是很枯燥。其作者应该是一位禅道高手,在书中引子部分里,利用一个小故事引出了本书的主旨:“对象本无根,类型亦无形。本来无一物,何处惹尘埃?”。现在看来,我还是无法读懂,但愿能有那么一天。。。

回到正题。

JavaScript中的function写法通常是这样的:

    <script type="text/javascript">
        function myfunction(){
            alert("Hello World!");
        }
        myfunction();
    </script>
这种方法叫“定义式”。我们知道,function应该也是一种变量,我们可以用通用的“变量式”来进行定义:

    <script type="text/javascript">
        var myfunction = function(){
            alert("Hello World!");
        }
        myfunction();
    </script>
既然是变量,我们就给function进行赋值:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JavaScript的定义</title>
</head>
<body>
<script type="text/javascript">
	var myfunction = function(){
		alert("Hello World!");
	}
	myfunction();
	var myfunction = function(){
		alert("我继续Hello!");
	}
	myfunction();
</script>
</body>
</html>
提示:你可以先修改部分代码再运行。

输出结果和我们预料的一样:两次打印都是我们所给定的不同的值;

接下来用“定义式”进行赋值:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JavaScript的定义</title>
</head>
<body>
<script type="text/javascript">
	function myfunction(){
		alert("Hello World!");
	}
	myfunction();
	function myfunction(){
		alert("我继续Hello!");
	}
	myfunction();
</script>
</body>
</html>
提示:你可以先修改部分代码再运行。

这次你会惊奇的发现:两次输出的结果竟然相同,都是最后一次的赋值,这是为什么呢?难道有错误吗??

难道是因为两次函数名相同?这不应该呀,虽然在其他编程语言中这是非法的,但在JavaScript中,这个可以有。那为什么两次输出的值都相同呢?

再往下看,答案在这里:

原来,JavaScript执行引擎并非一行一行地分析和执行程序,而是一段一段地分析执行的。而且,在同一段程序的分析执行中,定义式的函数语句会被提取出来优先执行。函数定义执行完之后,才会按顺序执行其他语句代码。也就是说,在第一次调用myfunction之前,第一个函数语句定义的代码逻辑,已被第二个函数定义语句覆盖了。所以,两次都调用都是执行最后一个函数逻辑了。

这似乎有点象静态语言的编译概念。所以,这一特征也被有些人称为:JavaScript的“预编译”。

大多数情况下,我们也没有必要去纠缠这些细节问题。只要你记住一点:JavaScript里的代码也是一种数据,同样可以被任意赋值和修改的,而它的值就是代码的逻辑。只是,与一般数据不同的是,函数是可以被调用执行的。


最后俺要补充的,这两种不同的定义方法,也可能会引发闭包的。至于谈到闭包?杂家可不敢多讲,这里有曾哥曾经在交流会上分享的《闭包应用实例》,有兴趣的朋友可以去研究,然后分享与大家。


链接:

闭包的应用实例:http://panweizeng.com/others/ppt/closure.html#1

交流会:http://www.w3ctech.com/








JavaScript预编译原理分析

今天用了大量时间复习了作用域,预编译等等知识 看了很多博文,翻开了以前看过的书 发现当初觉得自己学的很明白,其实还是存在一些思维误区 今晚就整理了一下凌乱的思路 先整理一下预编译的知识吧,日后...
  • q1056843325
  • q1056843325
  • 2016年10月27日 23:06
  • 6235

实例讲解js中的预编译

js作为一本脚本语言,可以不经过编译直接运行,但遇到预编译的问题,尤其是变量或函数同名时,这点知识就尤其必要了。为了更好地了解js语言背后的运行机理。笔者采用实例化的方式讲解我理解的预编译。 ...
  • yingyiledi
  • yingyiledi
  • 2014年05月12日 17:16
  • 5935

Javascript的预编译与变量作用域浅析

function mm(){ }这种形式是声明一个函数,跟 var 一个变量的机制一样,脚本在解释执行之前会做预编译处理,而var mm = function(){ }这种形式是对一个变量赋值,虽然也...
  • liaoxiaoli99
  • liaoxiaoli99
  • 2011年05月03日 18:35
  • 2036

js预编译解析执行过程分析

javascript编译解析执行顺序分析 先来看几道题,大家先猜一下alert的结果 1. var a=2; function show(){ window.setTimeout(function()...
  • u012545279
  • u012545279
  • 2014年03月14日 14:20
  • 1878

构建基于 NodeJS 的 LESS.js 预编译 CSS 服务

我们在项目中使用 Less.js 的预编译 css 技术。Less 最终编译的代码是 css,也就是 *.less 输出 *.css 的工作,围绕这项过程的方式方法多种多样,有的是导入 less.js...
  • zhangxin09
  • zhangxin09
  • 2016年12月26日 23:15
  • 970

理解JavaScript的编译过程与运行机制

JavaScript引擎,不是逐条解释执行javaScript代码,而是按照代码块一段段解释执行。所谓代码块就是使用标签分隔的代码段。 一、编译阶段 对于常见编译型语言(例如:Java...
  • celte
  • celte
  • 2014年09月20日 01:32
  • 7054

javascript 预编译

今天工作需要,搜索下JS面试题,看到一个题目,大约是这样的 var x = 1, y = z = 0; function add(n) { n = n+1;...
  • yyywyr
  • yyywyr
  • 2013年12月20日 16:06
  • 600

javaScript的预编译

在预编译分析中,javaScript执行引擎将所有定义式函数直接创建为作用域上的函数变量,并将其值初始化为定义的函数代码逻辑,也就是为其建立了可调用的函数变量。而对于所有“var"定义的变量,也会在第...
  • y4786924
  • y4786924
  • 2013年08月07日 16:48
  • 363

javascript之预编译

Javascript按照段的方式进行预编译处理相关的代码段,并且按照先预定义变量,再预定义函数的方式进行预编译!而且无论变量/函数在段中的任何地点进行显式声明(在变量前加var),都会在所有代码执行前...
  • fycghy0803
  • fycghy0803
  • 2012年09月04日 17:37
  • 734

Javascript的"预编译"思考

看到一个JS面试题,大约是这样的  Js代码         var x = 1, y = z = 0;      function add(n) {          n = n+1;  ...
  • u012732259
  • u012732259
  • 2015年03月27日 13:58
  • 711
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript预编译
举报原因:
原因补充:

(最多只允许输入30个字)