浅析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 相关文章推荐
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
利用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
织梦模板标记简介
2007/03/11 PHP
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
Joomla开启SEF的方法
2016/05/04 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
js实现点击生成随机div
2020/01/16 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
python异步任务队列示例
2014/04/01 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python松散正则表达式用法分析
2016/04/29 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
Python类的继承用法示例
2019/01/31 Python
python实现超市商品销售管理系统
2019/11/22 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
关于廉洁的广播稿
2014/01/30 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
罗马假日观后感
2015/06/08 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
JS数组去重详情
2021/11/07 Javascript