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 24 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 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分页时出现的Fatal error的解决方法
2011/04/18 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python简单实现基数排序算法
2015/05/16 Python
python调用fortran模块
2016/04/08 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python模块导入的细节详解
2018/12/10 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
Django-migrate报错问题解决方案
2020/04/21 Python
python新手学习可变和不可变对象
2020/06/11 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
网络程序员自荐信
2014/01/25 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
住宅质量保证书
2014/04/29 职场文书
查摆剖析材料范文
2014/09/30 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle