ES6 简单练习笔记--变量申明

一、ES5 变量定义

1.在全局作用域中 this 其实就是window对象

<script>console.log(window === this)
</script>输出结果: true

2.在全局作用域中用var定义一个变量其实就相当于在window上定义了一个属性

例如: var name = "孙悟空" 其实就相当于执行了 window.name = "孙悟空" 或者this.name = "孙悟空"

// 用var 定义一个变量其实就是在window上添加一个属性
var name = "孙悟空"
console.log(name)
console.log(window.name)
console.log(this.name)执行结果：
孙悟空
孙悟空
孙悟空

3.变量提升使用var声明变量，会自动提升到函数作用域顶部
可以分为两种情况，在全局作用域和在代码块或者方法中

<script>// name 变量是在下面定义的，但是可以在上面使用 name 这个变量// 这是因为变量被提升到作用域的最上面console.log(name)console.log(window.name)console.log(this.name)var name = "孙悟空"</script>运行结果:
空白
空白
空白可以看到这里直接相当于在最上面定义了 var name 但是没有初始化，我感觉因该是输出undefined
但是这里啥也没输出，但是没有报错
这里测试的时候千万不要刷新页面，刷新就相当于前一次把name放入window对象中

function printName(){console.log(name)
}printName()
var name = "孙悟空"运行结果:
空白同样是因为在全局作用域使用var定义变量，就相当于在最上面定义了一个变量，其实就是在编译的时候，直接把这个变量放在window身上了，但是没有初始化，调用printName()的时候，还未执行初始化语句，所以输出空白

<script>// 在代码块中{console.log(address)var address = "花果山"console.log(address)}// 在方法中function defineSex(){console.log(sex)var sex = "男"console.log(sex)}defineSex()</script>运行结果:undefined
花果山
=====================================
undefined
男这里没有报错只是输出了undefined，说明在执行的时候是存在这个变量的，只是没有进行初始化
以上代码相当于下面的代码<script>// 在代码块中{var address;console.log(address)address = "花果山"console.log(address)}// 在方法中function defineAge(){var sex;console.log(sex)sex = "男"console.log(sex)}defineAge()</script>

4.在方法中用 var 定义的变量只在方法中有效，在方法外面是访问不到的，因为当方法执行完的时候，在其中用var定义的变量就销毁了

<script>function defineSex(){var sex = "男"console.log(sex)}defineSex()console.log(sex)</script>运行结果:
男Uncaught ReferenceError: sex is not defined

5.在代码块中用 var 定义的变量在代码快中有效，在代码块外面也能访问到

<script>console.log(address)if(true){var address = "花果山"console.log(address)}console.log(address)</script>运行结果:
undefined
花果山
花果山<script>console.log(address)while(true){var address = "花果山"console.log(address)break;}console.log(address)</script>运行结果:
undefined
花果山
花果山

6.不使用 var，直接进行变量定义

<script>// 虽然这里能够访问到 name 但是输出是空白，说明也是做了变量提升，将name放在最前面// 但是由于没有初始化，所以不能输出孙悟空，这里有点好奇为啥不输出undefined// 这种情况下大家测试的时候千万要重新开一个浏览器窗口，第二次刷新的时候就不准确了，// 可以输出 孙悟空 ，因为第一次打开的时候，就将name放入 window 了，刷新就相当于// window 中已经有 name 这个属性了console.log(name)// 在全局作用域不使用var直接定义的变量相当于全局变量，在上面也能访问到name = "孙悟空"function defineGlobal(){// 在方法中不使用var直接定义的变量相当于全局变量，但是必须得是在这个方法被调用过之后// 才可以在方法外面访问到这个全局变量global = "我是全局变量"}defineGlobal()console.log(global)function defineGlobal1(){global1 = "我是全局变量1"}// defineGlobal1 没有被调用所以在defineGlobal1 中定义的全局变量global1在方法// 外面是访问不到的console.log(global1)</script>运行结果：空白没有报错我是全局变量Uncaught ReferenceError: global1 is not defined

7.在网上看到一个面试题挺有意思

<script>// 变量提升将下面定义的 a 和 b 提到最上面，但是不初始化，所以这里a b 都是undefinedconsole.log("1", a, b);  //1 undefined undefined// 这里对 a b 进行初始化var a = 12, b="34";function foo(){// 这里换了一个作用域，也就是在方法体内部// 由于在这个作用域中又定义了一个 a 变量，所以 a 会被提到当前作用域(方法内)的最上面// 但不会初始化，所以这里的 a 其实是方法中新定义的 a ,所以是undefined,// 方法中没有重新定义 b，所以还用方法外面定义且初始化好的 bconsole.log("2", a, b); //2 undefined 34// 这里重新对方法中定义的 a 进行初始化var a=b=12;// 上面对方法中定义的 a 初始化，所以这里输出 方法中定义的 a 和 外面定义的 b 都是12console.log("3", a, b);  //3 12 12}foo()//这里输出的是 外面定义的 a ，外面定义的 b ，由于b在方法中被修改为12console.log("4", a, b); //4 12 12</script>运行结果:
1 undefined undefined
2 undefined 34
3 12 12
4 12 12

<script>// 变量提升将下面定义的 a 和 b 提到最上面，但是不初始化，所以这里a b 都是undefinedconsole.log("1", a, b);  //1 undefined undefined// 这里对 a b 进行初始化var a = 12, b="34";function foo(){// 这里换了一个作用域，也就是在方法体内部// 由于在这个作用域中又定义了一个 a 变量，一个b变量，所以 重新定义的 a b 会被// 提到当前作用域(方法内)的最上面// 但不会初始化，所以这里的 a 和 b 其实是方法中新定义的 a b ,所以都是undefined,console.log("2", a, b); //2 undefined undefined // 这里重新对方法中定义的 a 进行初始化var a=12 , b=12;// 上面对方法中定义的 a 初始化，所以这里输出 方法中定义的 a 和 外面定义的 b 都是12console.log("3", a, b);  //3 12 12}foo()// 这里输出的是外面定义的 a ，外面定义的 b ,这次方法中重新定义了一个b，所以外面的b没有被// 修改console.log("4", a, b); //4 12 34</script>运行结果:
1 undefined undefined
2 undefined undefined
3 12 12
4 12 34

8.可以在同一作用域中重复多次用 var 定义相同名称的变量

<script>var name = "孙悟空"var name = "猪八戒"console.log(name)</script>运行结果:
猪八戒没有报错

二、ES6 let 申明变量

1.块级作用域

<script>console.log(address)if(true){let address = "花果山"console.log(address)}console.log(address)</script>Uncaught ReferenceError: address is not defined

2.在同一作用域中不能重复定义

<script>let name = "孙悟空"let name = "猪八戒"
//Uncaught SyntaxError: Identifier 'name' has already been declared 了解此错误
</script><script>function printName(){let name = "孙悟空"let name = "猪八戒"}
//Uncaught SyntaxError: Identifier 'name' has already been declared了解此错误
</script><script>let name = "孙悟空"//function printName(){let name = "猪八戒"console.log(name)}printName()console.log(name)
</script>没有报错，运行结果：
猪八戒
孙悟空说明在不同的作用域可以定义相同名称的变量<script>let name = 1;if(true){let name = 2;console.log(name)}console.log(name)</script>
运行结果:
2
1

<script>let address = "花果山"var address = "猪八戒"
</script>Uncaught SyntaxError: Identifier 'address' has already been declared

<script>var address = "猪八戒"let address = "花果山"
</script>
Uncaught SyntaxError: Identifier 'address' has already been declared

3.不存在变量提升

<script>console.log(address)let address = "猪八戒"</script>Uncaught ReferenceError: Cannot access 'address' before initialization这里跟 var 有很大不同， var会进行变量提升，不会报错的

4.let 在全局作用域定义的变量是不会挂到window身上的

<script>let address = "猪八戒"console.log(window.address)var name = "孙悟空"console.log(window.name)</script>运行结果:
undefined
孙悟空说明 var 在全局作用域定义的变量会挂到window身上， 但是let在全局作用域定义的变量不会挂到window身上

三、ES6 const 申明变量

1.声明变量时必须同时初始化

    <script>const name;</script>Uncaught SyntaxError: Missing initializer in const declaration

2.一旦申明完了不能修改

<script>const name = "孙悟空";name = "猪八戒";
</script>Uncaught TypeError: Assignment to constant variable.

其实这里的不能修改指的是不能修改 const 变量指向的内存地址，但是修改内存地址里面的数据是可以的。

<script>const TEAM = ["唐僧" ,"孙悟空" , "猪八戒"];TEAM.push("沙僧")TEAM.push("白龙马")console.log(TEAM)</script>

<script>const TEAM = ["唐僧" ,"孙悟空" , "猪八戒"];TEAM = ["唐僧" ,"孙悟空" , "猪八戒"];
</script>Uncaught TypeError: Assignment to constant variable.

<script>const person = {name:"孙悟空",address:"花果山"}person.weapon = "金箍棒"console.log(person)</script>

<script>const person = {name:"孙悟空",address:"花果山"}person = {name:"孙悟空",address:"花果山"}
</script>Uncaught TypeError: Assignment to constant variable

var	let	const
函数级作用域	块级作用域	块级作用域
重复声明	不可重复声明	不可重复声明
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改
全局变量挂载到window	全局变量不会挂载到window	全局变量不会挂载到window

for (var i = 1; i <= 5; i++) {setTimeout(function () {console.log(i);}, 0);}console.log(window.i)  // 6 var定义的变量会挂到 window 上运行结果:
6
6
6
6
6
6在每次循环迭代中，都会调用 setTimeout 函数，传入一个匿名函数（回调函数）和一个延迟时间
（这里是 0 毫秒）。尽管延迟时间设置为 0，这并不意味着回调函数会立即执行。相反，
它会被添加到 JavaScript 的事件队列中，等待当前执行栈清空后执行// 如果要用var定义变量的话需要通过闭包的方式来解决
for (var i = 1; i <= 5; i++) {(function(j) {setTimeout(function () {console.log(j);}, 0);})(i);
}

for (let i = 1; i <= 5; i++) {setTimeout(function () {console.log(i);}, 0);}console.log(window.i)  // undefined let定义的变量不会挂到window运行结果:
undefined
1
2
3
4
5

下面这个例子要求当点击某个div的时候，将其背景颜色改成粉色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{border-style: inset;border-color: black;border-width: 1px;height: 100px;width: 100px;float: left;margin-left: 20px;background-color: white;}</style></head><body><div></div><div></div><div></div>
</body><script>var boxes = document.getElementsByTagName("div")console.log(boxes)console.log(boxes[0])// 这里使用 let 定义 变量 i ，进行遍历没问题for (let i = 0; i < boxes.length ; i++) {boxes[i].onclick = function (){boxes[i].style.background = 'pink'}}</script></html>

<script>var boxes = document.getElementsByTagName("div")console.log(boxes)console.log(boxes[0])// 这里使用 var 定义 变量 i ，进行遍历就会报错for (var i = 0; i < boxes.length ; i++) {boxes[i].onclick = function (){boxes[i].style.background = 'pink'}}</script>Uncaught TypeError: Cannot read properties of undefined (reading 'style')这里主要原因是 var i 定义了一个全局变量，这个变量会挂到 window 上，当for循环执行完的时候，i === 3
，也就是我们点击的时候 i === 3，boxes只有3个元素，当我们点击的时候就会回调 
boxes[i].style.background = 'pink' ，boxes[3]是undefined，所以会报错