JavaScript作用域示例详解


Posted in Javascript onJuly 07, 2016

作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript。

任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

一、JavaScript中无块级作用域

在Java或C#中存在块级作用域,即:大括号也是一个作用域。

public static void main ()
{
if(1==1){
String name = "seven";
}
System.out.println(name);
}
// 报错 
public static void Main()
{
if(1==1){
string name = "seven";
}
Console.WriteLine(name);
}
// 报错

在JavaScript语言中无块级作用域

function Main(){
if(1==1){
var name = 'seven';
}
console.log(name);
}
// 输出: seven

二、JavaScript采用函数作用域

在JavaScript中每个函数作为一个作用域,在外部无法访问内部作用域中的变量。

function Main(){
var innerValue = 'seven';
}
Main();
console.log(innerValue);
// 报错:Uncaught ReferenceError: innerValue is not defined

三、JavaScript的作用域链

由于JavaScript中的每个函数作为一个作用域,如果出现函数嵌套函数,则就会出现作用域链。

xo = 'alex';
function Func(){
var xo = "seven";
function inner(){
var xo = 'alvin'; 
console.log(xo);
}
inner();
}
Func();

如上述代码则出现三个作用域组成的作用域链,如果出现作用域链后,那么寻找变量时候就会出现顺序,对于上述实例:

当执行console.log(xo)时,其寻找顺序为根据作用域链从内到外的优先级寻找,如果内层没有就逐步向上找,直到没找到抛出异常。

四、JavaScript的作用域链执行前已创建

JavaScript的作用域在被执行之前已经创建,日后再去执行时只需要按照作用域链去寻找即可。

示例一:

xo = 'alex';
function Func(){
var xo = "seven";
function inner(){
console.log(xo);
}
return inner;
}
var ret = Func();
ret();
// 输出结果: seven

上述代码,在函数被调用之前作用域链已经存在:

•全局作用域 -> Func函数作用域 -> inner函数作用域

当执行【ret();】时,由于其代指的是inner函数,此函数的作用域链在执行之前已经被定义为:全局作用域 -> Func函数作用域 -> inner函数作用域,所以,在执行【ret();】时,会根据已经存在的作用域链去寻找变量。

示例二:

xo = 'alex';
function Func(){
var xo = "eirc";
function inner(){
console.log(xo);
}
xo = 'seven';
return inner;
}
var ret = Func();
ret();
// 输出结果: seven

上述代码和示例一的目的相同,也是强调在函数被调用之前作用域链已经存在:

•全局作用域 -> Func函数作用域 -> inner函数作用域

不同的时,在执行【var ret = Func();】时,Func作用域中的xo变量的值已经由 “eric” 被重置为 “seven”,所以之后再执行【ret();】时,就只能找到“seven”。

示例三:

xo = 'alex';<br>
function Bar(){
console.log(xo);
}
function Func(){
var xo = "seven";
return Bar;
}
var ret = Func();
ret();
// 输出结果: alex

上述代码,在函数被执行之前已经创建了两条作用域链:

•全局作用域 -> Bar函数作用域

•全局作用域 -> Func函数作用域

当执行【ret();】时,ret代指的Bar函数,而Bar函数的作用域链已经存在:全局作用域 -> Bar函数作用域,所以,执行时会根据已经存在的作用域链去寻找。

五、声明提前

在JavaScript中如果不创建变量,直接去使用,则报错:

console.log(xxoo);
// 报错:Uncaught ReferenceError: xxoo is not defined

JavaScript中如果创建值而不赋值,则该值为 undefined,如:

var xxoo;
console.log(xxoo);
// 输出:undefined

在函数内如果这么写:

function Foo(){
console.log(xo);
var xo = 'seven';
}
Foo();
// 输出:undefined

上述代码,不报错而是输出 undefined,其原因是:JavaScript的函数在被执行之前,会将其中的变量全部声明,而不赋值。所以,相当于上述实例中,函数在“预编译”时,已经执行了var xo;所以上述代码中输出的是undefined。

以上所述是小编给大家介绍的JavaScript作用域示例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
javascript文本模板用法实例
Jul 31 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 #Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 #Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 #Javascript
jQuery之简单的表单验证实例
Jul 07 #Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 #Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 #Javascript
Node.js DES加密的简单实现
Jul 07 #Javascript
You might like
第五节 克隆 [5]
2006/10/09 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
举例详解Python中yield生成器的用法
2015/08/05 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
活动总结书
2014/05/08 职场文书
自我查摆剖析材料
2014/10/11 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书