目录
使用var声明变量
不使用var,直接给变量赋值
变量的作用域
全局变量和局部变量的混用
变量提升
总结
javascript中,使用var声明变量,看似简单易学,其实不然。
在我接触的许多编程语言中,如c, c#, vb, java, php等等,声明变量都有严格的语法格式,只有一套标准,没有其二。所以说声明变量是很简单的事情。
javascript中,声明变量有两种方式:var 和 let (ES6)。声明一个变量,到底使用哪一个呢。
下面先学习var的使用。
使用var声明变量
//先声明变量,后赋值var myName;myName = "张三"//声明变量同时赋值var age = 20//同时声明多个变量var gender, phone;//或者var gender = '男', phone = '15366668888'//控制台输出变量的值console.info(gender, phone)
运行的结果如下图
注意,JavaScript 的变量名区分大小写,
A
和a
是两个不同的变量。
不使用var,直接给变量赋值
myName = '张三'console.log(myName)
JS中变量声明分显式声明和隐式声明
显示声明:使用var关键字
隐式声明:省略var关键字
隐匿声明虽然代码更少,但不是好办法。二者之间也有区别,继续往下看。
变量的作用域
在 JavaScript 中有两种作用域类型:
- 局部作用域
- 全局作用域
作用域决定了这些变量的可访问性(可见性)。
//示例1:使用var声明变量,name是全局变量var myName = "张三"//不使用var, age是全局变量age = 20var show = function () {console.log(myName)console.log(age)}show()//示例2 在语句块中使用var声明的变量,或者不使用var声明变量,都是全局变量var flag = 1if (flag) {var score = 80course = '数学'console.log(score)}console.log(score,course) //输出80 数学//示例3 在for循环中使用var声明变量,或者不使用var声明变量,都是全局变量var arr = [1, 2, 3, 4, 5]//可以省略varfor (var i = 0, len = arr.length; i < len; i++) {console.log(arr[i])}//可以访问到全局变量i和lenconsole.log(i, len) //输出5 5
在函数外部使用var或者不使用var的变量,都是全局变量。
function showMe() {var myName = '张三';age = 20;console.log(`自我介绍一下,我叫${name},今年${age}`)}showMe()console.log(myName) //报错,未找到变量console.log(age) //20
在函数中使用var关键字进行显式申明的变量是做为局部变量,而没有用var关键字,使用直接赋值方式声明的是全局变量。
当我们使用访问一个没有声明的变量时,JS会报错。而当我们给一个没有声明的变量赋值时,JS不会报错,相反它会认为我们是要隐式申明一个全局变量,这一点一定要注意。
全局变量和局部变量的混用
//全局变量var a = "Hello"function test1() {var a; //局部变量console.log(a) //输出undefineda = "World" //局部变量console.log(a) //输出World}function test2() {console.log(a) //全局变量,输出Helloa = "World" //全局变量console.log(a) //输出World}function test3() {console.log(a) //局部变量,输出undefinedvar a = "World" //局部变量console.log(a) //输出World}test1()test2()test3()
上面代码中,函数test1 和 test2 好理解,函数test3 理解困难。继续往下看。。。
变量提升
所有变量的声明语句会被提升到当前变量作用域的顶部。先声明但未进行初始化。
JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升。
console.log(a) //报错console.log(b) //不会报错,输出undefinedvar b = 3//相当于var b;console.log(b)b = 3
函数内的变量也会提升到当前作用域的顶部
var a = "Hello"function test3() {console.log(a) //局部变量,输出undefinedvar a = "World" //局部变量console.log(a) //输出World}//相当于function test3() {var a;console.log(a) //局部变量,输出undefineda = "World" //局部变量console.log(a) //输出World}
总结
使用var声明的变量,作用域不容易搞懂,还存在变量提升的弊端,坑非常多。