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 相关文章推荐
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 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之Smarty入门
2007/01/04 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
php导出excel格式数据问题
2014/03/11 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
python 获取et和excel的版本号
2009/04/09 Python
python图像处理之反色实现方法
2015/05/30 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
django缓存配置的几种方法详解
2018/07/16 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
校园歌手大赛策划书
2014/01/17 职场文书
环保倡议书400字
2014/05/15 职场文书
英文求职信范文
2014/05/23 职场文书
班级心理活动总结
2014/07/04 职场文书
新党章心得体会
2014/09/04 职场文书
离婚案件上诉状
2015/05/23 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书