JAVASCRIPT函数作用域和提前声明 分享


Posted in Javascript onAugust 22, 2013

一些语言如C、java都有块级作用域,即花括号内的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的,但是javascript没有块级作用域。javascript使用函数作用域,即变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的,也即函数内声明的所有变量在函数体内始终是可见的。这样就意味着变量在声明之前就可以使用,这个特性被称为"声明提前",即javascript函数里声明的所有变量都被提前至函数的顶部。来看个例子。

var test1 = "globalVariable";

function test(){


console.log(test1);



var test1 = "localVariable";


console.log(test1);

}

上述函数执行的结果是:先输出"undefined",再输出"localVariable"。
很多人都会误以为结果是:先输出"globalVariable,再输出localVariable"。其实不然,由于函数作用域的特性,局部变量在整个函数体始终是有定义的,也即,在函数体内局部变量遮盖了同名全局变量,但是只有在程序执行到var语句的时候,局部变量才会被真正的赋值。因此,上述过程相当于,将函数内的变量声明提前至函数体顶部,同时变量初始化留在原来的位置。就相当于如下这个函数
var test1 = "globalVariable";

function test(){


var test1;
//将函数内的变量声明提前至函数顶部


console.log(test1);



test1 = "localVariable";
//赋值


console.log(test1);

}

但是,如果函数内没有用var声明变量,情况又有所不同。
var test1 = "globalVariable";

function test(){


console.log(test1);



test1 = "localVariable";



console.log(test1);


}

这个函数执行的结果是:先输出"globalVariable",再输出"localVariable"。
由于函数体内的test1变量没有用var声明,就默认为全局变量,当然就不存在变量提前声明的问题。第一行就会输出"globalVariable",而第三行改变了test1全局变量的值,输出了"localVariable"。
Javascript 相关文章推荐
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
JavaScript中的eval()函数详解
Aug 22 #Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 #Javascript
jquery重新播放css动画所遇问题解决
Aug 21 #Javascript
JS性能优化笔记搜索整理
Aug 21 #Javascript
JS检测图片大小的实例
Aug 21 #Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 #Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 #Javascript
You might like
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
jquery $("#variable") 循环改变variable的值示例
2014/02/23 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Python requests上传文件实现步骤
2020/09/15 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
本科应届生自荐信
2014/06/29 职场文书
护士实习自荐信
2015/03/06 职场文书
廉政承诺书2015
2015/04/28 职场文书