浅析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 文本框使用小结
May 22 Javascript
js分页代码分享
Apr 28 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
vue组件横向树实现代码
Aug 02 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
微信小程序实现上拉加载功能
Nov 20 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判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python中super()函数简介及用法分享
2016/07/11 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
python 制作本地应用搜索工具
2021/02/27 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
校长就职演讲稿
2014/01/06 职场文书
离职保密承诺书
2014/05/28 职场文书
生物学专业求职信
2014/07/23 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
canvas多重阴影发光效果实现
2021/04/20 Javascript
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
python unittest单元测试的步骤分析
2021/08/02 Python