浅析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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 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/08/03 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
详谈PHP编码转换问题
2015/07/28 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python程序员开发中常犯的10个错误
2014/07/07 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
python实现逻辑回归的示例
2020/10/09 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
文职个人求职信范文
2013/09/23 职场文书
财务出纳员岗位职责
2013/11/26 职场文书
捐赠仪式主持词
2014/03/19 职场文书
家长通知书家长评语
2014/04/17 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
保护野生动物倡议书
2014/05/16 职场文书