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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
js 通用订单代码
Dec 23 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
AngularJS实现路由实例
Feb 12 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 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建立Ftp连接的方法
2015/03/07 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
简单谈谈python基本数据类型
2018/09/26 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
python实现按关键字筛选日志文件
2019/12/24 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
佳能英国官方网站:Canon UK
2017/08/08 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
优秀毕业大学生推荐信
2013/11/13 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
暂住证明怎么写
2015/06/19 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby