20150203+JS巩固与加强1-02

四、JavaScript中的作用域链

例1:全局作用域与局部作用域

说明:我们所说的全局变量与和局部变量其实只是相对的

例2:全局作用域中可以不可以直接访问局部变量

答:以上情况是不允许的,原因:

1)由于作用域链不允许

2)由于JavaScript的垃圾回收机制

例3:探讨函数与函数的关系

通过观察,发现以上代码可以正常执行

例2:函数如果在函数中,那么也存在作用域关系,如下图所示

通过运行以上代码,系统会提示fn1()缺少对象,主要是由于当执行第15行后,系统会自动回收display函数所占用的内存空间,会导致调用fn1函数无法找到,所以会产生缺少对象错误。

回顾php代码,在函数内部定义函数,那么在函数外部是否可以访问呢?

例3:

通过运行以上代码,返回结果displayfn1

也就是说明我们在PHP中可以调用函数中的函数

1、深入探讨JavaScript与PHP中的作用域问题

PHP中的作用域问题:

在PHP代码运行过程中,系统首先会加载display函数,并在运行栈区中开辟一段连续的内存空间,当display函数被调用时,系统会自动在运行栈区中,开辟一段独立且平行的内存空间用于fn1的存储,由于两者处于平行独立关系,所以我可以在display调用完成后,直接调用fn1函数。

JS作用域

在JavaScript代码运行过程中,系统首先会加载display函数,并在运行栈区中开辟一段连续的内存空间,当display函数执行时,系统会自动在display函数作用域范围内继续开辟一段连续的内存空间用于保存fn1函数,由于两者处于包含关系,我们我们没办法直接在函数外直接调用fn1函数

例4:

通过观察以上代码,我们会发现,系统弹出100,原因:

2、作用域链

当我们在函数内部调用某一变量时,系统首先在当前函数中寻找var声明语句(var i),如找到则直接使用,否则继续向上一级作用域寻找,如找到,则直接使用,否则继续向上寻找,直到全局作用域,如找到,则使用,否则会在全局作用域中声明该变量,我们把这个过程就称之为作用域链

作用域链和原理图:

例5:

以上代码弹出结果为1000,原理同上。

例6:

运行结果:1000,1000

五、script代码段

1、JavaScript中script代码段执行流程:

1、读入第一个代码段

2、编译

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

3、执行

代码调用,代码执行

var i = 100;

编译过程:var i = undefined;

执行过程:i=100;

4、读入下一个代码段

5、编译

6、执行

7、……

8、结束

2、探讨代码段错误(编译错误、执行错误)的影响

例1:编译错误对当前代码段所产生的影响

通过运行发现,代码无法执行。原因:

我们知道代码执行分为两个阶段:

编译阶段与执行阶段,我们没有写圆括号,那么系统在编译过程就会产生错误,所以后面的代码与前面的代码都无法正常执行。

说明:编译错误会导致当前代码段无法执行

例2:执行错误对当前代码段的影响

运行结果:hello,报错

说明:当前代码在编译阶段没有任何异常,在运行时,首先运行第9行代码,运行到第10行时,系统找不到display函数,所以会报错(执行错误),会导致后面的word无法输出,所以可以说明:

script代码段执行错误只对当前代码后面的代码有影响,而不会影响前面代码的执行

例3:编译错误对后面代码段的影响

例4:执行错误对后面代码段的影响

通过例3与例4案例,我们可以得出以下结论,无论编译错误还是执行错误,都只对当前代码段有影响,而不会对后面的代码产生影响。

3、script代码段执行原理图:

面试题:判断当前程序的执行结果?

执行结果:

undefined,1000

说明:当函数执行到第9-10行时,系统定义全局变量i=100与声明函数,当执行到第15行,系统调用display函数,由于第11行代码执行alert(i),由于作用域链原则,系统首先会在当前作用域中寻找var声明,在第12行找到了var声明,又由于代码执行分为两个阶段编译与执行:由于函数display内在编译时会定义var i=undefined所以当执行第11行代码时,系统首先输出undefined,当执行到12行时,系统自动为变量赋值i=1000,当执行到13行时,系统自动弹出刚才已赋值的变量i=1000,所以两次结果为undefined与1000。

六、JavaScript中的数组

1、什么是数组?

答:一组数据的集合

一维数组

二维数组

多维数组

2、数组的定义

l var arr=[值1,值2,值3]; //隐式创建

l var arr=new Array(值1,值2,值3); //显示创建或直接实例化

l var array=new Array(size); //显示创建并指定数组长度

例1:通过以上三种方式创建数组

例2:如何对已定义数组进行引用

基本语法:

数组名称[索引]

例3:如何遍历输出数组数据

1)通过for循环进行遍历输出

数组拥有一个属性length,标识数组长度

运行结果:

2)通过for…in…进行遍历输出

输出结果:

例4:二维数组定义

运行结果:

例5:二维数组遍历

运行结果:

3、定义文本下标数组

例6:文本下标数组

运行结果:

弹出小美

例7:文本下标数组元素是不计入数组长度的

输出结果:当前数组中共有3个元素

IE调试工具,F12弹出,如下图

调试结果如下:

在数组中,我们的文本下标都是通过属性的形式追加到数组中,所以其不计入数组长度。

例8:遍历输出带文本下标型数组

示例代码:

运行结果:

七:作业

作业一:JavaScript中与Array数组相关的系统函数

添加数组元素:

l arrayObject.push(newelement1,newelement2,....,newelementX)

l arrayObject.unshift(newelement1,newelement2,....,newelementX)

l arrayObject.splice(index,howmany,element1,.....,elementX)

删除数组元素:

l arrayObject.pop()

l arrayObject.shift()

l arrayObject.splice(index,howmany)

数组的截取与合并:

l arrayObject.slice(start[,end])

l arrayObject.concat(arrayX,arrayX,......,arrayX)

l 返回新数组

数组的连接:

l arrayObject.join(separator)

数组的切割:

l stringObject.split(separator, howmany)

作业二:省市级联(二级联动)

北京 (海淀区,朝阳区)

广州 (天河,海珠区)

时间: 2024-10-11 18:01:25

20150203+JS巩固与加强1-02的相关文章

JS模块化工具requirejs教程02

基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函数 前一篇中的a.js: define(function(){ function fun1(){ alert("it works"); } fun1(); }) 通过define函数定义了一个模块,然后再页面

JS加强学习-DOM学习02

4. 获得或设置页面文本内容的方式 innerText innerHTML textContent 区别: 4.1 获取页面文本内容: innerText只获取标签间的文本信息,不包括其中的标签,而innerHTML是获得标签之间的所有内容包括标签,而且有些浏览器会将获取的内容原样输出,innerHTML是所有浏览器都支持,没有兼容性的问题,而innerText是IE8及早期的IE浏览器支持的,老版本火狐浏览器只支持textContent不支持innerText. 4.2 设置文本内容: inn

20150203+JS巩固与加强1-01

JavaScript巩固与加强一 第一天:JavaScript回顾+函数+作用域链+script代码执行+数组 两链:作用域链+原型链 一包:闭包 第二天:事件编程 第三天和第四天:面向对象+贪吃蛇游戏开发 第五天:正则表达式 一.简介 1.为什么需要JavaScript? 2.什么是JavaScript JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器.面向(基于)对象.事件驱动式的网页脚本语言. 客户端浏览器: HTML.CSS.JavaScript客户端语言

js权威指南---学习笔记02

1.JS只有函数作用域,没有块级作用域这个概念: 它有一个特性——声明提前:在同一个函数中不同位置声明的变量,都被提前在函数开始的时候,执行声明操作:在原先位置执行赋值操作: 2.声明的全局变量,相当于定义了全局对象的一个属性: 1)如果使用var声明全局变量,这个属性是不可配置的.也就是无法delete 2)如果不使用var声明,则可以进行delete: 例子: var s1 = "s1";  //不可配置的全局变量 s2 = "s2";   //可配置的全局变量

prototype.js 源码解读(02)

如果你想研究一些比较大型的js框架的源码的话,本人建议你从其最初的版本开始研读,因为最初的版本东西少,易于研究,而后的版本基本都是在其基础上不断扩充罢了,所以,接下来我不准备完全解读prototype.js的源码了,而是拿它一些常见的API来解读. //定时器类,比起window.setInterval函数,该类能够使得回调函数不会被并发调用 var PeriodicalExecuter = Class.create();//Class类创建的定时器类 PeriodicalExecuter.pr

JS加强学习-BOM学习02

BOM的更多的用于特效方面的展示,接下来的学习就是将许多以前用到的知识与现在的结合后做出各种不同的动态效果来. 所以在这部分学习中涉及到的新知识会比较零散,甚至会将以前的知识部分衔接起来. 1. offsetParent 获取当前元素最近的设置了定位的父元素,如果没有父元素定位则选择的是body元素. 这样就可以容易理解offsetLeft的意义了,它是相对于offsetParent的距离. 2. offsetHeight 获取盒子的大小(border + height + padding):只

JavaScript简明教程之Node.js

Node.js是目前非常火热的技术,但是它的诞生经历却很奇特. 众所周知,在Netscape设计出JavaScript后的短短几个月,JavaScript事实上已经是前端开发的唯一标准. 后来,微软通过IE击败了Netscape后一统桌面,结果几年时间,浏览器毫无进步.(2001年推出的古老的IE 6到今天仍然有人在使用!) 没有竞争就没有发展.微软认为IE6浏览器已经非常完善,几乎没有可改进之处,然后解散了IE6开发团队!而Google却认为支持现代Web应用的新一代浏览器才刚刚起步,尤其是浏

详解location.href几种用法的区别【JS跳转】

一:提出问题 使用js的同学一定知道js的location.href的作用是什么,但是在js中关于location.href的用法究竟有哪几种,究竟有哪些区别,估计很多人都不知道了. 二:常见的几种形式 目前在开发中经常要用到的几种形式有: 1 self.location.href; 2 window.location.href; 3 this.location.href; 4 location.href; 5 parent.location.href; 6 top.location.href;

js面试题总结

1.typeof和Object.prototype.toString typeof是js里面判断变量类型的一种方法,但这种方法没有Object.prototype.toString准确,前者有5种判断结果,分别是function,string,number,object,undefined,后者有7中判断结果,分别是[object Function],[object Number],[object String],[object Object],[object Array],[object Nu