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 相关文章推荐
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 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脚本的10个技巧(7)
2006/10/09 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
详解Vite的新体验
2021/02/22 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
珍惜水资源建议书
2014/03/12 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
2015年电工工作总结
2015/04/10 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
golang在GRPC中设置client的超时时间
2021/04/27 Golang
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL
win sever 2022如何占用操作主机角色
2022/06/25 Servers