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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
js图片预加载示例
Apr 30 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
基于Vue实现timepicker
Apr 25 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
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
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
vue中activated的用法
2021/01/03 Vue.js
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
详解python运行三种方式
2019/05/13 Python
python二进制文件的转译详解
2019/07/03 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
酒店开业策划方案
2014/06/02 职场文书
爱护草坪标语
2014/06/24 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
转正申请报告格式
2015/05/15 职场文书