浅析JavaScript中作用域和作用域链


Posted in Javascript onDecember 06, 2016

学习js,肯定要学习作用域,js作用域和其他的主流语言的作用域还存在很大的区别。

一.js没有块级作用域。

 js没有块级作用域,就像这样:

if(){
 var a = 100; 
console.log(a) //输出100
}
console.log(a) //输出100

 js中像if,for,switch之类的语句,他们包含的代码块里面的变量,在代码块外面也能被读取,所以说,js没有块级作用域。

二.js的全局变量

 js中规定,全局变量都可以看作是window的属性,而且全局变量能够被所有的代码块读取。

var a = 10;
function() {
b = 20; 
 console.log(a); //输出10;
}
console.log(b); //输出20;

 虽然在匿名函数中对a没有定义,但是由于a是全局变量,所以其他任何的代码块都能够读取a的值。在一个复杂的项目中,全局变量如果操作不慎,很有可能带来重大的bug。所以在平时写代码的时候,应该尽量避免使用全局变量!对于一个变量来说,如果没有用var来声明的话,那么会自动认为是全局变量,因此,在书写中,一定不能漏写var。

三.js的局部变量

 js中的全局变量,很容易使代码存在问题,所以我们应该明确区分全局变量和局部变量!局部变量只在他所在的函数内部读取,在函数外部却无法读取这个变量。

function doSomething(){
 var blogName="智轩资本";
 function innerSay(){
  alert(blogName);
 }
 innerSay();
}
alert(blogName); //undefined
innerSay(); //undefined

四.js的作用域链问题

 由于js存在全局变量和局部变量,在调用一个变量是,会对他的作用域链进行查找,如果函数内部定义了这个变量,那么取该变量的值,如果没有,那么向上一层查找,如果找到了,就获取这个值,如果还没找到,继续往上层查找,直到找到位置,如果找到最后也没找到,那么该变量的值为undefined。

 先看一个例子:

var myName = '智轩资本';
function scoap() {
  console.log(myName);

var myName = "zhixuan";


console.log(myName);


console.log(age);
 } 
scoap();

先分析一下这个例子,scoap()将调用这个函数,第一个console.log(name),会对name的值进行原型链查找,首先看函数scoap内部是否进行了定义,发现在函数内部对name进行了定义,那么第一个console.log(name)将不再往上层查找!那么第一个console.log(name)的值是不是就是“zhixuan”了呢?no!no!no!由于第一个console.log(name)时,对name还没有赋值,所以,第一个console.log(name)为undefined,第二个console.log(name)为“zhixuan”!

再看一个例子:

var a = 10;
function zhixuan() {
 console.log(a);
}
function ziben() {
 var a = 20;
 zhixuan();
}
ziben();

这次console.log(a)的值为多少呢?首先执行ziben()函数,里面定义了a为20,再执行zhixuan()函数,要求输出a的值,由于作用域在函数定义的那一瞬间就决定了,所以,zhixuan()函数会向上查找到a的全局变量,即var a=10,而不是演着ziben()里的作用域查找!所以console.log(a)为10.

当然,我的这些理解比较浅,如果想要继续深入,推荐阅读:https://3water.com/article/57393.htm

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Jquery 的扩展方法总结
Oct 01 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
原生javascript实现分页效果
Apr 21 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
原生js实现无缝轮播图
Jan 11 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
利用JS轻松实现获取表单数据
Dec 06 #Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 #Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 #Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 #Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 #Javascript
详解ECharts使用心得总结
Dec 06 #Javascript
jQuery实现删除li节点的方法
Dec 06 #Javascript
You might like
PHP 各种排序算法实现代码
2009/08/20 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
python 网络编程常用代码段
2016/08/28 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
电工工作职责范本
2014/02/22 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL
vue实现Toast组件轻提示
2022/04/10 Vue.js