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

JavaScript教程10个月前发布 admin
1,448 0

在上节中,我们学习了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 变量的工作原理有了一个很好的了解。

© 版权声明

相关文章

暂无评论

暂无评论...