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 相关文章推荐
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 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危险函数(disable_functions)
2012/02/23 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
PHP实现微信对账单处理
2018/10/01 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python实现大学人员管理系统
2019/10/25 Python
基于python3生成标签云代码解析
2020/02/18 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
中国电视购物:快乐购
2017/02/04 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
签证工作证明模板
2015/06/15 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
Python基础详解之描述符
2021/04/28 Python
详解Js模块化的作用原理和方案
2021/04/29 Javascript
mysql sql常用语句大全
2022/06/21 MySQL