JS01基本语法和作用域链.docx

1、JS01基本语法和作用域链Javascript巩固与加强一目录Javascript巩固与加强一 1一、Javascript概述 31、为什么需要Javascript 32、什么是Javascript 33、Javascript应用场景 34、Zend Studio开发工具（企业级） 45、Javascript快速入门 76、script标签解析 87、script标签位置说明 88、Javascript基本格式 9二、Javascript基本语法 91、Javascript中的变量 92、变量的数据类型 103、Javascript中的运算符 101）算术运算符 112）比较运算符 113）逻

2、辑运算符 124）赋值运算符 125）字符串运算符 124、流程结构 121）顺序结构 122）选择结构 133）循环结构 145、循环结构中的两大关键词 14三、Javascript中的函数 151、什么是函数 152、函数的作用 153、函数的定义 154、匿名函数 175、函数在内存中的存储形式 176、自调用匿名函数 19四、作用域链 201、作用域 202、全局变量与局部变量 203、变量与作用域之间的访问关系 214、作用域链 225、作用域链原理图 23五、script代码段 241、script代码段的执行 242、script代码段执行流程 243、编译错误与执行错误对当前代

3、码段的影响 251）编译错误：在编译时发生的错误就是编译错误 252）执行错误：在执行时发生的错误就是执行错误 254、编译错误与执行错误对下一个script代码段的影响 261）编译错误对下一个script代码段的影响 262）执行错误对下一个script代码段的影响 265、script执行原理图 276、面试题 27一、Javascript概述1、为什么需要Javascript2、什么是JavascriptJavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。基于客户端浏览器：Javascript是一种客户端语言，运行

4、在浏览器端客户端语言：HTML语言/CSS语言/Javascript服务器端语言：PHP语言/JSP语言/ASP（3P语言）问题：如何划分一门语言是客户端语言还是服务器端语言呢?答：划分一门语言是客户端语言还是服务器端语言，主要看“它”在哪里解析与执行。客户端语言都是运行于客户端浏览器，但是由于不同的浏览器（IE浏览器、Firefox浏览器、Google浏览器、360极速浏览器、世界之窗）来源于不同的厂家，这些厂家又没有一个统一的标准，所以就会产生所谓的“兼容性问题”。3、Javascript应用场景 表单验证 网页特效（90%特效都是通过Javascript编写的） 开发网页小游戏（五子棋、

5、坦克大战、贪吃蛇、超级马里奥） Ajax与Node.js实现服务器端编程4、Zend Studio开发工具（企业级） 软件的安装与破解软件安装完成后，请把文件夹中的破解补丁(*.jar)包，覆盖到软件安装目录下的plugins文件夹中即可完成破解。 软件的默认工作区设置特别注意：第一次启动Zend软件后，系统会提示设置工作区目录，一定要记住，采用默认设置即可，不要更改工作区路径。 设置文本的编码格式（重要）设置完成后，单击右侧的Apply（应用）按钮即可。 设置代码文本大小选择Text Font设置文本大小设置完成后，单击Apply（应用）即可。 创建Zend工程在实际应用开发中，一共有两种创

6、建形式：1）如果之前没有任何工程，可以单独创建一个空白工程设置工程名称与工程路径2）如果之前已经有项目了，可以通过导入的方式来创建工程设置需要导入的路径5、Javascript快速入门例：使用Javascript输出一个hello world运行结果：6、script标签解析标签：属性：language： 脚本语言，告诉浏览器使用哪种语言引擎解析当前代码，其可以是Javascript，也可以是php等其他语言，此属性可以省略不写，因为浏览器默认认为当前language属性值为Javascript。src： 加载位置，引入外部的Javascript代码 定义一个外部public.js文件，代码如

7、下图所示： 在html页面中，可以通过script标签中的src属性导入public.js脚本特别说明：初学者误区在script标签中，如果使用了src属性导入了外部Javascript脚本，那一定不能在script标签中在编写其他的Javascript脚本，以下形式就是错误的：7、script标签位置说明理论上script标签可以放置于html代码中的任意位置，都可以正常执行。但是，在实际项目开发中，为了更好的规范编写的代码，个人建议： 对于函数的定义、类的定义、外部文件的引入建议放在head标签中 对于函数的调用，代码的执行，建议放在body标签中8、Javascript基本格式 Java

8、Script区分大小写只要一门语言是面向对象的，其都是区分大小写，所以在Javascript中，变量小i与变量I是两个完全不同的变量 JavaScript脚本程序须嵌入在HTML文件中Javascript属于嵌入式语言，所以其不能单独运行，必须放置于HTML文件中才能正常执行 JavaScript脚本程序中不能包含HTML标记代码错误的：正确的：我们可以把html标签当做Javascript中的字符串直接输出即可 每行写一条脚本语句，可以结合分号，在一行中写入多条语句（方便后期压缩） 语句末尾可以加分号 JavaScript脚本程序可以独立保存为一个外部文件二、Javascript基本语法1、

9、Javascript中的变量 变量是用来临时存储数值的容器，变量存储的数值是可以变化的 变量必须要先声明才能使用，使用var声明变量例：声明一个变量i，保存一个数字10var i; /声明变量i = 10; /为变量赋值以上代码还可以简写为：var i = 10; 变量的命名规则：第一个字符必须是英文字母，下划线(_)或者($)美元符号；其后的字符，可以是英文字母，数字，下划线以及美元符号；但是变量名不能是JavaScript的保留字错误的：var 123;（原因：以数字开头）var if;（原因：使用了Javascript中的保留关键字）正确的：var abc;var _abc;var $;

10、个人建议：在定义变量时尽量采用英文单词或中文拼音的形式，必须是一个有意义的。 变量的作用域:全局变量、局部变量在Javascript中是没有块级作用域的，对于作用域的划分都是通过function函数来实现的，在函数内部通过var声明的变量就是局部变量，没有通过var声明的变量就是全局变量。2、变量的数据类型回顾PHP中一共有几种数据类型：三大类八小类数据类型，四种标量、两种特殊、两种复合回顾Javascript中一共有多少种数据类型（ECMAScript）：字符串类型：string数字类型：number布尔类型：boolean对象类型：object（array也是对象的一种）空类型：null未

11、定义类型：undefined，一个变量有声明但未赋值其就是undefined类型问题：在Javascript中如何判断一个变量的数据类型？答：在Javascript中，可以使用内置结构typeof来判断一个变量的数据类型，typeof只是一个语法结构，其并不是一个函数。3、Javascript中的运算符 算术运算符 比较运算符 逻辑运算符 赋值运算符 字符串运算符1）算术运算符+ - * / %（取模或取余） + -+与-运算符+：自加运算-：自减运算所谓的自加与自减就是在元素本身的基础上实现+1或-1操作，但是随着+与-放置位置的不同，其输出的结果也是不同的。+或放在变量的前面：先自加或自减

12、然后参与运算i+或i- ：i先参与运算，然后在执行i+1或i-1操作例1：2）比较运算符 = = = != = !=特别说明：=等于与=恒等于区别，一个=等号叫做赋值。= ：只需要判断两个变量的值是否相等即可= ：除了要判断两个变量的值还需要判断两个变量的数据类型特别说明：在php中，单引号与双引号都代表标识的是字符串，但是双引号中的变量是可以正常解析与执行的，但是在javascript中，无论是双引号还是单引号其都代表的是普通的字符串，其内部的变量都是无法解析的，会当做普通文本直接输出。3）逻辑运算符&（与） |（或） !（非）&（与）：必须当左右两边的表达式同时成立时，才返回为true|（

13、或）：只要左右两边的表达式有一个条件成立时，就返回为true!（非）：返回表达式的相反结果要求比较高：必须有车有房才能牵手成功有车 & 有房要求一般：有车或有房即可有车 | 有房4）赋值运算符= += -= *= /= %=特别说明：前面所说的几种运算符，都是从左向右结合，但是赋值运算符是从右向左结合。5）字符串运算符在Javascript中，两个或多个字符串的结合可以通过加号+进行连接操作var str1 = hello;var str2 = world;document.write(str1+str2);4、流程结构顺序结构、选择结构（分支结构）、循环结构1）顺序结构记住：在Javascr

14、ipt中，代码都是从上至下一行一行执行的。运行结果：2）选择结构ifelse ifelse结构switch结构特别说明：虽然if结构与switch结构都可以实现分支判断，但是在实际项目开发中，if可以判断固定值也可以判断范围，但是switch结构只能实现固定值的判断，谨记！3）循环结构for循环结构while循环结构dowhile循环结构forin循环结构（主要用于遍历对象）例1：使用for循环输出从0到9例2：使用while循环在例1的基础上输出从10到1例3：使用dowhile循环在例2的基础上输出从0-9特别说明：问题1：什么时候使用for循环，什么时候使用while循环？对于已知循环次

15、数的情况，通常使用for循环对于未知循环次数的情况，通常使用while循环问题2：while循环与dowhile循环区别？while循环是先判断后执行，而dowhile循环结构是先执行后判断dowhile循环始终要比while循环多执行一次5、循环结构中的两大关键词continue：中止当前循环，继续下一次循环break：中止整个循环结构面试题：观察以下程序，说出执行结果运行结果：练习题：例1：使用循环结构输出1到100的加和例2：有一物，不知其数，三三数之余二，五五数之余三，七七数之余二，问物几何？白话文：有一个数，不知道是多少，用3去除余2，用5去除余3，用七去除余2，问这个数是多少（10

16、0以内）三、Javascript中的函数1、什么是函数函数是被命名的，独立的，完成特定功能的代码段。其可能给调用它的程序返回值，我们把这个代码段就称之为“函数”。被命名的：函数大部分都是有名字的，在程序运行中可以通过这个名称来实现对函数的调用独立的：函数是为了完成某个特定功能的独立代码段返回值：有些函数可以通过return语句设置返回值2、函数的作用 代码重用 模块化编程面向过程核心（模块化编程）：把一个系统分解为若干个步骤，每个步骤就是一个函数。3、函数的定义使用函数前要先定义才能调用函数定义有三个部分:函数名,参数列表,函数体定义函数的格式function 函数名(参数1,参数2.) 函数

17、执行部分; return 表达式;例1：定义一个打招呼程序说明：以上程序可以实现打招呼，但是其代码过于冗余（重复性代码过多）例2：定义一个函数，封装以上代码例3：定义参数，实现向不同的人打不同的招呼在Javascript函数中，参数一共有两种形式：形式参数（形参）与实际参数（实参）在函数定义时所指定的参数就是函数的形参在函数调用时所指定的参数就是函数的实参例4：在程序设计中对函数的定义要求：内聚性强，耦合性弱内聚性强：函数的功能要专一，专门用于完成某个特定的功能耦合性弱：模块与模块之间关联性越低越好（如电脑主板上的插槽）4、匿名函数如果一个函数没有名字，我们就把它称之为“匿名函数”。以上程序在

18、运行时，没有任何语法错误，所以在Javascript中我们把这种没有名字的函数就称之为“匿名函数”。5、函数在内存中的存储形式问题：如果一个函数没有名字，那如何调用此函数呢？答：可以把这个匿名函数赋值给其他某个变量，我们可以通过调用这个变量来实现对匿名函数的引用。函数在内存中的存储形式：在Javascript中，内存和PHP是一样的都分为四块区域：栈内存：小而快，主要用于存储简单类型的数据（Number、String、Boolean）堆内存：大而慢，慢是相对而言的。主要存储Object对象类型数据代码段：主要用于存放函数体数据段（了解）说明：Javascript是一种弱类型语言，但是弱类型语言

19、不代表没有数据类型，而是随着其存储值的不同，其数据类型也是不同的。理论上，Javascript中的变量可以存储任何类型的数据，如下图所示：特别说明：在Javascript中，函数也是一种特殊的量，其在内存中表现为一段连续的内存地址，一个函数无论是有名函数还是匿名函数其都会返回函数在内存中的首地址。原理图：如果想实现对display函数的引用，只需要通过以下代码即可执行：i()：代表找到display函数在内存中的首地址并执行。6、自调用匿名函数如果一个函数是没有名字的（匿名函数），其是没有办法根据名称进行直接调用的。所以我们可以直接在匿名函数定义完毕后就立即执行，我们把这种函数就称之为“自调用

20、匿名函数”。特别说明：在实际项目开发中，我们可能同时引入多个Javascript代码库，如ajax/jquery/extjs等等，如果在代码库中函数出现重名现象就会导致覆盖问题，从而影响代码的执行，所以为了解决这个问题，我们可以使用自调用匿名函数来解决函数的重名问题。四、作用域链如果想要学好Javascript，有三个地方必须要认真掌握：两链一包两链：作用域链与原型链一包：Javascript中的闭包1、作用域在Javascript中没有块级作用域，对作用域的划分都是通过function函数来实现的。在函数外部的区域就是全局作用域，在函数内部的区域就是局部作用域。2、全局变量与局部变量在全局作

21、用域中定义的变量就是”全局变量”在局部作用域中定义的变量我们就称之为“局部变量”但是全局变量与局部变量也是相对而言的，也会存在以下特殊形式：3、变量与作用域之间的访问关系在全局作用域中可以引入全局变量，在局部作用域中即可以引用全局变量也可以引用局部变量。但是在全局作用域是不能访问局部变量的，如下图所示：主要原因有二： 作用域不允许 受到Javascript垃圾回收机制的影响Javascript垃圾回收机制：当函数执行完毕后，其内部的所有局部变量都会自动被内存所回收，这就是垃圾回收机制。问题：为什么在局部作用域中可以引用全局变量呢？答：受到作用域链的影响4、作用域链在局部作用中，引用一个变量后，

22、系统会自动在当前作用域中寻找var的声明语句，如果找到则直接使用，否则继续向上一级作用域中去寻找var的声明语句，如未找到，则继续向上级作用域中寻找直到全局作用域中如还未找到var的声明语句则自动在全局作用域中声明该变量。我们把这种链式的查询关系就称之为”作用域链“。例1：使用作用域链的原则解析以下代码运行结果：10解析：当我们执行display函数时，系统会自动执行第13行代码，由于在局部作用域中引用了一个变量i，所以根据作用域链的原则，系统首先在当前作用域中寻找var的声明语句，但未找到，所以继续向上一级作用域中寻找var的声明语句，在全局作用域中找到了var的声明语句，所以直接弹出结果1

23、0。例2：使用作用域链原则解析以下代码的执行结果运行结果：100解析：系统首先在全局作用域中定义一个全局变量var i = 10，然后在12行代码中定义一个函数fn1，然后继续向下执行，在第24行执行fn1函数，然后进入到fn1函数内部执行代码，在第13行中定义一个局部变量var i=100，然后继续定义fn2函数并在第22行执行，然后执行fn2函数并在其内部定义并执行fn3函数，由于在fn3函数内部使用了变量i，所以其会自动在当前作用域中寻找var的声明语句，未找到则进入到fn2中去寻找，也未找到，继续向上一级fn1函数中寻找，找到var i=100,所以直接使用该变量，整个程序的执行结果为

24、100。例3：改进上题，说出程序的执行结果在Javascript中，代码都是从上往下一行一行执行的，所以以上代码首先在第10行定义一个全局变量i等于10，然后在12行代码定义一个fn1函数并在24行执行，然后进入到fn1函数的内部继续执行，由于在第13行使用了一个变量i，但是其并未声明，所以根据作用域链的原则，系统会自动在当前作用域中寻找var的声明语句，未找到则自动向上一级作用域中去寻找，找到了var i = 10则直接使用，覆盖全局中的i，然后代码继续向下执行定义fn2并执行，定义fn3并执行，由于在fn3函数的内部，又引入了变量i，根据作用域链的原则，继续向上寻找，直到全局作用域，由于全

25、局中的变量i已被覆盖为100，所以最终结果为100。5、作用域链原理图五、script代码段1、script代码段的执行在Javascript代码中，可以使用script作为基本标识，script代码段在运行过程中是分段解析与执行的。2、script代码段执行流程在Javascript代码中，script标签是分段解析与执行的，也就是说先执行第一段script代码，然后解析与执行完毕后在执行第二个script代码，依次类推：1）读入第一个代码段2）编译声明变量、声明函数、语法检查、语义检查、代码优化、分析并得到代码树。3）执行变量的赋值，函数的调用，代码的执行都是发生在执行阶段。例如：var

26、i = 10这样一行代码，要经历两个阶段（编译与执行）编译阶段：声明变量var i = undefined;执行阶段：i = 10;4）读入下一个代码段5）编译6）执行7）8）结束3、编译错误与执行错误对当前代码段的影响1）编译错误：在编译时发生的错误就是编译错误运行结果：直接报错由此可以得出结论：如果在script代码段中发生编译错误，其对整个当前script代码段是致命的。2）执行错误：在执行时发生的错误就是执行错误运行结果：弹出10，然后报错由此可以得出结论：当执行错误发生时只会对当前代码下面的代码有影响而不会对上面的代码产生任何影响。4、编译错误与执行错误对下一个script代码段的影响1）编译错误对下一个script代码段的影响运行结果：可以正常弹出world由此可以得出结论：编译错误只对当前script代码段有影响而对下一个script代码段没有任何影响。2）执行错误对下一个script代码段的影响运行结果：弹出world由此可以得出结论：执行错误也只会对当前script代码段下面的代码有影响，但是不会对下一个script代码段产生任何影响。综上所述：无论是编译错误还是执行错误都只会对当前script代码段有影响而不会对下一个script代码段有任何影响，因为Javascript中的script代码段是分段解析与执行的。5、script执行原理图6、面试题