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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
DWR Ext 加载数据
Mar 22 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
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中文件上传的安全问题
2006/10/09 PHP
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
十个Python程序员易犯的错误
2015/12/15 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
Python中的延迟绑定原理详解
2019/10/11 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
汉语言文学职业规划
2014/02/14 职场文书
党员党性分析材料
2014/02/17 职场文书
消防宣传口号
2014/06/16 职场文书
教师职位说明书
2014/07/29 职场文书
亲属关系公证书样本
2015/01/23 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript