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

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

《JS01基本语法和作用域链.docx》由会员分享，可在线阅读，更多相关《JS01基本语法和作用域链.docx（27页珍藏版）》请在冰豆网上搜索。

JS01基本语法和作用域链

Javascript巩固与加强一

目录

Javascript巩固与加强一1

一、Javascript概述3

1、为什么需要Javascript3

2、什么是Javascript3

3、Javascript应用场景3

4、ZendStudio开发工具（企业级）4

5、Javascript快速入门7

6、script标签解析8

7、script标签位置说明8

8、Javascript基本格式9

二、Javascript基本语法9

1、Javascript中的变量9

2、变量的数据类型10

3、Javascript中的运算符10

1）算术运算符11

2）比较运算符11

3）逻辑运算符12

4）赋值运算符12

5）字符串运算符12

4、流程结构12

1）顺序结构12

2）选择结构13

3）循环结构14

5、循环结构中的两大关键词14

三、Javascript中的函数15

1、什么是函数15

2、函数的作用15

3、函数的定义15

4、匿名函数17

5、函数在内存中的存储形式17

6、自调用匿名函数19

四、作用域链20

1、作用域20

2、全局变量与局部变量20

3、变量与作用域之间的访问关系21

4、作用域链22

5、作用域链原理图23

五、script代码段24

1、script代码段的执行24

2、script代码段执行流程24

3、编译错误与执行错误对当前代码段的影响25

1）编译错误：

在编译时发生的错误就是编译错误25

2）执行错误：

在执行时发生的错误就是执行错误25

4、编译错误与执行错误对下一个script代码段的影响26

1）编译错误对下一个script代码段的影响26

2）执行错误对下一个script代码段的影响26

5、script执行原理图27

6、面试题27

一、Javascript概述

1、为什么需要Javascript

2、什么是Javascript

JavaScript是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。

基于客户端浏览器：

Javascript是一种客户端语言，运行在浏览器端

客户端语言：

HTML语言/CSS语言/Javascript

服务器端语言：

PHP语言/JSP语言/ASP（3P语言）

问题：

如何划分一门语言是客户端语言还是服务器端语言呢?

答：

划分一门语言是客户端语言还是服务器端语言，主要看“它”在哪里解析与执行。

客户端语言都是运行于客户端浏览器，但是由于不同的浏览器（IE浏览器、Firefox浏览器、Google浏览器、360极速浏览器、世界之窗…）来源于不同的厂家，这些厂家又没有一个统一的标准，所以就会产生所谓的“兼容性问题”。

3、Javascript应用场景

①表单验证

②网页特效（90%特效都是通过Javascript编写的）

③开发网页小游戏（五子棋、坦克大战、贪吃蛇、超级马里奥）

④Ajax与Node.js实现服务器端编程

4、ZendStudio开发工具（企业级）

①软件的安装与破解

软件安装完成后，请把文件夹中的破解补丁（*.jar）包，覆盖到软件安装目录下的plugins文件夹中即可完成破解。

②软件的默认工作区设置

特别注意：

第一次启动Zend软件后，系统会提示设置工作区目录，一定要记住，采用默认设置即可，不要更改工作区路径。

③设置文本的编码格式（重要）

设置完成后，单击右侧的Apply（应用）按钮即可。

④设置代码文本大小

选择TextFont设置文本大小

设置完成后，单击Apply（应用）即可。

⑤创建Zend工程

在实际应用开发中，一共有两种创建形式：

1）如果之前没有任何工程，可以单独创建一个空白工程

设置工程名称与工程路径

2）如果之前已经有项目了，可以通过导入的方式来创建工程

设置需要导入的路径

5、Javascript快速入门

例：

使用Javascript输出一个helloworld

运行结果：

6、script标签解析

标签：

属性：

language：

脚本语言，告诉浏览器使用哪种语言引擎解析当前代码，其可以是Javascript，也可以是php等其他语言，此属性可以省略不写，因为浏览器默认认为当前language属性值为Javascript。

src：

加载位置，引入外部的Javascript代码

①定义一个外部public.js文件，代码如下图所示：

②在html页面中，可以通过script标签中的src属性导入public.js脚本

特别说明：

初学者误区

在script标签中，如果使用了src属性导入了外部Javascript脚本，那一定不能在script标签中在编写其他的Javascript脚本，以下形式就是错误的：

7、script标签位置说明

理论上script标签可以放置于html代码中的任意位置，都可以正常执行。

但是，在实际项目开发中，为了更好的规范编写的代码，个人建议：

①对于函数的定义、类的定义、外部文件的引入建议放在head标签中

②对于函数的调用，代码的执行，建议放在body标签中

8、Javascript基本格式

①JavaScript区分大小写

只要一门语言是面向对象的，其都是区分大小写，所以在Javascript中，变量小i与变量I是两个完全不同的变量

②JavaScript脚本程序须嵌入在HTML文件中

Javascript属于嵌入式语言，所以其不能单独运行，必须放置于HTML文件中才能正常执行

③JavaScript脚本程序中不能包含HTML标记代码

错误的：

正确的：

我们可以把html标签当做Javascript中的字符串直接输出即可

④每行写一条脚本语句，可以结合分号，在一行中写入多条语句（方便后期压缩）

⑤语句末尾可以加分号

⑥JavaScript脚本程序可以独立保存为一个外部文件

二、Javascript基本语法

1、Javascript中的变量

①变量是用来临时存储数值的容器，变量存储的数值是可以变化的

②变量必须要先声明才能使用，使用var声明变量

例：

声明一个变量i，保存一个数字10

vari;//声明变量

i=10;//为变量赋值

以上代码还可以简写为：

vari=10;

③变量的命名规则：

第一个字符必须是英文字母，下划线（_）或者（$）美元符号；其后的字符，可以是英文字母，数字，下划线以及美元符号；但是变量名不能是JavaScript的保留字

错误的：

var123;（原因：

以数字开头）

varif;（原因：

使用了Javascript中的保留关键字）

正确的：

varabc;

var_abc;

var$;

个人建议：

在定义变量时尽量采用英文单词或中文拼音的形式，必须是一个有意义的。

④变量的作用域:

全局变量、局部变量

在Javascript中是没有块级作用域的，对于作用域的划分都是通过function函数来实现的，在函数内部通过var声明的变量就是局部变量，没有通过var声明的变量就是全局变量。

2、变量的数据类型

回顾PHP中一共有几种数据类型：

三大类八小类数据类型，四种标量、两种特殊、两种复合

回顾Javascript中一共有多少种数据类型（ECMAScript）：

字符串类型：

string

数字类型：

number

布尔类型：

boolean

对象类型：

object（array也是对象的一种）

空类型：

null

未定义类型：

undefined，一个变量有声明但未赋值其就是undefined类型

问题：

在Javascript中如何判断一个变量的数据类型？

答：

在Javascript中，可以使用内置结构typeof来判断一个变量的数据类型，typeof只是一个语法结构，其并不是一个函数。

3、Javascript中的运算符

•算术运算符

•比较运算符

•逻辑运算符

•赋值运算符

•字符串运算符

1）算术运算符

+-*/%（取模或取余）++--

++与--运算符

++：

自加运算

--：

自减运算

所谓的自加与自减就是在元素本身的基础上实现+1或-1操作，但是随着++与--放置位置的不

同，其输出的结果也是不同的。

++或—放在变量的前面：

先自加或自减然后参与运算

i++或i--：

i先参与运算，然后在执行i+1或i-1操作

例1：

2）比较运算符

><>=<===!

====!

==

特别说明：

==等于与===恒等于区别，一个=等号叫做赋值。

==：

只需要判断两个变量的值是否相等即可

===：

除了要判断两个变量的值还需要判断两个变量的数据类型

特别说明：

在php中，单引号与双引号都代表标识的是字符串，但是双引号中的变量是可以正常解析与执行的，但是在javascript中，无论是双引号还是单引号其都代表的是普通的字符串，其内部的变量都是无法解析的，会当做普通文本直接输出。

3）逻辑运算符

&&（与）||（或）!

（非）

&&（与）：

必须当左右两边的表达式同时成立时，才返回为true

||（或）：

只要左右两边的表达式有一个条件成立时，就返回为true

!

（非）：

返回表达式的相反结果

要求比较高：

必须有车有房才能牵手成功

有车&&有房

要求一般：

有车或有房即可

有车||有房

4）赋值运算符

=+=-=*=/=%=

特别说明：

前面所说的几种运算符，都是从左向右结合，但是赋值运算符是从右向左结合。

5）字符串运算符

在Javascript中，两个或多个字符串的结合可以通过加号+进行连接操作

varstr1=‘hello’;

varstr2=‘world’;

document.write（str1+str2）;

4、流程结构

顺序结构、选择结构（分支结构）、循环结构

1）顺序结构

记住：

在Javascript中，代码都是从上至下一行一行执行的。

运行结果：

2）选择结构

if…elseif…else结构

switch结构

特别说明：

虽然if结构与switch结构都可以实现分支判断，但是在实际项目开发中，if可以判断固定值也可以判断范围，但是switch结构只能实现固定值的判断，谨记！

！

！

3）循环结构

for循环结构

while循环结构

do…while…循环结构

for…in…循环结构（主要用于遍历对象）

例1：

使用for循环输出从0到9

例2：

使用while循环在例1的基础上输出从10到1

例3：

使用do…while…循环在例2的基础上输出从0-9

特别说明：

问题1：

什么时候使用for循环，什么时候使用while循环？

对于已知循环次数的情况，通常使用for循环

对于未知循环次数的情况，通常使用while循环

问题2：

while循环与do…while…循环区别？

while循环是先判断后执行，而do…while…循环结构是先执行后判断

do…while…循环始终要比while循环多执行一次

5、循环结构中的两大关键词

continue：

中止当前循环，继续下一次循环

break：

中止整个循环结构

面试题：

观察以下程序，说出执行结果

运行结果：

练习题：

例1：

使用循环结构输出1到100的加和

例2：

有一物，不知其数，三三数之余二，五五数之余三，七七数之余二，问物几何？

白话文：

有一个数，不知道是多少，用3去除余2，用5去除余3，用七去除余2，问这个数是多少（100以内）

三、Javascript中的函数

1、什么是函数

函数是被命名的，独立的，完成特定功能的代码段。

其可能给调用它的程序返回值，我们把这个代码段就称之为“函数”。

被命名的：

函数大部分都是有名字的，在程序运行中可以通过这个名称来实现对函数的调用

独立的：

函数是为了完成某个特定功能的独立代码段

返回值：

有些函数可以通过return语句设置返回值

2、函数的作用

①代码重用

②模块化编程

面向过程核心（模块化编程）：

把一个系统分解为若干个步骤，每个步骤就是一个函数。

3、函数的定义

使用函数前要先定义才能调用

函数定义有三个部分:

函数名,参数列表,函数体

定义函数的格式

function函数名（[参数1,参数2...]）{

函数执行部分;

return表达式;

}

例1：

定义一个打招呼程序

说明：

以上程序可以实现打招呼，但是其代码过于冗余（重复性代码过多）

例2：

定义一个函数，封装以上代码

例3：

定义参数，实现向不同的人打不同的招呼

在Javascript函数中，参数一共有两种形式：

形式参数（形参）与实际参数（实参）

在函数定义时所指定的参数就是函数的形参

在函数调用时所指定的参数就是函数的实参

例4：

在程序设计中对函数的定义要求：

内聚性强，耦合性弱

内聚性强：

函数的功能要专一，专门用于完成某个特定的功能

耦合性弱：

模块与模块之间关联性越低越好（如电脑主板上的插槽）

4、匿名函数

如果一个函数没有名字，我们就把它称之为“匿名函数”。

以上程序在运行时，没有任何语法错误，所以在Javascript中我们把这种没有名字的函数就称之为“匿名函数”。

5、函数在内存中的存储形式

问题：

如果一个函数没有名字，那如何调用此函数呢？

答：

可以把这个匿名函数赋值给其他某个变量，我们可以通过调用这个变量来实现对匿名函数的引用。

函数在内存中的存储形式：

在Javascript中，内存和PHP是一样的都分为四块区域：

栈内存：

小而快，主要用于存储简单类型的数据（Number、String、Boolean）

堆内存：

大而慢，慢是相对而言的。

主要存储Object对象类型数据

代码段：

主要用于存放函数体

数据段（了解）

说明：

Javascript是一种弱类型语言，但是弱类型语言不代表没有数据类型，而是随着其存储值的不同，其数据类型也是不同的。

理论上，Javascript中的变量可以存储任何类型的数据，如下图所示：

特别说明：

在Javascript中，函数也是一种特殊的量，其在内存中表现为一段连续的内存地址，一个函数无论是有名函数还是匿名函数其都会返回函数在内存中的首地址。

原理图：

如果想实现对display函数的引用，只需要通过以下代码即可执行：

i（）：

代表找到display函数在内存中的首地址并执行。

6、自调用匿名函数

如果一个函数是没有名字的（匿名函数），其是没有办法根据名称进行直接调用的。

所以我们可以直接在匿名函数定义完毕后就立即执行，我们把这种函数就称之为“自调用匿名函数”。

特别说明：

在实际项目开发中，我们可能同时引入多个Javascript代码库，如ajax/jquery/extjs等等，如果在代码库中函数出现重名现象就会导致覆盖问题，从而影响代码的执行，所以为了解决这个问题，我们可以使用自调用匿名函数来解决函数的重名问题。

四、作用域链

如果想要学好Javascript，有三个地方必须要认真掌握：

两链一包

两链：

作用域链与原型链

一包：

Javascript中的闭包

1、作用域

在Javascript中没有块级作用域，对作用域的划分都是通过function函数来实现的。

在函数外部的区域就是全局作用域，在函数内部的区域就是局部作用域。

2、全局变量与局部变量

在全局作用域中定义的变量就是”全局变量”

在局部作用域中定义的变量我们就称之为“局部变量”

但是全局变量与局部变量也是相对而言的，也会存在以下特殊形式：

3、变量与作用域之间的访问关系

在全局作用域中可以引入全局变量，在局部作用域中即可以引用全局变量也可以引用局部变量。

但是在全局作用域是不能访问局部变量的，如下图所示：

主要原因有二：

①作用域不允许

②受到Javascript垃圾回收机制的影响

Javascript垃圾回收机制：

当函数执行完毕后，其内部的所有局部变量都会自动被内存所回收，这就是垃圾回收机制。

问题：

为什么在局部作用域中可以引用全局变量呢？

答：

受到作用域链的影响

4、作用域链

在局部作用中，引用一个变量后，系统会自动在当前作用域中寻找var的声明语句，如果找到则直接使用，否则继续向上一级作用域中去寻找var的声明语句，如未找到，则继续向上级作用域中寻找…直到全局作用域中如还未找到var的声明语句则自动在全局作用域中声明该变量。

我们把这种链式的查询关系就称之为”作用域链“。

例1：

使用作用域链的原则解析以下代码

运行结果：

10

解析：

当我们执行display函数时，系统会自动执行第13行代码，由于在局部作用域中引用了一个变量i，所以根据作用域链的原则，系统首先在当前作用域中寻找var的声明语句，但未找到，所以继续向上一级作用域中寻找var的声明语句，在全局作用域中找到了var的声明语句，所以直接弹出结果10。

例2：

使用作用域链原则解析以下代码的执行结果

运行结果：

100

解析：

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

例3：

改进上题，说出程序的执行结果

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

5、作用域链原理图

五、script代码段

1、script代码段的执行

在Javascript代码中，可以使用script作为基本标识，script代码段在运行过程中是分段解析与执行的。

2、script代码段执行流程

在Javascript代码中，script标签是分段解析与执行的，也就是说先执行第一段script代码，然后解析与执行完毕后在执行第二个script代码，依次类推：

1）读入第一个代码段

2）编译

声明变量、声明函数、语法检查、语义检查、代码优化、分析并得到代码树。

3）执行

变量的赋值，函数的调用，代码的执行都是发生在执行阶段。

例如：

vari=10这样一行代码，要经历两个阶段（编译与执行）

编译阶段：

声明变量vari=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、面试题