浅析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 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
微信小程序之购物车功能
Sep 23 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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生成EXCEL的东东
2006/10/09 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
Python中super关键字用法实例分析
2015/05/28 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
Django如何将URL映射到视图
2019/07/29 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
渔夫的故事教学反思
2014/02/14 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
会计试用期自我评价
2014/09/19 职场文书
晚会开幕词
2015/01/28 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL