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版
Aug 02 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
php实现天干地支计算器示例
2014/03/14 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
php基础教程
2015/08/26 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
基于python的字节编译详解
2017/09/20 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Pytorch to(device)用法
2020/01/08 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
应用数学自荐书范文
2013/11/24 职场文书
经济担保书范文
2014/04/02 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
股份转让协议书范本
2015/01/27 职场文书