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 相关文章推荐
JavaScript toFixed() 方法
Apr 15 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
原生JS实现留言板
Mar 26 Javascript
Vue实现简易购物车页面
Dec 30 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
第九节--绑定
2006/11/16 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
一个用js实现控制台控件的代码
2007/09/04 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python实现给字典添加条目的方法
2014/09/25 Python
Python中的异常处理学习笔记
2015/01/28 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python学生管理系统
2019/01/30 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
土木工程专业自荐信
2013/10/04 职场文书
军训的自我鉴定
2013/12/10 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
质量保证书怎么写
2015/02/27 职场文书
信用卡工作证明范本
2015/06/19 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript