JS变量提升原理与用法实例浅析


Posted in Javascript onMay 22, 2020

本文实例讲述了JS变量提升。分享给大家供大家参考,具体如下:

该篇介绍什么是变量提升,写给像我一样的JS新手看的

简单来说变量提升就是 JS会把var变量的声明自动提升到作用域的顶部,即使你不想这样

一个例子: (局部变量与全局变量同名时 , 局部变量覆盖全局变量)

var a="全局变量";
function test()
{
  document.writeln(a);
  var a="局部变量";
  document.writeln(a);
}
test();

上例的两个输出结果是

undefined局部变量

第一个输出并没有输出全局变量a而是undefined ,这就是变量提升导致的

上例等同与下例:

var a="全局变量";
function test()
{
  var a;
  document.writeln(a);
  a="局部变量";
  document.writeln(a);
}
test();

test函数内即使局部变量a还没定义,就已经覆盖了全局变量,可见其声明已经生效了,

变量声明会自动提升到作用域的顶部, 即使该语句并没执行

如下例:

var x=100;
var y=200;
function test()
{
  document.writeln(x);
  document.writeln(y);
  if(false)
  {
    var x=1;
  }
  return;
  var y=2;
}
test();

输出结果:

undefinedundefined

等同如下形式:

var x=100;
var y=200;
function test()
{
  var x,y;
  document.writeln(x);
  document.writeln(y);
  if(false)
  {
    x=1;
  }
  return;
  y=2;
}
test();

那么怎么解决这个问题呢?

用let变量!let变量执行到定义部分才会装载,具体用法请自行查询!

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 #Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 #Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 #Javascript
详解如何修改 node_modules 里的文件
May 22 #Javascript
Node.js API详解之 readline模块用法详解
May 22 #Javascript
vue+canvas实现移动端手写签名
May 21 #Javascript
基于canvas实现手写签名(vue)
May 21 #Javascript
You might like
smarty获得当前url的方法分享
2014/02/14 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
ie focus bug 解决方法
2009/09/03 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python爬虫实现中英翻译词典
2019/06/25 Python
python tkinter实现屏保程序
2019/07/30 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
降低python版本的操作方法
2020/09/11 Python
Django如何重置migration的几种情景
2021/02/24 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
有多年工作经验的自我评价
2014/03/02 职场文书
机关会计岗位职责
2014/04/08 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers