- 定义变量时没有使用var声明,变量也能使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
dro = "我定义的dro";
console.log(dro);
</script>
</body>
</html>
但是这种方式存在着隐患:
- 下面函数中的变量污染了全局环境:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function show(){
dro = "find me"
}
show();
console.log(dro);
</script>
</body>
</html>
全局中并没有定义dro,但是实在控制台会输出函数中定义的dro.
- 如果函数是另一个文件中的,当我们并不了解其中定义了某个变量时(例子中为dro),自己再定义同一个输出也会出现污染问题:
1.js中的代码:
function show(){
dro = "我是1.js中定义的dro";
}
02_demo.html中的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="1.js"></script>
<script>
dro = "我是02_demo中定义的dro";
show();
console.log(dro);
</script>
</body>
</html>
运行02_demo.html,依旧显示引入文件中定义的变量dro: