前端必不可少的学习就是JavaScript,到后面出现的ES6,都是其中的关键。那么,js学习最基础的是什么呢?当然是js的语法规则等内容啦,而其中的变量命名则是开端。js命名有三个:var、let、const。现在就让我们来看看,这三个命名方式有些什么奥秘?
一、var
使用 var 定义变量,可以保存任何类型的值。若不初始化变量,变量会保存 undefined。
1. 函数级作用域
使用 var 定义的变量会成为包含它的函数的局部变量。变量 a 在函数内部使用 var 定义,调用函数 func,会创建这个变量并给它赋值。函数执行结束后,变量就会被销毁,所以上述代码最后一行会报错,显示变量 a 未定义。
function func() { var a = 'hi' // 局部变量 } func() console.log(a)
若在函数内部,不使用 var 操作符,直接给变量 a 赋值,那么 a 就成为了全局变量,可以在函数外部访问到。在浏览器环境下,a 成为window对象的属性。
2. 变量提升
使用var声明变量,会自动提升到函数作用域顶部;如下这样会输出undefined:
function func() { var a console.log(a) a = 1 } func()
3. 重复声明
使用 var 重复声明同一个变量,后者会覆盖前者。
function func() { var a = 1 var a = 2 console.log(a) } func()
4. 全局变量挂载到 window
浏览器环境中,全局作用域下,使用 var 声明的变量,会挂载到 window 对象上。
var a = 1 console.log(window.a === a) // true
二、let
let也可以声明变量,只不过是块级作用域变量,和var操作符有很大的区别。
1. 块级作用域
let声明的作用域,具有块级作用域,即被{}包裹的部分,超出此包裹便失效。
if (true) { let a = 10 } console.log(a) // undefined
2. 不可重复声明
变量在当前作用域内不可重复声明,否则会报错(Uncaught SyntaxError: Identifier 'a' has already been declared)。
if (true) { let a = 1 let a = 2 } // 混合声明同一变量也会报错 let a var a // 报错
3. 不存在变量提升(暂时性锁区)
使用let声明的变量,不能在声明之前访问它。JavaScript 也会注意出现在块后面的 let 声明,只不过在此之前不能以任何方式来引用未声明的变量。在let声明之前的执行瞬间被称为暂时性死区。
if (true) { console.log(a) let a = 1 }
4. 全局变量不会挂载到 window
和 var 不同,即使在全局作用域下,使用let声明的变量也不会挂载到window对象。
var a = 1 let b = 2 console.log(window.a === a) // true console.log(window.b === b) // false
5. 不同的作用域互不影响
变量处在不同的{}时,也就是处于不同的作用域,它们的使用互相不受影响。
function func() { let a = 'hello' if (true) { let a = 'world' console.log(a) } console.log(a) } func()
6. 变量的类型
js中的变量是松散类型的,可以保存任何类型数据,变量只不过是一个名称。
let a = 1 a = "hello" a = [1, 2, 3] a = {age: 32}
三、const
const 变量只能在声明的时候赋值,后面不能再被赋值。
1. 声明变量时必须同时初始化
声明的同时没有初始化变量,会导致报错
const a // 报错
2. const 修饰的变量具有内部可变性
使用 const 定义了一个变量后,不能再更改它的值,这里的值针对的是基本类型的值;还有引用类型的指针,而不包括引用类型的值,可以通过其属性进行数据修改。
说明:基本数据类型的值就保存在内存地址中,所以 const 定义的基础数据类型不可被改变。 而引用数据类型指向的内存地址只是一个指针,通过指针来指向实际数据,也就是说,不可被改变的是指针,而不是数据,所以const定义的引用数据类型的常量可以通过属性来修改其数据。
四、总结及建议
建议: 1)先声明,后使用
2)建议优先使用:const > let > var