Heim > Web-Frontend > js-Tutorial > Hauptteil

ECMAScript6-Bereich auf Blockebene und neue Variablendeklaration (let)_javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:55:31
Original
984 Leute haben es durchsucht

Viele Sprachen haben einen Gültigkeitsbereich auf Blockebene, JS jedoch nicht. Es verwendet var zum Deklarieren von Variablen und Funktionen zum Teilen des Gültigkeitsbereichs. Die geschweiften Klammern „{}“ können den Gültigkeitsbereich von var nicht einschränken. Mit var deklarierte Variablen bewirken das Heben von Variablen (Deklarations-Heben).

In ES6 wurde ein let hinzugefügt, das in {}, if oder for deklariert werden kann. Die Verwendung ist die gleiche wie bei var, der Geltungsbereich ist jedoch auf die Blockebene beschränkt und es gibt keine Variablenheraufstufung für mit let deklarierte Variablen.

Beispiel 1: Bereich auf Blockebene, wenn

function getVal(boo) {
  if (boo) {
    var val = 'red'
    // ...
    return val
  } else {
    // 这里可以访问 val
    return null
  }
  // 这里也可以访问 val
}
Nach dem Login kopieren

Die Variable val wird im if-Block deklariert, aber auf val kann außerhalb des else-Blocks und if zugegriffen werden.

Ersetzen Sie var durch let und es sieht so aus

function getVal(boo) {
  if (boo) {
    let val = 'red'
    // ...
    return val
  } else {
    // 这里访问不到 val
    return null
  }
  // 这里也访问不到 val
} 

Nach dem Login kopieren

Beispiel 2: Bereich auf Blockebene für

function func(arr) {
  for (var i = 0; i < arr.length; i++) {
    // i ...
  }
  // 这里也可以访问到i
}
Nach dem Login kopieren

Die Variable i wird im for-Block deklariert, kann aber auch außerhalb des for-Blocks aufgerufen werden.

Ersetzen Sie var durch let, und ich kann für

nicht von außen auf mich zugreifen
function func(arr) {
  for (let i = 0; i < arr.length; i++) {
    // i ...
  }
  // 这里访问不到i
}

Nach dem Login kopieren

Beispiel 3: Variablenförderung (zuerst verwenden, später deklarieren)

function func() {
  // val先使用后声明,不报错
  alert(val) // undefined
  var val;
}
Nach dem Login kopieren

Die Variable val wird zuerst verwendet und dann deklariert. Sie gibt undefiniert aus und meldet keinen Fehler.

Ersetzen Sie var durch let und es wird ein Fehler gemeldet

function func() {
  // val先使用后声明,报语法错
  alert(val)
  let val;
} 

Nach dem Login kopieren

Beispiel 4: Variable Beförderung (zuerst beurteilen und dann deklarieren)

function func() {
  if (typeof val == 'undefined') {
    // ...
  }
  var val = ''
}
Nach dem Login kopieren

Wenn Sie die Art des Urteils verwenden, können Sie es auch vor die var-Anweisung setzen

Aber wenn Sie var durch let ersetzen, wird bei if

ein Syntaxfehler gemeldet
function func() {
  if (typeof val == 'undefined') {
    // ...
  }
  let val = '';
}
Nach dem Login kopieren

ES6 legt fest, dass, wenn let in einem Codeblock vorhanden ist, dieser Block von Anfang an einen geschlossenen Bereich bildet. Bei Verwendung vor der Deklaration wird ein Fehler gemeldet. Das heißt, innerhalb eines Codeblocks sind Variablen, die vor der Deklaration von let verwendet wurden, nicht verfügbar. In der Grammatik gibt es einen Begriff namens „temporal dead zone“, kurz TDZ. Natürlich erscheint TDZ nicht in der ES-Spezifikation, es wird nur zur visuellen Beschreibung verwendet.

Hinweise zur Vermietung

1. Wiederholte Erklärungen sind nicht zulässig

// var和let重复声明
var name = 'Jack';
let name = 'John';
 
// 两个let重复声明
let age = 24;
let age = 30;
Nach dem Login kopieren

Syntaxfehler bei der Ausführung

2. Mit let kann die Selbstausführung anonymer Funktionen eliminiert werden

// 匿名函数写法
(function () {
 var jQuery = function() {};
 // ...
 window.$ = jQuery
})();
 
// 块级作用域写法
{
 let jQuery = function() {};
 // ...
 window.$ = jQuery;
}
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage