热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JavaScript变量作用域及闭包_javascript技巧

作用域JavaScript的变量作用域是按照函数划分的,为了快速的了解它的特性,我们通过实例来进行演示。
作用域Javascript 的变量作用域是按照函数划分的,为了快速的了解它的特性,我们通过实例来进行演示。

实例一:

分析:
在全局定义的变量其实就是 window 对象的属性。
上面的例子可以看到,我们定义全局变量的同时,window 对象会产生一个相应的属性,如何让我们的代码避免产生这个属性呢,看下面的例子。
实例二:

这种情况是我们不想看到的,我们可以这么做:

为了使代码更加简洁,我们可以这样:

分析:
这种运行匿名方法的形式,在 Javascript 的主流框架中经常见到,这样做可以避免产生不必要的 window 对象的属性,减少冲突的可能。
实例三:

分析:
变量的作用域是整个函数,不是{}块。
实例四:


分析:
一个变量可以被重新定义,这个看起来有些怪,因为在很多其他语言里这样是行不通的。
实例五:

分析:
如果对一个没有初始化的变量进行赋值操作,那么这个变量会作为全局变量。

实例六:

分析:
内部函数可以访问外部函数的变量,这个就引出了一个新的概念,那就是闭包。
闭包
什么是闭包呢,简单的说就是一个函数 A ,它的内部函数 B 可以访问 A 内定义的变量,即使函数 A 已经终止。下面通过实例进行了解。
实例七:

分析:
当整个页面加载完成时,会触发 onload 事件,这个onload 事件方法里给窗口的onunload 事件注册了一个方法,这个方法里用到了onload 事件方法里声明的变量,然后onload 事件方法运行结束,这时候我们点击关闭窗口,会弹出内容为1的提示框,说明onunload 的事件方法成功的调用了onload 事件方法里声明的变量。
为了进一步了解闭包的特性,看下面的例子
实例八:

分析:
当内部函数对外部函数定义的变量进行调用时,实际上引用的是这个变量的内存块,所以当我们调用内部函数时,引用的变量值是当前这个变量的实际内容。
闭包功能虽然强大,但是如果不注意,它也会给我们带来困扰。看下面的例子。
实例九:

 

写代码的原意是给 id 是 main 的按钮注册点击事件和按键事件,事件的内容是分别弹出事件名称的提示框。但是结果有点匪夷所思,两个事件的提示框全是 onkeypress,根据闭包的原理,我们仔细分析,就会发现当两个事件方法被调用时 temp 变量 指向的是 funArr[1] 的内容,我们可以这样修改来解决这个问题:

 

把 for 循环内的代码放入一个函数内,这样,每循环一次都会产生一个函数实例,让函数实例记录 funArr 数组中的每个值,这样就避免了上面碰到的问题。

推荐阅读
author-avatar
手机用户2502877525
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有