JavaScript 范围


目录

    显示目录

范围决定变量的可访问性(可见性)。

JavaScript 有 3 种类型的作用域:

  • 块作用域

  • 功能范围

  • 全球范围

块范围

在 ES6(2015)之前,JavaScript 只有全局作用域函数作用域

ES6 引入了两个重要的新 JavaScript 关键字:letconst

这两个关键字在 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 具有函数作用域:每个函数都会创建一个新的作用域。

函数内部定义的变量无法从外部访问(可见) 功能。

使用 varlet 声明的变量 和 const 是 在函数内部声明时非常相似。

它们都有功能范围

function myFunction() {
    var carName = "Volvo";   
  // Function Scope
}
function myFunction() {
    let carName = "Volvo";   // 
  Function Scope
}
function myFunction() {
    const carName = "Volvo";   // 
  Function Scope
}

全局 JavaScript 变量

在函数外部声明的变量将变为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 程序中的任何位置访问全局变量。

使用 varlet 声明的变量 和 const 是 在块外声明时非常相似。

它们都有全球范围

var x = 2;       
  // Global scope
 let x = 2;       // 
  Global scope
 const x = 2;       // 
  Global scope

JavaScript 变量

在 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。

您将在本教程的后续章节中了解有关如何使用严格模式的更多信息。

在“严格模式”中,未声明的变量不会自动成为全局变量。


HTML 中的全局变量

对于 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 变量的生命周期

JavaScript 变量的生命周期从声明时开始。

函数(局部)变量在函数完成时被删除。

在网络浏览器中,关闭浏览器时全局变量将被删除 窗口(或选项卡)。


函数参数

函数参数(参数)在函数内部充当局部变量。