只需五句话搞定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 相关文章推荐
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 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桌面中心(三) 修改数据库
2007/03/11 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
JS之小练习代码
2008/10/12 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python 装饰器深入理解
2017/03/16 Python
使用python实现tcp自动重连
2017/07/02 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
毕业设计计划书
2014/01/09 职场文书
文秘人员工作职责
2014/01/31 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
建筑投标担保书
2014/05/20 职场文书
车辆工程专业求职信
2014/06/14 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
Tomcat配置访问日志和线程数
2022/05/06 Servers