【JavaScript 教程】第二章基础知识02—JavaScript 变量

在上节中，我们学习了JavaScript的语法，错过的小伙伴可以点击文章《【JavaScript 教程】第二章基础知识01—JavaScript 语法》进行学习。

那么，在今天的内容中，我们将一起来学习 JavaScript 变量以及如何在 JavaScript 中声明变量。

JavaScript 变量是松散类型，也就是说，变量可以保存任何类型数据的值。变量只是值的命名占位符。

使用var关键字声明JavaScript变量

要声明变量，请使用var关键字后跟变量名称，如下所示：

var message;

变量名可以是任何有效的标识符。该message变量声明，并举行特别值undefined。

声明变量后，您可以为变量分配一个字符串，如下所示：

message = “Hello”;

要同时声明变量并初始化它，请使用以下语法：

var variableName = value;

例如，以下语句声明message变量并为其赋值”Hello”

var message = “Hello”;

您可以使用一个语句声明两个或多个变量，每个变量声明用逗号 ( ,)分隔，如下所示：

var message = “Hello”,
counter = 100;

如前所述，您可以在message变量中存储一个数字，如下例所示，但不推荐这样做。

message = 100;

未定义与未声明的变量

区分未定义和未声明的变量很重要。

未定义变量是已声明的变量。因为我们没有给它赋值，所以变量使用了undefined作为它的初始值。
相反，未声明的变量就是尚未声明的变量。

请参阅以下示例：

var message;

console.log(message); // undefined
console.log(counter); // ReferenceError: counter is not defined

在此示例中，message变量已声明但未初始化，因此其值为undefined，而counter变量尚未声明，因此，访问它会导致ReferenceError。

全局和局部变量

在 JavaScript 中，所有变量都存在于一个范围内，该范围决定了变量的生命周期以及代码的哪一部分可以访问它们。

JavaScript 主要有全局作用域和函数作用域。ES6 引入了一个新的作用域，称为块作用域。

如果在函数中声明一个变量，JavaScript 会将变量添加到函数作用域中。如果您在函数外部声明变量，JavaScript 会将其添加到全局作用域。

在 JavaScript 中，您可以按如下方式定义一个函数：

function functionName() {
// logic
}

并使用以下语法调用该函数：

functionName();

您将在函数教程中更详细地了解函数。

以下示例定义了一个名为say的函数，该函数具有一个名为message的局部变量。

function say() {
var message = “Hi”;
return message;
}

该message变量是一个局部变量。换句话说，它只存在于函数内部。

如果您尝试访问message函数的外部，如下面的示例所示，您将得到 a，ReferenceError因为该message变量未定义：

function say() {
var message = ‘Hi’;
}
console.log(message); // ReferenceError

可变阴影

请参阅以下示例：

// global variable
var message = “Hello”;
function say() {
// local variable
var message = ‘Hi’;
console.log(message); // which message?
}
say();// Hi
console.log(message); // Hello

在这个例子中，我们有两个共享相同名称的变量：message。 第一个message变量是全局变量，而第二个变量是局部变量。

在say()函数内部，全局消息变量被隐藏。它不能在say()函数内部访问，但可以在函数外部访问。这称为可变阴影。

访问函数内部的全局变量
请参阅以下示例：

// global variable
var message = “Hello”;
function say() {
// local variable
message = ‘Hi’;
console.log(message); // which message?
}
say();// Hi
console.log(message); // Hi

在这个例子中，我们定义了一个名为message的全局变量。在say()函数中，我们通过message省略var关键字来引用全局变量，并将其值更改为字符串 Hi。

尽管可以在函数内部引用全局变量，但不建议这样做。这是因为全局变量很难维护并且可能会引起很多混乱。

非严格模式

下面的示例定义了一个函数并声明了一个变量message。但是，var不使用关键字。

function say() {
message = ‘Hi’; // what?
console.log(message);
}
say(); // Hi
console.log(message); // Hi

当您执行脚本时，它会在输出Hi中输出两次字符串。

因为当我们调用say()函数时，JavaScript 引擎会查找message在函数作用域内命名的变量。

结果，它找不到任何使用该名称声明的变量，因此它会进入下一个直接作用域，在这种情况下是全局作用域，并询问message是否已声明该变量。

因为 JavaScript 引擎找不到任何命名的全局变量，所以message它创建了一个具有该名称的新变量并将其添加到全局范围。

严格模式

为了避免由于省略var关键字而在函数内部意外创建全局变量，您可以通过使用”use strict”;严格模式在 JavaScript 文件（或函数）的开头添加来，如下所示：

“use strict”;

function say() {
message = ‘Hi’; // ReferenceError
console.log(message);
}
say(); // Hi
console.log(message); // Hi

从现在开始，您应该始终在 JavaScript 代码中使用严格模式来消除一些 JavaScript 静默错误并使您的代码运行得更快。

JavaScript 变量提升

在执行 JavaScript 代码时，JavaScript 引擎会经历两个阶段：

• 解析
• 执行

在解析阶段，如果变量是全局变量，JavaScript 引擎会将所有变量声明移至文件顶部，如果变量在函数中声明，则移至函数顶部。

在执行阶段，JavaScript 引擎为变量赋值并执行代码。

提升是一种机制，JavaScript 引擎将所有变量声明移动到其作用域的顶部，无论是函数作用域还是全局作用域。

如果使用var关键字声明变量，则该变量会被提升到其封闭作用域的顶部，无论是全局作用域还是函数作用域。

因此，如果您在声明之前访问变量，则该变量的计算结果为undefined。

请参阅以下示例：

console.log(message); // undefined
var message;

JavaScript 引擎将message变量的声明移到顶部，因此上面的代码等效于以下内容：

var message;
console.log(message); // undefined

如果没有提升，你会得到一个ReferenceError，因为你引用了一个未定义的变量。

看另一个例子：

console.log(counter);
var counter = 100;

JavaScript 引擎仅将变量的声明移至顶部。但是，它保持变量的初始分配保持不变。因此，上面的代码等价于下面的代码：

var counter;
console.log(counter); // undefined
counter = 100;

提升使用冗余var声明而没有任何惩罚：

var counter;
var counter;
counter = 1;
console.log(counter); // 1

使用let和const关键字

从 ES6 开始，您可以使用let关键字来声明一个或多个变量。该let 关键字是类似的var关键字。但是，使用let关键字声明的变量是块范围的，而不是函数或全局范围的var关键字。

JavaScript 中的块用花括号 ( { } ) 表示。例如，if…else, do…while, 或forloop 语句创建一个块。

下面的示例tmp在由花括号包围的块中声明变量{}。

该tmp变量只存在该块的内部。因此，如果您在块外引用它，您将得到一个ReferenceError.

var a = 20, b = 10;
{
let tmp = a;
a = b;
b = tmp;
}
console.log(tmp); // ReferenceError

该const关键字的工作方式类似于let关键字，但你声明变量，必须立即用值初始化，并且该值不能改变之后。

const pi= 3.14;
pi = 3.141; // TypeError: `code` is read-only

现在，您应该对 JavaScript 变量的工作原理有了一个很好的了解。