【JS里面使用var声明变量存在的三个问题】

1.允许重复声明，导致变量被覆盖。看如下代码：

var a = 1;
function prinf(){console.log(a);
}var a = 2;prinf();

结果输出：

这里假设你var a = 2前面还有上万行代码，那么你调用prinf函数的时候，是想打印之前的a,但是你忘记之前声明的变量和几万行代码后面的a是同名的，导致后面声明的a覆盖了之前的a.
2.变量提升：闭包问题，怪异的数据访问.
看如下代码：

if(Math.random() > 0.5){var a = "abc";console.log(a);
}else{console.log(a);
}console.log(a);

输出结果：

由于变量提升问题，这段代码是不会报错的，但是逻辑是有问题的。
闭包问题：看如下代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="box"></div>  <script type="text/javascript">
//          在box里面加入10个按钮,点击每个按钮,打印按钮的编号var box = document.getElementById("box");for (var i = 1;i<=10; i++) {var btn = document.createElement("button");btn.innerHTML = "按钮"+i;box.appendChild(btn);}</script></body>
</html>

页面效果：
然后现在的需求是;点击按钮，输出按钮对应的编号


```html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="box"></div>  <script type="text/javascript">
//          在box里面加入10个按钮,点击每个按钮,打印按钮的编号var box = document.getElementById("box");for (var i = 1;i<=10; i++) {var btn = document.createElement("button");btn.innerHTML = "按钮"+i;box.appendChild(btn);btn.onclick = function(){console.log(i);                  }}</script></body>
</html>

这里打印的结果都是11.我们期望的是打印对应的编号。由于点击事件里面访问的是外部变量，点击事件还没有发生，循环就已经结束了，所以打印的都是11.

解决办法：写很不优雅的代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="box"></div><script type="text/javascript">//            在box里面加入10个按钮,点击每个按钮,打印按钮的编号var box = document.getElementById("box");for(var i = 1; i <= 10; i++) {var btn = document.createElement("button");btn.innerHTML = "按钮" + i;box.appendChild(btn);(function(i) {btn.onclick = function() {console.log(i);}})(i)}</script></body>
</html>

3.全局变量挂载到全局对象：全局对象成员污染问题
先看如下代码：

<script type="text/javascript">var console = "打印";console.log(console);
</script>

输出结果：

这里console是全局上面的一个对象，但是我们声明的时候将其覆盖了。

4.以上就是js里面使用var声明变量的几个问题。

【JS里面使用var声明变量存在的三个问题】相关推荐

浅谈js中的var和function变量提升，var声明变量提升，块级作用域中的函数提升
1.首先最常见的一种变量提升 console.log(a); //输出 undefinedvar a=10;console.log(a) // 输出 10 var 有提升的作用其实上面的代码会变成会变 ...
JS红书宝--var,let和const声明变量
var,let和const声明变量 var 声明 var声明作用域 function test() { var message = "hi"; // 局部变量 } test(); ...
var let const声明变量的区别
在js中定义变量的方式有三种,其中let和const关键字是来自ES6中的,下面将逐一介绍各个关键字声明变量的特点. var声明变量 var 是一个 JS关键字,用来声明变量( variable 变量 ...
js 1 声明变量数据类型
1.vs新建步骤文件--新建项目--web--空web应用程序--取名.位置.确定--此时软件会自动生成一个sln文件(解决方案),一解决方案下面可以有多个项目. 文件夹所在的位置点击项目--右击 ...
uniapp 获取到js文件var一个变量怎么获取到这个变量值_浅析Js中const,let,var的区别及作用域...
理解:let变量的作用域只能在当前函数中 js中const,let,var的区别及作用域_lianzhang861的博客-CSDN博客blog.csdn.net 全局作用域中,用 const 和 l ...
php变量和js变量的区别吗,JS声明变量的3种方式和区别
JavaScript 是弱类型语言,可以不需要声明变量而直接使用.这样虽然简单但不易发现变量名方面的错误,所以不建议这样做.通常的做法是在使用 JavaScript 变量前先声明变量.目前,JavaS ...
使用var、let、const声明变量
一.使用var声明变量 1.使用方法通过var关键字可以一次声明一个变量或者多个变量,同时可以为声明的变量赋初始值.但是变量的声明和初始值并不是在同一时间执行的,在执行初始值之前这些声明的变量的值为 ...
javascript 声明变量var、let、const详解及示例
1. var.let.const概述 ES6发布前,Javascript只能通过var声明变量的方式,常量.块级变量.函数变量这些概念的差别都不能很好的体现出来,于此同时,加入你要使用或者提供一个ap ...
详解var、let、const关键词声明变量的区别，以及变量提升、块级作用域的认识等。
首先回顾一下JavaScript中var声明变量的基础知识: • 在使用var关键词声明变量时,变量在函数外则是全局变量,有全局作用域,全局变量在页面关闭后销毁:变量在函数内则是局部变量,作用局部作用 ...

【JS里面使用var声明变量存在的三个问题】

【JS里面使用var声明变量存在的三个问题】相关推荐

最新文章

热门文章