javascript ES 6にletコマンドの使用紹介が追加されました.
10858 ワード
letコマンド基本的な使い方
ES 6は、変数を宣言するためにletコマンドを追加しました.その使い方はvarに似ていますが、宣言された変数はletコマンドがあるコードブロック内でのみ有効です.
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1forループのカウンターは、letコマンドを使うのに適しています.
for (let i = 0; i < 10; i++) {}
console.log(i);
//ReferenceError: i is not defined下のコードはvarを使うと最後に10が出力されます.
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10letを使用すると、宣言した変数はブロックレベルのスコープ内でのみ有効で、最後に出力されるのは6です.
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6変数の昇格は存在しません.
letはvarのように「変数アップ」現象が発生しません.したがって、変数は宣言後に必ず使用されます.そうでないとエラーが発生します.
console.log(foo); // undefined
console.log(bar); // ReferenceError
var foo = 2;
let bar = 2;一時死地
ブロックレベルのスコープ内にletコマンドが存在する限り、その宣言した変数は「バインディング」(binding)という領域になり、外部の影響を受けなくなる.
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}ES 6は、ブロック内にletとconstコマンドが存在する場合、このブロックがこれらのコマンドに対して宣言する変数は、最初から閉鎖作用領域を形成することを明確に規定している.宣言する前にこれらの変数を使うと、エラーが発生します.
つまり、コードブロック内では、letコマンドを使用して変数を宣言する前に、この変数は使用できません.これは文法的には「一時的なデッドゾーン」と呼ばれています.
if (true) {
// TDZ
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}「一時死区」もtypeofが100%安全な操作ではないことを意味します.
typeof x; // ReferenceError
let x;比較として、もし変数が宣言されていないなら、typeofを使うと、逆にエラーが発生しません.
typeof undeclared_variable // "undefined"いくつかの「デッドゾーン」は比較的に隠れています.見つけにくいです.
function bar(x = y, y = 2) {
return [x, y];
}
bar(); //
function bar(x = 2, y = x) {
return [x, y];
}
bar(); // [2, 2]つまり、一時的なデッドゾーンの本質は、現在のスコープに入ると、使用する変数が既に存在しますが、取得できないのは、宣言変数の行のコードが現れるまで、その変数を取得して使用することができます.
繰り返し宣言は許可されません.
letは同じスコープ内で同じ変数を繰り返し宣言することができません.
//
function () {
let a = 10;
var a = 1;
}
//
function () {
let a = 10;
let a = 1;
}
function func(arg) {
let arg; //
}
function func(arg) {
{
let arg; //
}
}なぜブロックレベルのスコープが必要ですか?
ES 5はグローバルスコープと関数スコープのみで、ブロックレベルのスコープがないため、多くの不合理なシーンをもたらします.
第一のシーンでは、内層変数が外層変数をカバーする場合があります.
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = "hello world";
}
}
f(); // undefined
第二のシーンでは、計数するための循環変数が大域変数として漏洩されます.
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
ES 6のブロックレベルのスコープ
letは実際にJavaScriptのためにブロックレベルのスコープを追加しました.
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}ES 6は、ブロックレベルのスコープの任意のネストを許可する.
{{{{{let insane = 'Hello World'}}}}};
{{{{
{let insane = 'Hello World'}
console.log(insane); //
}}}};
{{{{
let insane = 'Hello World';
{let insane = 'Hello World'}
}}}};
// IIFE
(function () {
var tmp = ...;
...
}());
//
{
let tmp = ...;
...
}関数がブロックレベルのスコープ内で宣言できるかどうかは、かなり紛らわしい問題です.
ES 5は、関数が最上位のスコープと関数スコープの中でしか宣言できないと規定しています.ブロックレベルのスコープ宣言ではできません.
//
if (true) {
function f() {}
}
//
try {
function f() {}
} catch(e) {
}
ただし、ブラウザはこの規定を遵守していません.従来のコードに対応するために、ブロックレベルのスコープ内の宣言関数をサポートするために、上記の2つの状況は実際に実行できます.エラーは発生しません.ただし、「厳格モード」ではエラーが発生します.
// ES5
'use strict';
if (true) {
function f() {}
}
//
// ES6
'use strict';
if (true) {
function f() {}
}
//
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// f
function f() { console.log('I am inside!'); }
}
f();
}());
// ES5
function f() { console.log('I am outside!'); }
(function () {
function f() { console.log('I am inside!'); }
if (false) {
}
f();
}());
// ES6
function f() { console.log('I am outside!'); }
(function () {
f();
}());ブロックレベルのスコープ内で関数を宣言することができます.関数宣言はvarに似ています.グローバルスコープまたは関数スコープの頭にアップグレードされます.また、関数宣言は、あるブロックレベルのスコープの頭にもアップグレードされます.上の3つの規則はES 6のブラウザだけに有効です.他の環境の実装は守られていませんか?それともブロックレベルのスコープの関数宣言をlとしてください.セット処理
前のコードはChrome環境下で実行されます.
// ES6
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// f
function f() { console.log('I am inside!'); }
}
f();
}());
// Uncaught TypeError: f is not a function
// ES6
function f() { console.log('I am outside!'); }
(function () {
var f = undefined;
if (false) {
function f() { console.log('I am inside!'); }
}
f();
}());
// Uncaught TypeError: f is not a function
//
{
let a = 'secret';
function f() {
return a;
}
}
//
{
let a = 'secret';
let f = function () {
return a;
};
}
//
'use strict';
if (true) {
function f() {}
}
//
'use strict';
if (true)
function f() {}
本質的には、ブロックレベルのスコープは、ステートメントであり、複数の動作を一緒にカプセル化し、リターン値がない.
{
let t = f();
t = t * t + 1;
}ブロックレベルのスコープを式に変えるという提案があります.つまり、値を返すことができます.ブロックレベルのスコープの前にdoを加えて、do表現にします.
let x = do {
let t = f();
t * t + 1;
};JavaScript ES 6のletとvarの比較
javascript 1.7にletのキーワードが追加されていると聞きましたが、それは宣言後、「ローカル変数」に似ています.しかし、キーワードvarとの具体的な違いはまだ分かりません.
回答:違いは作用域にあり、varキーワードの作用域は一番近い関数作用域である(関数体の外部であれば大域作用域である)、letキーワードの作用域は最も近いブロック作用域である(ブロックであれば例外なく大域作用域である).これは関数のスコープよりも小さいです.同様に、varのように、let宣言を使用する変数も、その宣言された場所の前に見られます.
以下はデモの例です.
グローバル(Global)
それらは関数体の外では平等である.
let me = 'go'; //globally scoped
var i = 'able'; //globally scoped
function ingWithinEstablishedParameters() {
let terOfRecommendation = 'awesome worker!'; //function block scoped
var sityCheerleading = 'go!'; //function block scoped
};
function allyIlliterate() {
//tuce is *not* visible out here
for( let tuce = 0; tuce < 5; tuce++ ) {
//tuce is only visible in here (and in the for() parentheses)
};
//tuce is *not* visible out here
};
function byE40() {
//nish *is* visible out here
for( var nish = 0; nish < 5; nish++ ) {
//nish is visible to the whole function
};
//nish *is* visible out here
};