var的本质:
var a=3:声明一个变量a并给它赋值3;
a=3:并没有声明一个新的变量,只是往它的外层寻找变量名为a的变量,并给它赋值3。(假设外层都没有声明a,那么会找到window上的变量a)
接下来我们看几个例子:
1.t2()中的str没有用var声明,找到了它的外层t1()中的str
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str="ufo";
function t1() {
var str="china";
function t2() {
//此处没有用var声明一个新的str变量,而是往它的外层寻找是否有变量名为str的变量,给它赋值。
// 这里找到了t1()中的str,所以这两个str引用的是同一个变量
str="japan";
console.log("t2():"+str)
}
console.log("t1():"+str)//执行到这里的时候,t2()还没有被执行到
t2()
console.log("t1():"+str);//执行到这里的时候,t2()已经执行过
}
t1();
console.log("全局变量:"+str);//由于t2()修改的str是t1()中的str,所以全局中的str没有受到影响
</script>
</head>
<body>
</body>
</html>
运行结果:
2.将t1()中的 var str="china"注释掉,那么t2()就找到了最外层的全局变量str
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str="ufo";
function t1() {
//var str="china";
function t2() {
//此处没有用var声明一个新的str变量,而是往它的外层寻找是否有变量名为str的变量,给它赋值。
// 这里找到了全局变量中的str,所以这两个str引用的是同一个变量
str="japan";
console.log("t2():"+str)
}
console.log("全局变量:"+str)//f2()还没有执行到
t2()
}
t1();
console.log("全局变量:"+str);//t2()修改了全局变量中的str
</script>
</head>
<body>
</body>
</html>
运行结果:
3.把第一个例子t2()中的str="japan"用var来声明,那么它就不会去找外层的str,而是声明了一个新的变量,所以t1()中的str和全局变量str都不会受到影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str="ufo";
function t1() {
var str="china";
function t2() {
//此处用var声明一个新的str变量,并给它赋值。
// 所以这3个str都是不同的
var str="japan";
console.log("t2():"+str)
}
console.log("t1():"+str)//执行到这里的时候,t2()还没有被执行到
t2()
console.log("t1():"+str);//执行到这里的时候,t2()已经执行过
}
t1();
console.log("全局变量:"+str);//t2()并没有修改任何其他地方的str
</script>
</head>
<body>
</body>
</html>
运行结果:
window上定义的变量和全局变量的区别:
所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法,如:
var str="china" 可以用 window.str来访问结果也是"china"。那么两者定义的方式有什么区别呢?
window上的变量都是存在的,可以理解为都声明过,只是没有定义,如果访问它是undefined;但假如去访问一个没有声明过的变量,会报错。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str="china";
console.log(window.str)//打印出china
function t1() {
var str1="hello";
console.log(window.str1)//由于这里的str1不是全局变量,所以不会成为window的属性
}
t1()
console.log(window.str2);//undefined
console.log(str2);//会报错
</script>
</head>
<body>
</body>
</html>
运行结果: