var/let/const最佳实践讲解

1
2
3
4
5
6
7
	<script>
var a = 12;
function f() {};
console.log(window.a); // 12
console.log(window.f); // f(){}
</script>

1
2
3
4
5
6
7
8
9
	<script>
let a1 = 1;
let b1 = 2;
console.log(window.a1); //undefined
console.log(window.b1); //undefined
console.log(a1);
console.log(b1);
</script>

1
2
3
4
5
6
7
8
9
10
	<script type="text/javascript">
let a2 = 10;
const b2 = 20;
// 解析后相当于如下:
(function() {
var a2 = 10;
var b2 = 20;
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
	<script type="text/javascript">
var a3 = 123;
// 函数外部声明作用域为全局
(function () {
var b3 = 321;
// 变量b的作用域只存在函数内部
console.log(b3); // 输出 321
})()
console.log(a3); // 输出 123
console.log(b3); // 报错：b3 is not defined
</script>

1
2
3
4
5
6
7
8
9
10
11
12
	<script type="text/javascript">
let a4 = 123;
// 函数外部声明作用域为全局
(function () {
let b4 = 321;
// 变量b的作用域只存在函数内部
console.log(b4); // 输出 321
})()
console.log(a4); // 输出 123
console.log(b4); // 报错：b4 is not defined
</script>

1
2
3
4
5
6
7
8

console.log(varDemo1); // 输出: undefined
if (true) {
var varDemo1 = "this is var "
console.log(varDemo1); // 输出：this is var 
}
console.log(varDemo1); // 输出：this is var

1
2
3
4
5
6
7
8
9

console.log(letDemo1);
// 报错：letDemo1 is not defined
if (true) {
let letDemo1 = "this is let";
console.log(letDemo1); // 输出：this is let
}
console.log(letDemo1); // 报错：letDemo1 is not defined

1
2
3
4
5
6

// 重定义:
var varDemo = 10;
var varDemo = 13;
console.log(varDemo); // 输出：13

1
2
3
4
5

let letDemo = 10;
let letDemo = 13; //抛出语法错误：'letDemo' has already been declared
console.log(letDemo);

1
2
3
4
5
6
7
8

const things = 0
for (var i = 3; i > things; i--) {
setTimeout(function() {
console.log(i); //输出：0 0 0
}, 1000)
}

1
2
3
4
5
6
7
8

const thingLet = 0;
for (let i = 3; i > thingLet; i--) {
setTimeout(function() {
console.log(i); // 输出：3 2 1 
}, 1000)
}

1
2
3
4
5
6
7
8
	<script type="text/javascript">
var value = 111;
if (true) {
value = "abc"; // 报错： value is not defined
let value;
}
</script>

1
2
3
4
5
	<script type="text/javascript">
var ab = 1;
let ab = 1; // 报错：dentifier 'ab' has already been declared
</script>

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
let aa = "2"
function abc() {
var aa = 23
}
console.log(aa); // 输出：2
console.log(abc);
</script>

1
2
3
4

const const1;
//报错：Missing initializer in const declaration

1
2
3
4

const const2 = 2.13;
const const2 = 333; // 报错同let:Identifier 'const2' has already been declared

1
2
3
4

const const3 = 22;
const3 = 4; //报错：Assignment to constant variable.