变量的作用域(scope)是程序源代码中定义这个变量的区域。
全局变量拥有全局作用域,在js代码的任何地方都是有定义的;
而在函数内声明的变量只在函数体内有定义,它是局部变量,作用域是局部性的;
函数的参数也是局部变量,他们只在函数体内有定义。
在函数体内,局部变量的优先级高于同名的全局变量,如果在函数内声明的一个局部变量或者函数参数中带有的变量与全局变量同名时,那么全局变量就会被局部变量所遮盖。
var str = "global var";
function test() {
var str = "local var";
console.log("str在函数体内的值 = " + str);
}
test();
console.log("str在函数体外的值 = " + str);
运行结果:
str在函数体内的值 = local var
str在函数体外的值 = global var
上一篇文章说过,局部变量使用前必须声明,否则会出现意想不到的bug,为什么?
尽管全局作用域编写代码时,可以不写var语句,但局部变量声明时必须使用var语句。(其实还有let,确切的说就是要先声明。)
看下面示例就知道了。
str = "global var";
function test() {
str = "local var";
console.log("str在函数体内的值 = " + str);
}
test();
console.log("str在函数体外的值 = " + str);运行结果:
str在函数体内的值 = local var
str在函数体外的值 = local var
可以看到,如果局部变量在没有使用var声明的时候, 它被认同为全部变量了,从而修改了同名全局变量的值。
js的函数定义是可以嵌套的,由于每个函数都有它的作用域,因此会出现几个局部作用域嵌套的情况。
看下面示例:
var str = "global var";
function test() {
var str = "local var";
console.log("str在函数test()内的值 = " + str); // str在函数test()内的值 = local var
test1();
function testInner() {
var str = "testInner var";
console.log("str在函数testInner()内的值 = " + str); // str在函数testInner()内的值 = testInner var
return str;
}
return testInner();
}
function test1() {
console.log("str在函数test1()内的值 = " + str); // str在函数test1()内的值 = global var
}
test();
console.log("str在函数体外的值 = " + str); // str在函数体外的值 = global var运行结果:
str在函数test()内的值 = local var
str在函数test1()内的值 = global var
str在函数testInner()内的值 = testInner var
str在函数体外的值 = global var
再看一个示例,我们在testInner()函数中不重新声明str变量
var str = "global var";
function test() {
var str = "local var";
console.log("str在函数test()内的值 = " + str); // str在函数test()内的值 = local var
test1();
function testInner() {
console.log("str在函数testInner()内的值 = " + str); // str在函数testInner()内的值 = local var
return str;
}
return testInner();
}
function test1() {
console.log("str在函数test1()内的值 = " + str); // str在函数test1()内的值 = global var
}
test();
console.log("str在函数体外的值 = " + str); // str在函数体外的值 = global var运行结果:
str在函数test()内的值 = local var
str在函数test1()内的值 = global var
str在函数testInner()内的值 = local var
str在函数体外的值 = global var