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 相关文章推荐
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
写一个Vue Popup组件
Feb 25 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python argv用法详解
2016/01/08 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python 列表的清空方式
2020/01/13 Python
python遍历路径破解表单的示例
2020/11/21 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
农村产权制度改革实施方案
2014/03/21 职场文书
毕业生找工作求职信
2014/08/05 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
地雷战观后感
2015/06/09 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server