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 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
利用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
PHP程序员的技术成长规划
2016/03/25 PHP
jquery实现瀑布流效果分享
2014/03/26 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
element中的$confirm的使用
2020/04/26 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
python打开网页和暂停实例
2014/09/30 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
基于python监控程序是否关闭
2020/01/14 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
橄榄树药房:OLIVEDA
2019/09/01 全球购物
保护动物的标语
2014/06/11 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
同事去世追悼词
2015/06/23 职场文书
迎新年主持词
2015/07/06 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
Java SSM配置文件案例详解
2021/08/30 Java/Android
redis数据一致性的实现示例
2022/03/18 Redis
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL