浅析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实现控制表格行高亮实例
Jun 05 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JavaScript 五大常见函数
Mar 23 Javascript
图解javascript作用域链
May 27 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
JavaScript声明变量和数据类型的转换
Apr 12 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 中英文语言转换类代码
2011/08/11 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
php精度计算的问题解析
2019/06/21 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
为python设置socket代理的方法
2015/01/14 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python实现udp聊天窗口
2020/03/31 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
初任培训自我鉴定
2013/10/07 职场文书
学生实习介绍信
2014/01/15 职场文书
导游个人求职信范文
2014/03/23 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
户外亲子活动总结
2015/05/08 职场文书
vue的项目如何打包上线
2022/04/13 Vue.js