浅析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 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
JS 动态加载脚本的4种方法
May 05 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
利用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/09/30 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
python使用psutil模块获取系统状态
2016/08/27 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Python实现的质因式分解算法示例
2018/05/03 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
超实用的 30 段 Python 案例
2019/10/10 Python
pandas的resample重采样的使用
2020/04/24 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
关于感恩的演讲稿400字
2014/08/26 职场文书
财务管理专业自荐书
2014/09/02 职场文书