js 作用域和变量详解


Posted in Javascript onFebruary 16, 2017

一、说起变量的提升呢,首先我们先看一段简单的代码

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v = 'hello world';
  alert(v);
 </script>
</body>
</html>

以上代码执行的结果是hello world

然后在看一段代码:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function(){
   alert(v);
  })();
 </script>
</body>
</html>

执行的结果和第一段代码一样hello world

好了,接下来在看这段代码:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function(){
   alert(v);
   var v='I love you';
   alert(v);
  })();
 </script>
</body>
</html>

以上代码执行的结果: 第一个弹出的是undefined;第二个结果是I love you。为什么会有这样的结果呢?

这就跟刚开始提到的变量提升有关系哦~~~下面我们来做下总结:

最后一段代码展现了2个知识点:

1、变量提升

2、作用域链

首先来说作用域链,js访问一个变量时会优先在该作用域内(访问时的那个作用域)寻找是否声明过这个变量,如果该变量已经存在,则直接使用它的值,否则会寻找该作用域的‘父作用域/上级作用域',依次类推,直到找到全局作用域为止。

关于变量提升是指:js在解析的时候总是会将var,function这类关键词的声明语句提升至作用域的最顶部(注意:这里只会提升声明的部分,赋值不会被提升)

所以,由此看来,上述的那段代码就等于:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function () {
   var v; //先将该作用域下的变量提升,但没有赋值
   alert(v); //所以此时是undefined
   var v='I love you';
   alert(v); //I love you
  })();
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
JavaScript数组方法总结分析
May 06 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 #Javascript
js面向对象编程总结
Feb 16 #Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 #Javascript
JS实现DIV高度自适应窗口示例
Feb 16 #Javascript
Js apply方法详解
Feb 16 #Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 #Javascript
js实现文字无缝向上滚动
Feb 16 #Javascript
You might like
封装一个PDO数据库操作类代码
2009/09/09 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
AOP的定义以及作用
2013/09/08 面试题
港湾网络笔试题
2014/04/19 面试题
本科生就业推荐信
2014/05/19 职场文书
2014年团工作总结
2014/11/27 职场文书
小学运动会前导词
2015/07/20 职场文书
汽车销售员工作总结
2015/08/12 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
python小程序之飘落的银杏
2021/04/17 Python
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python