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 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
Angular2自定义分页组件
Apr 19 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
PHP的基本常识小结
2013/07/05 PHP
PHP内核探索之变量
2015/12/22 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
nicejforms——美化表单不用愁
2007/02/20 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
详解Python中的条件判断语句
2015/05/14 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
python flask框架实现重定向功能示例
2019/07/02 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python