浅析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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
vue.js购物车添加商品组件的方法
Sep 17 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 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中实现Javascript的escape()函数代码
2010/08/08 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
php单例模式示例分享
2015/02/12 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
python中MySQLdb模块用法实例
2014/11/10 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
python装饰器与递归算法详解
2016/02/18 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
大学生创业感言
2014/01/25 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
行政撤诉申请书
2015/05/18 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL