只需五句话搞定JavaScript作用域(经典)


Posted in Javascript onJuly 26, 2016

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)时,其寻找顺序为根据作用域链从内到外的优先级寻找,如果内层没有就逐步向上找,直到没找到抛出异常。

425762-20160707114743577-37359182.png

四、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';
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中使用"with"语句中跨frame的变量引用问题
Mar 08 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 #Javascript
js获取html的span标签的值方法(超简单)
Jul 26 #Javascript
js无法获取到html标签的属性的解决方法
Jul 26 #Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 #Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 #Javascript
js判断空对象的实例(超简单)
Jul 26 #Javascript
全面了解构造函数继承关键apply call
Jul 26 #Javascript
You might like
PHP下MAIL的另一解决方案
2006/10/09 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
Python 控制终端输出文字的实例
2019/07/12 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
后勤人员自我鉴定
2013/10/20 职场文书
英文版餐饮运营管理求职信
2013/11/06 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
宣传口号大全
2014/06/16 职场文书
新课培训心得体会
2014/09/03 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
公司安全管理制度范本
2015/08/05 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
python实现监听键盘
2021/04/26 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
Ajax实现异步加载数据
2021/11/17 Javascript
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
Django框架之路由用法
2022/06/10 Python