Tiefes Verständnis von Variablen, Umfang und Heben in JavaScript

Variablen sind ein grundlegender Bestandteil vieler Programmiersprachen und das erste und wichtigste Konzept, das Anfänger lernen müssen. In JavaScript gibt es viele verschiedene Variableneigenschaften sowie einige Regeln, die bei der Benennung von Variablen befolgt werden müssen. In JavaScript werden drei Schlüsselwörter zum Deklarieren von Variablen verwendet – var, let und const –, die sich jeweils unterschiedlich auf die Art und Weise auswirken, wie der Code die Variable interpretiert.

Dieses Tutorial stellt vor, was Variablen sind, wie man sie deklariert und benennt, und untersucht weiter die Unterschiede zwischen var, let und const. Wir werden auch die Auswirkungen des Hebens und die Bedeutung globaler und lokaler Bereiche auf das Verhalten von Variablen untersuchen. [Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

Variablen verstehen

Eine Variable ist ein benannter Container, der zum Speichern von Werten verwendet wird. Eine Information, auf die wir möglicherweise mehrmals verweisen, kann zur späteren Verwendung oder Änderung in einer Variablen gespeichert werden. In JavaScript kann der in einer Variablen enthaltene Wert ein beliebiger JavaScript-Datentyp sein, einschließlich Zahlen, Zeichenfolgen oder Objekte.

Vor der Sprachspezifikation ECMAScript 2015 (ES6), auf der das heutige JavaScript basiert, gab es nur eine Möglichkeit, Variablen zu deklarieren – mit dem Schlüsselwort var. Daher verwenden die meisten älteren Code- und Lernressourcen nur var für Variablen. Wir werden den Unterschied zwischen den Schlüsselwörtern var, let und const in einem separaten Abschnitt weiter unten besprechen.

Wir können var verwenden, um das Konzept der Variablen selbst zu demonstrieren. Im folgenden Beispiel deklarieren wir eine Variable und weisen ihr einen Wert zu.

// Assign the string value Sammy to the username identifier
var username = "sammy_shark";

Diese Anweisung besteht aus den folgenden Teilen:

• Verwenden Sie das Schlüsselwort var, um Variablen zu deklarieren

• Variablenname (oder Bezeichnersymbol), Benutzername

• Zuweisungsvorgang, dargestellt durch = Syntax

• zugewiesener Wert „sammy_shark“

Jetzt können wir den Benutzernamen in unserem Code verwenden. JavaScript merkt sich, dass der Benutzername den Zeichenfolgenwert sammy_shark darstellt.

// Check if variable is equal to value
if (username === "sammy_shark") {
  console.log(true);
  }

Ausgabe:

true

Wie bereits erwähnt, können Variablen zur Darstellung jedes JavaScript-Datentyps verwendet werden. In diesem Beispiel deklarieren wir Variablen mit Zeichenfolgen-, Zahlen-, Objekt-, booleschen und Nullwerten.

// Assignment of various variables
var name = "Sammy";
var spartans = 300;
var kingdoms = [ "mammals", "birds", "fish" ];
var poem = { roses: "red", violets: "blue" }; 
var success = true;
var nothing = null;

Mit console.log können wir die in einer bestimmten Variablen enthaltenen Werte sehen.

// Send spartans variable to the console
console.log(spartans);

Ausgabe: 300

Variablen speichern Daten im Speicher, auf die später zugegriffen und diese geändert werden können. Variablen können auch neu zugewiesen und mit einem neuen Wert versehen werden. Das folgende vereinfachte Beispiel zeigt, wie man ein Passwort in einer Variablen speichert und diese dann aktualisiert.

//为password变量赋值
var password = "hunter2";
//用一个新值重新分配变量值
password = "hunter3";
console.log(password);

Ausgabe:

'hunter3'

In einem echten Programm würde das Passwort höchstwahrscheinlich sicher in der Datenbank gespeichert. Dieses Beispiel veranschaulicht jedoch eine Situation, in der wir möglicherweise den Wert einer Variablen aktualisieren müssen. Der Wert des Passworts war „hunter2“, aber wir haben ihn „hunter3“ zugewiesen, was JavaScript von diesem Zeitpunkt an erkennt.

Benannte Variablen

Variablennamen werden in JavaScript als Bezeichner bezeichnet. Wir haben einige Regeln für die Benennung von Bezeichnern beim Verständnis der JavaScript-Syntax und Codestruktur besprochen, die im Folgenden zusammengefasst sind:

• Variablennamen können nur aus Buchstaben (a-z), Zahlen (0-9) und dem Dollar bestehen Zeichen ($) und Unterstrich (_) bilden

• Variablennamen dürfen keine Leerzeichen (Tabs oder Leerzeichen) enthalten

• Zahlen dürfen nicht sein Name einer Variablen, die mit

• beginnt. Reservierte Schlüsselwörter können nicht als Namen von Variablen verwendet werden.

• Variablennamen unterscheiden zwischen Groß- und Kleinschreibung.

JavaScript hat auch die Angewohnheit, camelCase (manchmal auch als CamelCase bezeichnet) in den Namen von Funktionen und Variablen zu verwenden, die mit var oder let deklariert wurden. Dabei wird das erste Wort kleingeschrieben und dann der erste Buchstabe jedes weiteren Wortes großgeschrieben, ohne Leerzeichen dazwischen. Mit einigen Ausnahmen folgen die meisten nicht konstanten Variablen dieser Konvention. Die Namen von Konstantenvariablen, die mit dem Schlüsselwort const deklariert werden, werden normalerweise in Großbuchstaben geschrieben.

Das scheint eine Menge Regeln zu sein, die es zu lernen gilt, aber es wird bald zur Selbstverständlichkeit, gültige und reguläre Variablennamen zu schreiben.

Unterschied zwischen var, let und const

JavaScript verfügt über drei verschiedene Schlüsselwörter zum Deklarieren von Variablen, was der Sprache zusätzliche Komplexität verleiht. Der Unterschied zwischen den dreien basiert auf Umfang, Beförderung und Neuzuweisung.

关键字	范围	变量提升	可以重新分配	可以重新定义
var	功能范围	Yes	Yes	Yes
let	阻止范围	No	Yes	No
const	阻止范围	No	No	No

您可能想知道应该在自己的程序中使用这三种方法中的哪一种。一个普遍接受的做法是尽可能多地使用const，并在循环和重新分配的情况下使用let。通常，在处理遗留代码之外可以避免var。

变量作用域

JavaScript中的作用域是指代码的当前上下文，它决定了变量对JavaScript的可访问性。范围的两种类型是局部的和全局的:

• 全局变量是在块之外声明的变量

• 局部变量是在块内声明的变量

在下面的示例中，我们将创建一个全局变量。

//初始化一个全局变量
var creature = "wolf";

我们知道变量可以重新分配。使用局部作用域，我们实际上可以创建与外部作用域中的变量同名的新变量，而无需更改或重新分配原始值。

在下面的示例中，我们将创建一个全局species变量。函数内部是一个具有相同名称的局部变量。通过将它们发送到控制台，我们可以看到变量的值如何根据范围而不同，并且原始值不会更改。

//初始化一个全局变量
var species = "human";
function transform() {
//初始化一个局部的、函数作用域的变量
  var species = "werewolf";
  console.log(species);
}
//记录全局和局部变量
console.log(species);
transform();
console.log(species);

输出：

human
werewolf
human

在本例中，局部变量是函数作用域的。使用var关键字声明的变量总是函数作用域，这意味着它们将函数识别为具有独立作用域。因此，这个局部作用域的变量不能从全局作用域访问。

然而，新的关键字let和const是块范围的。这意味着从任何类型的块(包括函数块、if语句、for和while循环)创建一个新的本地范围。

为了说明函数作用域变量和块作用域变量之间的区别，我们将使用let在if块中分配一个新变量。

var fullMoon = true;
//初始化一个全局变量
let species = "human";
if (fullMoon) { 
//初始化一个块范围的变量
  let species = "werewolf";
  console.log(`It is a full moon. Lupin is currently a ${species}.`);
}
console.log(`It is not a full moon. Lupin is currently a ${species}.`);

输出：

It is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a human.

在此示例中，species变量具有一个值global（human），另一个值local（werewolf）。var但是，如果我们使用，则会有不同的结果。

//使用var初始化一个变量
var species = "human";
if (fullMoon) {  
//尝试在一个块中创建一个新变量
  var species = "werewolf";
  console.log(`It is a full moon. Lupin is currently a ${species}.`);
}

console.log(`It is not a full moon. Lupin is currently a ${species}.`);

输出：

It is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a werewolf.

在这个例子的结果中，全局变量和块范围的变量都以相同的值结束。这是因为您不是使用var创建一个新的本地变量，而是在相同的范围内重新分配相同的变量。var不能识别是否属于不同的新范围。通常建议声明块范围的变量，因为它们生成的代码不太可能无意中覆盖变量值。

变量提升

到目前为止，在大多数示例中，我们已经使用var声明了一个变量，并使用一个值初始化了它。在声明和初始化之后，我们可以访问或重新分配变量。

如果我们试图在变量被声明和初始化之前使用它，它将返回undefined。

//在声明变量之前尝试使用它
console.log(x);
/ /变量赋值
var x = 100;

输出：

undefined

但是，如果省略var关键字，就不再声明变量，而是初始化它。它将返回一个ReferenceError并停止脚本的执行。

//在声明变量之前尝试使用它
console.log(x);
//没有var的变量赋值
x = 100;

输出：

ReferenceError: x is not defined

原因在于提升，这是JavaScript的一种行为，其中变量和函数声明被移到它们作用域的顶部。由于只挂起实际声明，而没有初始化，因此第一个示例中的值返回未定义的值。

为了更清楚地演示这个概念，下面是我们编写的代码以及JavaScript如何解释它。

// The code we wrote
console.log(x);
var x = 100;
// How JavaScript interpreted it
var x;
console.log(x);
x = 100;

JavaScript在执行脚本之前将x保存为内存作为变量。 由于它在定义之前仍然被调用，因此结果是未定义的而不是100.但是，它不会导致ReferenceError并停止脚本。

 尽管var关键字实际上并未更改var的位置，但这有助于表示提升的工作原理。 但是，这种行为可能会导致问题，因为编写此代码的程序员可能希望x的输出为true，而不是undefined。

在下一个例子中，我们还可以看到提升是如何导致不可预测的结果的:

//在全局范围内初始化x
var x = 100;
function hoist() {
//不应影响编码结果的条件
  if (false) {
      var x = 200;
  }
  console.log(x);
}

hoist();

输出：

undefined

在本例中，我们声明x全局为100。根据if语句，x可以更改为200，但是由于条件为false，所以它不应该影响x的值。

这种不可预测的行为可能会在程序中引起bug。由于let和const是块范围的，所以它们不会以这种方式提升，如下所示。

//在全局范围内初始化x
let x = true;function hoist() {
//在函数作用域中初始化x
 if (3 === 4) {
      let x = false;
  }
  console.log(x);
}

hoist();

输出：

true

变量的重复声明(这在var中是可能的)将在let和const中抛出一个错误。

//试图覆盖用var声明的变量
var x = 1;
var x = 2;

console.log(x);

输出：2

//试图覆盖用let声明的变量
let y = 1;
let y = 2;

console.log(y);

输出：

Uncaught SyntaxError: Identifier 'y' has already been declared

总之，使用var引入的变量有可能受到提升的影响，提升是JavaScript中的一种机制，其中变量声明被保存到内存中。这可能导致代码中出现未定义的变量。let和const的引入解决了这个问题，它在试图在声明变量之前使用该变量或多次声明该变量时抛出一个错误。

常量

许多编程语言都有常量，这些常量是不能修改或更改的值。在JavaScript中，const标识符是根据常量建模的，不能重新分配分配给const的值。

将所有const标识符都写成大写是常见的约定。这将它们与其他变量值区分开来。

在下面的示例中，我们使用const关键字将变量SPECIES初始化为常量。试图重新分配变量将导致错误。

//给const赋值
const SPECIES = "human"; 

//尝试重新分配值
SPECIES = "werewolf";

console.log(SPECIES);

输出：

Uncaught TypeError: Assignment to constant variable.

因为不能重新分配const值，所以需要同时声明和初始化它们，否则也会抛出错误。

//声明，但不初始化const
const TODO;

console.log(TODO);

输出：

Uncaught SyntaxError: Missing initializer in const declaration

不能在编程中更改的值称为不可变值，而可以更改的值是可变的。虽然const值不能重新分配，但是它们是可变的，因为可以修改用const声明的对象的属性。

//创建一个具有两个属性的CAR对象
const CAR = {
    color: "blue",
    price: 15000}
//修改CAR的属性
CAR.price = 20000;

console.log(CAR);

输出：

{ color: 'blue', price: 20000 }

常量非常有用，可以让将来的自己和其他程序员清楚地认识到，不应该重新分配预期的变量。如果您希望将来修改某个变量，那么您可能希望使用let来声明该变量。

本文来自 js教程 栏目，欢迎学习！

Das obige ist der detaillierte Inhalt vonTiefes Verständnis von Variablen, Umfang und Heben in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!