JavaScript变量声明
<h2>变量声明</h2>
<code>var</code> 老的（逐渐淘汰）
<code>let</code> （推荐）
<code>const</code> 常量
<br >
<strong>var存在的问题：</strong>
1.允许变量重复声明
2.不限制修改
3.不支持块级作用域 – 函数级
<br >
<strong>let const 的优点：</strong>
1.不允许变量重复声明
2.<code>const</code>可以限制修改
3.支持块级作用域 – <code>{}</code>
<strong>块级作用域好处：</strong>
1.不容易重名
2.每个代码块都有自己的变量副本(这点对普通的if之类的影响不大，但对循环里影响特别大)
<br >
<h3>for循环里用var声明</h3>
<pre class=“language-html line-numbers”><code class=“language-html”>
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Document</title>
</head>
<body>
<button type=“button”>aaa</button>
<button type=“button”>bbb</button>
<button type=“button”>ccc</button>
<script>
let aBtn = document.querySelectorAll(‘button’);
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function() {
alert(i);
}
}
</script>
<!--
{
var i=0;
aBtn[i].onclick = function() {
alert(i); // 3
};
}
{
var i=1;
aBtn[i].onclick = function() {
alert(i); // 3
};
}
{
var i=2;
aBtn[i].onclick = function() {
alert(i); // 3
};
}
在这个循环里i 只有一个
因为var是不带块级作用域的，所以就只有一个副本
换句话说就是在循环过程中i都是同一个,如果其中一个变了，其他的都会变，跟着受影响
-->
</body>
</html>
</code></pre>
<h3>for循环里用let声明</h3>
<pre class=“language-html line-numbers”><code class=“language-html”>
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Document</title>
</head>
<body>
<button type=“button”>aaa</button>
<button type=“button”>bbb</button>
<button type=“button”>ccc</button>
<script>
let aBtn = document.querySelectorAll(‘button’);
for (let i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function() {
alert(i);
}
}
</script>
<!--
{
let i=0;
aBtn[i].onclick = function() {
alert(i); // 0
};
}
{
let i=1;
aBtn[i].onclick = function() {
alert(i); // 1
};
}
{
let i=2;
aBtn[i].onclick = function() {
alert(i); // 2
};
}
let就不一样了，它是一个块级作用域，每个代码块都有自己的变量副本。for也是一个代码块，for本身也在这个代码块当中
在这个循环里i 一共有三个，且这些i都是完全互相不打扰的，任何一个i变了,其他的不会跟着变
-->
</body>
</html>
</code></pre>
<h2>变量作用域（scope）</h2>
<h3>全局</h3>
在所有函数之外声明的 – 可以在任何地方使用 （不推荐）
全局变量在任何地方都可以使用，之所以非常危险，是因为任何人都可以修改，也容易重名
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
let a=12;
function show(){
alert(a);
}
show();
console.log(a);
</code></pre>
<h3>局部</h3>
声明在函数内的变量叫做‘局部变量’ – 只能在函数内部使用
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
function show(){
let a=12;
alert(a);
};
show();
//报错
console.log(a);
// Uncaught ReferenceError: a is not defined
</code></pre>
<h3>块级</h3>
<code>if{}</code> <code>for{}</code> <code>function{}</code> …都是块级作用域
类似局部作用域，只不过在一定程度上分的更细了