js高端系列教程(整理版).doc

js高端系列教程(1)我们应该如何去了解JavaScript引擎的工作原理 昨天收到一封来自深圳的一位前端童鞋的邮件，邮件内容如下（很抱歉，未经过他的允许，公开邮件内容，不过我相信其他人肯定也有同样的问题，所以，直接把问题原文抛出来）：“读了你的几篇关于JS（变量对象、作用域、上下文、执行代码）的文章，我个人觉得有点抽象，难以深刻理解。我想请教下通过什么途径能够深入点的了解javascript解析引擎在执行代码前后是怎么工作的，ecma英文版实在看不下去呵呵。”其实这个问题个人觉得太笼统了，直接回答很难回答，所以，我打算先把他的问题拆解成如下几个子问题，并对其表达个人的观点，希望对有同样困惑的童鞋能够有所帮助。1. 什么是JavaScript解析引擎？简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当你写了var a = 1 + 1;这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。学过编译原理的人都知道，对于静态语言来说（如Java、C+、C），处理上述这些事情的叫编译器（Compiler），相应地对于JavaScript这样的动态语言则叫解释器（Interpreter）。这两者的区别用一句话来概括就是：编译器是将源代码编译为另外一种代码（比如机器码，或者字节码），而解释器是直接解析并将代码运行结果输出。 比方说，firebug的console就是一个JavaScript的解释器。但是，现在很难去界定说，JavaScript引擎它到底算是个解释器还是个编译器，因为，比如像V8（Chrome的JS引擎），它其实为了提高JS的运行性能，在运行之前会先将JS编译为本地的机器码（native machine code），然后再去执行机器码（这样速度就快很多），相信大家对JIT（Just In Time Compilation）一定不陌生吧。我个人认为，不需要过分去强调JavaScript解析引擎到底是什么，了解它究竟做了什么事情我个人认为就可以了。对于编译器或者解释器究竟是如何看懂代码的，翻出大学编译课的教材就可以了。这里还要强调的就是，JavaScript引擎本身也是程序，代码编写而成。比如V8就是用C/C+写的。2. JavaScript解析引擎与ECMAScript是什么关系？JavaScript引擎是一段程序，我们写的JavaScript代码也是程序，如何让程序去读懂程序呢？这就需要定义规则。比如，之前提到的var a = 1 + 1;，它表示： 左边var代表了这是申明（declaration），它申明了a这个变量 右边的+表示要将1和1做加法 中间的等号表示了这是个赋值语句 最后的分号表示这句语句结束了上述这些就是规则，有了它就等于有了衡量的标准，JavaScript引擎就可以根据这个标准去解析JavaScript代码了。那么这里的ECMAScript就是定义了这些规则。其中ECMAScript 262这份文档，就是对JavaScript这门语言定义了一整套完整的标准。其中包括： var，if，else，break，continue等是JavaScript的关键词 abstract，int，long等是JavaScript保留词 怎么样算是数字、怎么样算是字符串等等 定义了操作符（+，-， var myname = undefined;4alert(myname);/ undefined5myname =local;6alert(myname);/ local7func();为了完整，我们再提一提执行层面的稍微复杂点的东西。代码处理分两个阶段，第一阶段是变量，函数声明，以及正常格式的参数创建，这是一个解析和进入上下文 的阶段。第二个阶段是代码执行，函数表达式和不合格的标识符（为声明的变量）被创建。但是，出于实用的目的，我们就采用了”hoisting”这个概念， 这种ECMAScript标准中并未定义，通常用来描述行为。访问全局对象在浏览器中，全局对象可以通过window属性在代码的任何位置访问（除非你做了些比较出格的事情，像是声明了一个名为window的局部变量）。但是在其他环境下，这个方便的属性可能被叫做其他什么东西（甚至在程序中不可用）。如果你需要在没有硬编码的window标识符下访问全局对象，你可以在任何层级的函数作用域中做如下操作：view sourceprint?1varglobal = (function() 2returnthis;3();这种方法可以随时获得全局对象，因为其在函数中被当做函数调用了（不是通过new构造），this总是指向全局对象。实际上这个病不适用于ECMAScript 5严格模式，所以，在严格模式下时，你必须采取不同的形式。例如，你正在开发一个JavaScript库，你可以将你的代码包裹在一个即时函数中，然后从全局作用域中，传递一个引用指向this作为你即时函数的参数。js高端系列教程(5)JavaScript探秘：for循环(for_Loops)在for循环中，你可以循环取得数组或是数组类似对象的值，譬如arguments和HTMLCollection对象。通常的循环形式如下：1/ 次佳的循环2for(vari = 0; i myarray.length; i+) 3/ 使用myarrayi做点什么4这种形式的循环的不足在于每次循环的时候数组的长度都要去获取下。这回降低你的代码，尤其当myarray不是数组，而是一个HTMLCollection对象的时候。HTMLCollections指的是DOM方法返回的对象，例如：1document.getElementsByName()2document.getElementsByClassName()3document.getElementsByTagName()还有其他一些HTMLCollections，这些是在DOM标准之前引进并且现在还在使用的。有：1document.images: 页面上所有的图片元素2document.links : 所有a标签元素3document.forms : 所有表单4document.forms0.elements : 页面上第一个表单中的所有域集合的麻烦在于它们实时查询基本文档（HTML页面）。这意味着每次你访问任何集合的长度，你要实时查询DOM，而DOM操作一般都是比较昂贵的。这就是为什么当你循环获取值时，缓存数组(或集合)的长度是比较好的形式，正如下面代码显示的：1for(vari = 0, max = myarray.length; i max; i+) 2/ 使用myarrayi做点什么3这样，在这个循环过程中，你只检索了一次长度值。在所有浏览器下，循环获取内容时缓存HTMLCollections的长度是更快的，2倍(Safari3)到190倍(IE7)之间。/此数据貌似很老，仅供参考注意到，当你明确想要修改循环中的集合的时候（例如，添加更多的DOM元素），你可能更喜欢长度更新而不是常量。伴随着单var形式，你可以把变量从循环中提出来，就像下面这样：1functionlooper() 2vari = 0,3max,4myarray = ;5/ .6for(i = 0, max = myarray.length; i b) 06inner =function() 07return08r: c - d09;10;11else12inner =function() 13return14r: c + d15;16;1718returninner;19花括号(Curly Braces)花括号（亦称大括号，下同）应总被使用，即使在它们为可选的时候。技术上将，在in或是for中如果语句仅一条，花括号是不需要的，但是你还是应该总是使用它们，这会让代码更有持续性和易于更新。想象下你有一个只有一条语句的for循环，你可以忽略花括号，而没有解析的错误。1/ 糟糕的实例2for(vari = 0; i 10; i += 1)3alert(i);但是，如果，后来，主体循环部分又增加了行代码：1/ 糟糕的实例2for(vari = 0; i 10; i += 1)3alert(i);4alert(i + is + (i % 2 ?odd:even);第二个alert已经在循环之外，缩进可能欺骗了你。为了长远打算，最好总是使用花括号，即时值一行代码：1/ 好的实例2for(vari = 0; i 10; i += 1) 3alert(i);4if条件类似：01/ 坏02if(true)03alert(1);04else05alert(2);0607/ 好08if(true) 09alert(1);10else11alert(2);12左花括号的位置(Opening Brace Location)开发人员对于左大括号的位置有着不同的偏好在同一行或是下一行。01if(true) 02alert(Its TRUE!);030405/或0607if(true)0809alert(Its TRUE!);10这个实例中，仁者见仁智者见智，但也有个案，括号位置不同会有不同的行为表现。这是因为分号插入机制(semicolon insertion mechanism)JavaScript是不挑剔的，当你选择不使用分号结束一行代码时JavaScript会自己帮你补上。这种行为可能会导致麻烦，如当你返回对象字面量，而左括号却在下一行的时候：1/ 警告： 意外的返回值2functionfunc() 3return4/ 下面代码不执行56name :Batman78如果你希望函数返回一个含有name属性的对象，你会惊讶。由于隐含分号，函数返回undefined。前面的代码等价于：1/ 警告： 意外的返回值2functionfunc() 3returnundefined;4/ 下面代码不执行56name :Batman78总之，总是使用花括号，并始终把在与之前的语句放在同一行：1functionfunc() 2return3name :Batman4;5关于分号注：就像使用花括号，你应该总是使用分号，即使他们可由JavaScript解析器隐式创建。这不仅促进更科学和更严格的代码，而且有助于解决存有疑惑的地方，就如前面的例子显示。空格(White Space)空格的使用同样有助于改善代码的可读性和一致性。在写英文句子的时候，在逗号和句号后面会使用间隔。在JavaScript中，你可以按照同样的逻辑在列表模样表达式（相当于逗号）和结束语句（相对于完成了“想法”）后面添加间隔。适合使用空格的地方包括： for循环分号分开后的的部分：如for (var i = 0; i 10; i += 1) . for循环中初始化的多变量(i和max)：for (var i = 0, max = 10; i max; i += 1) . 分隔数组项的逗号的后面：var a = 1, 2, 3; 对象属性逗号的后面以及分隔属性名和属性值的冒号的后面：var o = a: 1, b: 2; 限定函数参数：myFunc(a, b, c) 函数声明的花括号的前面：function myFunc() 匿名函数表达式function的后面：var myFunc = function () ;使用空格分开所有的操作符和操作对象是另一个不错的使用，这意味着在+, -, *, =, , =, =, !=, &, |, +=等前后都需要空格。01/ 宽松一致的间距02/ 使代码更易读03/ 使