关于javascript作用域的常见面试题分享


Posted in Javascript onJune 18, 2017

本文主要给大家分享了关于javascript作用域面试题的相关内容,分享出来供大家参考学习,下面来一起看看吧。

一、作用域:

在了解作用域之前,首先需要明白一些基础概念:

每一个变量、函数都有其作用的范围,超出作用不得使用,这个叫做作用域。

二、全局变量、局部变量:

1.全局变量:

     (1)在全局范围内声明的变量,如var a=1;

     (2)只有赋值没有声明的值,如a=2; (注:如果a=2在函数环境中,也是全局变量)

2.局部变量:

      写入函数中的变量,叫做局部变量。

3.作用:

     (1)程序的安全。

     (2)内存的释放。

三、作用域链:

查找量的过程。先找自己局部环境有没有声明或者是函数,如果有,则查看声明有无赋值或者是函数的内容,如果没有,则向上一级查找。

四、预解析顺序:

每个程序都要做的工作,程序开始先预解析语法,标点符号是否有误,解析内存是否可容纳,解析变量……直到解析无误了,才开始按正常的流程顺序走。试想一下,如果没有预解析顺序,直接按流程顺序走,可能程序执行到最后一个函数,发现了语法错误,才开始报错,那性能要有多差啊!

顺序内容:

      1.文件内引用的<script>块依次解析,从上到下连成一片。

      2.每个script块内部的var(注意:只解析变量名,不解析值,如var a=2;将var a解析在环境的开头,并不解析后面的值,只有当程序执行到var a=2这行时,才会给变量赋值),function解析到本块的开头。

      3.依次解析每个环境,将var,function解析到环境的开头。

五、应用场景(一些常见的作用域相关的面试题):

var a="aa";
function test(){
 alert(a);//undefined,函数执行后,在函数环境内,var a会预解析,当弹出a时,首先先找本层环境内有无声明,发现有。但是代码没有执行到赋值,所以结果是undefined。
 var a="bb";//var a会预解析在函数开头,执行到这行才进行赋值
 alert(a);//“bb”
}
test();
alert(a);//"aa" 找全局环境下的声明,找到了var a="aa"
var a="aa";
function test(){
 alert(a);//“aa”,函数执行后,在函数环境内,没有找到本层环境关于a的声明,所以开始向上一层环境查找。
 a="bb";//执行到这行开始改变全局a的量
}
test();
alert(a);//"bb" 全局环境的a在函数执行时已经被改变
function test(){ 
 b();//函数b会被预解析,因此可以调用,执行了输出1;
 var a=1;
 function b(){
  console.log(1);
  console.log(a);//undefined
  var a=2;
 }
}
test();

六、总结:

要搞清楚一个变量的作用域,重点是搞清楚预解析顺序,然后再判断作用域的范围,这些都是有套路可言:先找本层环境有无声明,有的话,看是否进行了赋值;只有声明没有执行赋值,就是undefined。没有声明也没有赋值的话,就再向上一层查找,直到找到为止。如果所有的执行环境都没有找到,那么控制台就会报错变量找不到。

函数的话就更简单了:找本层环境是否有预解析的函数,有的话即可执行。没有的话还是向上查找。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
详解jQuery中的事件
Dec 14 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
Angular.js中下拉框实现渲染html的方法
Jun 18 #Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 #Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 #Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 #Javascript
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
vue router路由嵌套不显示问题的解决方法
Jun 17 #Javascript
You might like
深入理解PHP中的Session和Cookie
2013/06/21 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python简单区块链模拟详解
2019/07/03 Python
pandas中ix的使用详细讲解
2020/03/09 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
Python实现SMTP邮件发送
2020/06/16 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
质检员岗位职责
2013/12/17 职场文书
一岗双责责任书
2014/04/15 职场文书
中国梦口号
2014/06/13 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2015年大学生实习评语
2015/03/25 职场文书
检讨书怎么写
2015/05/07 职场文书
读书笔记怎么写
2015/07/01 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Golang jwt身份认证
2022/04/20 Golang
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript