只需五句话搞定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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
jquery创建div 实现代码
Apr 27 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
PHP 无限级分类
2017/05/04 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
jQuery 全选效果实现代码
2009/03/23 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
卫生安全检查制度
2014/02/04 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
文案策划专业自荐信
2014/07/07 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
员工试用期工作总结
2019/06/20 职场文书