Einführung in Beispiele für JavaScript-Variablenbereiche

In diesem Artikel wird hauptsächlich der Variablenbereich JavaScript vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

In JavaScript haben mit var deklarierte Variablen tatsächlich einen Gültigkeitsbereich.

Wenn eine Variable innerhalb des Funktionskörpers deklariert wird, ist der Geltungsbereich der -Variable der gesamte Funktionskörper und die Variable kann außerhalb des Funktionskörpers nicht referenziert werden:

'use strict';

function foo() {
  var x = 1;
  x = x + 1;
}

x = x + 2; // ReferenceError! 无法在函数体外引用变量x

Deklarieren zwei verschiedene Funktionen dieselbe Variable, dann funktioniert die Variable nur innerhalb des Rumpfes der jeweiligen Funktion. Mit anderen Worten, Variablen mit demselben Namen innerhalb verschiedener Funktionen sind unabhängig voneinander und beeinflussen sich nicht gegenseitig:

'use strict';

function foo() {
  var x = 1;
  x = x + 1;
}

function bar() {
  var x = 'A';
  x = x + 'B';
}

Da JavaScript-Funktionen dies können verschachtelt, zu diesem Zeitpunkt können Interne Funktionen auf Variablen zugreifen, die durch externe Funktionen definiert sind, aber nicht umgekehrt:

'use strict';

function foo() {
  var x = 1;
  function bar() {
    var y = x + 1; // bar可以访问foo的变量x!
  }
  var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
}

Wenn die Variablennamen interner und externer Funktionen Was soll ich tun, wenn ich denselben Namen habe?

'use strict';

function foo() {
  var x = 1;
  function bar() {
    var x = 'A';
    alert('x in bar() = ' + x); // 'A'
  }
  alert('x in foo() = ' + x); // 1
  bar();
}

Dies zeigt, dass JavaScript-Funktionen bei der Suche nach Variablen von ihrer eigenen Funktionsdefinition ausgehen und von „innen“ nach „außen“ suchen. Wenn die interne Funktion eine Variable mit demselben Namen wie die externe Funktion definiert, „schirmen“ die Variablen der internen Funktion die Variablen der externen Funktion ab.

Variablenheraufstufung

JavaScript-Funktionsdefinition hat eine Besonderheit: Sie scannt zunächst die Anweisungen des gesamten Funktionskörpers und „befördert“ alle deklarierten Variablen nach oben der Funktion:

'use strict';

function foo() {
  var x = 'Hello, ' + y;
  alert(x);
  var y = 'Bob';
}

foo();

Obwohl sie sich im strikten Modus befindet, meldet die Anweisung var x = 'Hello, ' + y; keinen Fehler, da die Variable y deklariert ist später. Aber alert zeigt Hello, undefined an, was darauf hinweist, dass der Wert der Variablen y undefined ist. Dies liegt genau daran, dass die JavaScript-Engine automatisch die Deklaration der Variablen y fördert, nicht jedoch die Zuweisung der Variablen y.

Für die obige foo()-Funktion entspricht der von der JavaScript-Engine angezeigte Code:

function foo() {
  var y; // 提升变量y的申明
  var x = 'Hello, ' + y;
  alert(x);
  y = 'Bob';
}

Fällig zu diesem Verhalten von JavaScript Eine seltsame „Funktion“. Wenn wir Variablen innerhalb einer Funktion definieren, halten Sie sich bitte strikt an die Regel „Deklarieren Sie zuerst alle Variablen innerhalb der Funktion“. Der gebräuchlichste Ansatz besteht darin, ein zu verwenden, um alle innerhalb der Funktion verwendeten Variablen zu deklarieren: var

function foo() {
  var
    x = 1, // x初始化为1
    y = x + 1, // y初始化为2
    z, i; // z和i为undefined
  // 其他语句:
  for (i=0; i<100; i++) {
    ...
  }
}

globaler Bereich

Variablen, die in keiner Funktion definiert sind, haben einen globalen Gültigkeitsbereich. Tatsächlich verfügt JavaScript standardmäßig über ein globales Objekt

, und Variablen im globalen Bereich sind tatsächlich an eine Eigenschaft von window gebunden: window

'use strict';

var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'

Daher ist der direkte Zugriff auf die globale Variable

genau dasselbe wie der Zugriff auf course. window.course

Sie haben vielleicht vermutet, dass eine im Variablenmodus definierte Funktion

tatsächlich eine globale Variable ist, da es zwei Möglichkeiten gibt, eine Funktion zu definieren. Daher ist die Definition der Funktion der obersten Ebene Wird auch als globale Variable betrachtet und an das var foo = function () {}-Objekt gebunden: window

'use strict';

function foo() {
  alert('foo');
}

foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用

Eine weitere gewagte Vermutung ist, dass die Funktion „alert()“ von uns aufgerufen wird direkt jedes Mal ist tatsächlich window Eine Variable:

'use strict';

window.alert('调用window.alert()');
// 把alert保存到另一个变量:
var old_alert = window.alert;
// 给alert赋一个新函数:
window.alert = function () {}

// 恢复alert:
window.alert = old_alert;
alert('又可以用alert()了!');

Dies zeigt, dass JavaScript tatsächlich nur einen globalen Bereich hat. Wenn eine Variable (Funktion wird auch als Variable betrachtet) im aktuellen

Funktionsbereich nicht gefunden wird, wird die Suche nach oben fortgesetzt. Wenn sie schließlich nicht im globalen Bereich gefunden wird, wird ein ReferenceError angezeigt gemeldet.

Namespace

Globale Variablen werden an

gebunden, wenn verschiedene JavaScript-Dateien dieselbe globale Variable verwenden oder die oberste Ebene definieren Funktionen mit demselben Namen führen zu Namenskonflikten und sind schwer zu finden. window

Eine Möglichkeit, Konflikte zu reduzieren, besteht darin, alle Ihre Variablen und Funktionen an eine globale Variable zu binden. Zum Beispiel:

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
  return 'foo';
};

Fügen Sie Ihren gesamten Code in den eindeutigen Namespace

ein, wodurch die Möglichkeit globaler Variablenkonflikte erheblich verringert wird. MYAPP

Viele bekannte JavaScript-Bibliotheken tun dies: jQuery, YUI, Unterstrich usw.

Lokaler Bereich

Da sich der Variablenbereich von JavaScript tatsächlich innerhalb der Funktion befindet, befinden wir uns in Anweisungsblöcken wie

-Schleifen. Es können keine Variablen mit lokalem Gültigkeitsbereich definiert werden: for

'use strict';

function foo() {
  for (var i=0; i<100; i++) {
    //
  }
  i += 100; // 仍然可以引用变量i
}

Um den Gültigkeitsbereich auf Blockebene zu lösen, hat ES6 ein neues Schlüsselwort let eingeführt, das durch ersetzt wird let var kann eine Variable auf Blockebene deklarieren:

'use strict';

function foo() {
  var sum = 0;
  for (let i=0; i<100; i++) {
    sum += i;
  }
  i += 1; // SyntaxError
}

Konstante

由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：

var PI = 3.14;

ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域：

'use strict';

const PI = 3.14;
PI = 3; // 某些浏览器不报错，但是无效果！
PI; // 3.14

Das obige ist der detaillierte Inhalt vonEinführung in Beispiele für JavaScript-Variablenbereiche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!