浅析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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
jquery each()源代码
Feb 14 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 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 FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
使用Python写个小监控
2016/01/27 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
预备党员表决心书
2014/03/11 职场文书
党性分析材料格式
2014/12/19 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS