浅析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的caller,callee,call,apply
Apr 28 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
jQuery的position()方法详解
Jul 19 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
javascript模块化简单解析
Apr 07 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 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中实现图片的锐化
2006/10/09 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
探讨如何把session存入数据库
2013/06/07 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
Jquery中"$(document).ready(function(){ })"函数的使用详解
2013/12/30 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Golang与python线程详解及简单实例
2017/04/27 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
Python学习之os模块及用法
2020/06/03 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
应用艺术专业个人的自我评价
2014/01/03 职场文书
安全生产计划书
2014/05/04 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS