范围决定变量的可访问性(可见性)。
JavaScript 有 3 种类型的作用域:
块作用域
功能范围
全球范围
在 ES6(2015)之前,JavaScript 只有全局作用域和函数作用域。
ES6 引入了两个重要的新 JavaScript 关键字:let
和 const
。
这两个关键字在 JavaScript 中提供块作用域。
无法访问在 { } 块内声明的变量 从块外:
{
let x = 2;
}
// x can NOT be used here
使用 var
关键字声明的变量不能具有块作用域。
可以从 { } 块内访问声明的变量 块外。
{
var x = 2;
}
// x CAN be used here
在 JavaScript 函数中声明的变量,变为 本地至 功能。
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p><b>carName</b> is undefined outside myFunction():</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
let carName = "Volvo";
document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML = typeof carName;
</script>
</body>
</html>
局部变量具有函数作用域:
它们只能从函数内部访问。
由于局部变量仅在其函数内部被识别,因此具有相同名称的变量可以在不同的函数中使用。
局部变量在函数启动时创建,并在函数完成时删除。
JavaScript 具有函数作用域:每个函数都会创建一个新的作用域。
函数内部定义的变量无法从外部访问(可见) 功能。
使用 var
、let
声明的变量 和 const
是 在函数内部声明时非常相似。
它们都有功能范围:
function myFunction() {
var carName = "Volvo";
// Function Scope
}
function myFunction() {
let carName = "Volvo"; //
Function Scope
}
function myFunction() {
const carName = "Volvo"; //
Function Scope
}
在函数外部声明的变量将变为GLOBAL。
let carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p>A GLOBAL variable can be accessed from any script or function.</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = "I can display " + carName;
}
</script>
</body>
</html>
全局变量具有全局范围:
网页上的所有脚本和函数都可以访问它。
全局声明的变量(在任何函数之外)具有 全球范围。
可以从 JavaScript 程序中的任何位置访问全局变量。
使用 var
、let
声明的变量 和 const
是 在块外声明时非常相似。
它们都有全球范围:
var x = 2;
// Global scope
let x = 2; //
Global scope
const x = 2; //
Global scope
在 JavaScript 中,对象和函数也是变量。
作用域决定了变量、对象和函数的可访问性 代码的不同部分。
如果给未声明的变量赋值,它将自动成为GLOBAL变量。
此代码示例将声明一个全局变量 carName
,即使 该值在函数内部分配。
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Variables</h2>
<p>If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable:</p>
<p id="demo"></p>
<script>
myFunction();
// code here can use carName as a global variable
document.getElementById("demo").innerHTML = "I can display " + carName;
function myFunction() {
carName = "Volvo";
}
</script>
</body>
</html>
所有现代浏览器都支持在“严格模式”下运行 JavaScript。
您将在本教程的后续章节中了解有关如何使用严格模式的更多信息。
在“严格模式”中,未声明的变量不会自动成为全局变量。
对于 JavaScript,全局范围是 JavaScript 环境。
在 HTML 中,全局范围是 window 对象。
使用 var
关键字定义的全局变量属于 window 对象:
var carName = "Volvo";
// code here
can use window.carName
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p>In HTML, global variables defined with <b>var</b>, will become window variables.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
// code here can use window.carName
document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>
</body>
</html>
使用 let
关键字定义的全局变量不属于 window 对象:
let carName = "Volvo";
// code here can not use window.carName
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Variables</h2>
<p>In HTML, global variables defined with <b>let</b>, will not become window variables.</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
// code here can not use window.carName
document.getElementById("demo").innerHTML = "I can not display " + window.carName;
</script>
</body>
</html>
除非您愿意,否则不要创建全局变量。
您的全局变量(或函数)可以覆盖窗口变量(或 函数)。
任何函数,包括窗口对象,都可以覆盖你的全局函数 变量和函数。
JavaScript 变量的生命周期从声明时开始。
函数(局部)变量在函数完成时被删除。
在网络浏览器中,关闭浏览器时全局变量将被删除 窗口(或选项卡)。
函数参数(参数)在函数内部充当局部变量。