作用域指的是您有权访问的变量集合。
JavaScript 函数作用域
在 JavaScript 中有两种作用域类型:
- 局部作用域
- 全局作用域
JavaScript 拥有函数作用域:每个函数创建一个新的作用域。
作用域决定了这些变量的可访问性(可见性)。
函数内部定义的变量从函数外部是不可访问的(不可见的)。
局部 JavaScript 变量
在 JavaScript 函数中声明的变量,会成为函数的局部变量。
局部变量的作用域是局部的:只能在函数内部访问它们。
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
var carName = "porsche";
document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML = typeof carName;
</script>
</body>
</html>
//string porsche
//undefined
全局 JavaScript 变量
函数之外声明的变量,会成为全局变量。
全局变量的作用域是全局的:网页的所有脚本和函数都能够访问它。
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
var carName = "porsche";
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = "Nice to meet you" + carName;
}
</script>
</body>
</html>
//Nice to meet youporsche
JavaScript 变量
在 JavaScript 中,对象和函数也是变量。
作用域决定了从代码不同部分对变量、对象和函数的可访问性。
自动全局
如果您为尚未声明的变量赋值,此变量会自动成为全局变量。
这段代码将声明一个全局变量 carName,即使在函数内进行了赋值。
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = "我可以显示 " + carName;
function myFunction() {
carName = "porsche";
}
</script>
</body>
</html>
//我可以显示 porsche
HTML 中的全局变量
通过 JavaScript,全局作用域形成了完整的 JavaScript 环境。
在 HTML 中,全局作用域是 window。所有全局变量均属于 window 对象。
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var carName = "porsche";
// code here can use window.carName
document.getElementById("demo").innerHTML = "我可以显示 " + window.carName;
</script>
</body>
</html>
//我可以显示 porsche
警告
除非有意为之,否则请勿创建全局变量。
您的全局变量(或函数)能够覆盖 window 变量(或函数)。
任何函数,包括 window 对象,能够覆盖您的全局变量和函数。
JavaScript 变量的有效期
JavaScript 变量的有效期始于其被创建时。
局部变量会在函数完成时被删除。
全局变量会在您关闭页面时被删除。
函数参数
函数参数也是函数内的局部变量。