0001. var 关键字和变量
- 1. 🎯 本节内容
- 2. 🫧 评价
- 3. 💡 思维导图
- 4. 📒 理解变量、内存、值
- 5. 💻 demos.11 -
var关键字的作用域特性 - 6. 📒 不再推荐使用
var来声明变量 - 7. 💻 demos.1 - 理解变量和值
- 8. 💻 demos.2 - 区分大小写
- 9. 💻 demos.3 - 变量的声明、赋值
- 10. 💻 demos.4 - 仅声明未赋值为 undefined
- 11. 💻 demos.5 - 全局变量
- 12. 💻 demos.6 - 使用未声明的变量会报错
- 13. 💻 demos.7 - 可一次声明多个变量
- 14. 💻 demos.8 - 理解“动态”类型
- 15. 💻 demos.9 - 变量重复声明无效
- 16. 💻 demos.10 - 变量重复声明并重新赋值
1. 🎯 本节内容
- 理解变量、内存、值是什么
- 了解 var 关键字的基本使用
- 知道 var 关键字已被淘汰,不再推荐使用
2. 🫧 评价
- 本节主要介绍“变量”相关的基础知识点,比如内存、变量、值的概念,以及 var 关键字的使用。
- 内存、变量、值,这些概念是基础的通识,在学习其他编程语言时也一样会接触到。
- “思维导图”部分对本节的核心内容做了汇总,可以全屏放大后搂一眼,了解笔记的大致内容。
- 文中还提到了 let、const 关键字,有关它们的介绍请见后续笔记内容。
- 🤔 如何看待 var?
- 虽然说 var 关键字已经退出历史舞台了,但是在一些开源项目中,还是会看到 var 的身影,所以还是 有必要了解 var 关键字的一些基本特性,目的是为了能读懂别人用到 var 的程序。
- 可能会看到 var 的场景:
- 项目起步时间比较早,年代比较久远;
- 项目中的核心语言并非 js,只需要用 js 实现很简单的脚本逻辑即可,var 这些被我们看似“弊端”的灵活特性,正是脚本所需要的。
3. 💡 思维导图
4. 📒 理解变量、内存、值
- 在编程中,变量(门牌号)指向内存中的特定位置(房间),这个位置中存储的内容(房间里的东西)就是值。
- 内存 👉🏻 酒店 -> 内存就像一栋酒店,有很多房间(存储空间)供客人使用。
- 变量 👉🏻 门牌 -> 变量就像房间的门牌号,用来标识和找到特定的房间。
- 值 👉🏻 房间里的东西 -> 值就像房间里的东西,可以是家具、家电等,是实际存储在房间(内存)里的内容。



5. 💻 demos.11 - var 关键字的作用域特性
- 函数作用域:当
var在函数内部声明时,它的作用域仅限于该函数内。这意味着只能在声明它的函数内部访问该变量。 - 全局作用域:如果
var在任何函数外部声明,则它具有全局作用域,可以在代码的任何地方访问该变量,甚至在浏览器环境中会成为window对象的属性。 - 提前初始化(Hoisting):
var声明会被提升到其作用域的顶部,但赋值不会被提升。因此,在声明之前访问变量会导致其值为undefined而不是报错。 - 可重复声明:在同一作用域中可以多次使用
var声明同名变量,后面的声明不会报错,但也不会覆盖之前的声明。
js
function example() {
console.log(x) // undefined
var x = 10
if (true) {
var x = 20 // 重新声明同一变量
console.log(x) // 20
}
console.log(x) // 20
}
example()
// undefined
// 20
// 201
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- 在这个例子中,
x的值在函数范围内始终可见,并且在if块中再次声明x不会创建新的变量,而是修改同一个变量。
6. 📒 不再推荐使用 var 来声明变量
- 对 var 关键字有个简单的了解即可,var 基本算是退出历史舞台了。
- ES6 推出了两个新的用于定义变量的关键字 let、const,它们解决了 var 关键字在定义变量时的诸多“问题”。
- 为了方便相关知识点的介绍,后续部分文档中依旧会使用 var 来声明变量。
- 但是,在实际工作中,不推荐使用 var 来声明变量,应该使用 let、const。
- 到底什么时候使用 let、什么时候使用 const,这些在后面的内容中都会介绍到。这里可以简单提一嘴:
let用来声明“变”量 - 也就是那些可能会被重新赋值的变量const用来声明“常”量 - 就是那些在初始化好之后,咱们不会再去改变它的值的变量
7. 💻 demos.1 - 理解变量和值
js
var a = 1
/*
如何理解变量和值?
变量是对“值”的具名引用。
变量就是为“值”起名,然后引用这个名字,就等同于引用这个值。
变量的名字就是变量名。
var a = 1; 如何理解这行代码?
代码先声明变量 a
然后在变量 a 与数值 1 之间建立引用关系
称为将数值 1 “赋值” 给变量 a
之后引用变量名 a 就会得到数值 1
var a = 1; 这行代码中,最前面的 var 是什么?
最前面的 var 是变量声明命令。
var 表示通知解释引擎,要创建一个变量 a。
*/1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
8. 💻 demos.2 - 区分大小写
js
var a = 1
var A = 2
console.log(a)
// 1
console.log(A)
// 2
/*
js 的变量名区分大小写
A 和 a 是两个不同的变量
*/1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
9. 💻 demos.3 - 变量的声明、赋值
js
// var a = 1
var a
a = 1
/*
变量的声明和赋值,是分开的两个步骤。
var a = 1;
上面的代码将它们合在了一起,实际的步骤是下面这样。
var a;
a = 1;
*/1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
10. 💻 demos.4 - 仅声明未赋值为 undefined
js
var a
console.log(a)
// undefined
/*
如果只是声明变量而没有赋值,则该变量的值是 undefined。
undefined 是一个特殊的值,表示“无定义”。
*/1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
11. 💻 demos.5 - 全局变量
js
// 5.js
// var a = 1;
a = 1
/*
JS 是很灵活的,在声明变量的时候,如果忘记了 var 命令,JS 会自动创建一个全局变量。
写法 1:
var a = 1;
写法 2:
a = 1;
上述两种写法,基本等效。
但是,写法 2 会创建一个全局变量,而写法 1 不会。
切记,你几乎没有任何理由使用【写法 2】这种写法,因为它会创建一个全局变量,这是非常危险的。
*/1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
12. 💻 demos.6 - 使用未声明的变量会报错
js
a // ❌ ReferenceError: a is not defined
/*
如果一个变量没有声明就直接使用,js 会报错,告诉你变量未定义。
如果直接使用不存在的变量 a,系统将会报错,告诉你变量 a 没有声明。
*/1
2
3
4
5
6
2
3
4
5
6
13. 💻 demos.7 - 可一次声明多个变量
js
var a, b, c, d
/*
可以在同一条 var 命令中声明多个变量。
多个变量之间用逗号分隔。
*/1
2
3
4
5
6
2
3
4
5
6
14. 💻 demos.8 - 理解“动态”类型
js
var a = 1
a = 'hello' // ok
/*
JavaScript 是一种动态类型语言。
变量的类型没有限制,变量可以随时更改类型。
var a = 1
a = 'hello'
上述写法是 ok 的
一开始 a 存放的值是一个数字类型
然后修改变量 a 的值,改为一个字符串类型
*/1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
15. 💻 demos.9 - 变量重复声明无效
js
var x = 1
var x // 该语句相当于不存在
console.log(x) // 1
/*
如果使用 var 重新声明一个已经存在的变量,是无效的。
你可以认为重复声明的语句不存在。
var x = 1
var x
你可以认为第二次声明 x 的语句不存在
*/1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
16. 💻 demos.10 - 变量重复声明并重新赋值
js
var x = 1
console.log(x)
// 1
var x = 2
console.log(x)
// 2
/*
如果使用 var 重复声明同一个变量
并且重复声明的时候还进行了赋值
那么重复声明则会覆盖掉前面的语句
var x = 1
var x = 2
第二次声明时进行了赋值操作(声明的同时进行初始化操作)
赋的值会覆盖先前的值
下面两种写法是等效的。
【写法 1】
var x = 1
var x = 2
【写法 2】
var x = 1
var x // 相当于不存在
x = 2
*/1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32