JS の var、let、const を理解する

この記事では、JavaScript の var、let、const について紹介します。一定の参考値があり、困っている友人は参考にしてください。皆さんのお役に立てれば幸いです。

var

var ステートメントは、JavaScript で変数を宣言するために使用され、次のルールに従います。

• スコープは関数スコープまたはグローバルスコープ。
• 一時的なデッド ゾーン (TDZ) による制限はありません。
• 同じ名前のグローバル プロパティが window に作成されます。
• は 割り当て可能な です。
• は 宣言可能です。

関数スコープとグローバル スコープ

グローバル スコープに出現する場合、var はグローバル変数を作成します。さらに、window 上に同じ名前の グローバル プロパティ を作成します:

var city = "Florence";

console.log(window.city); // "Florence"

関数内で宣言すると、変数のスコープはその関数に設定されます:

var city = "Florence";

function bubble() {
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

var 宣言はプロモートされます:

function bubble() {
  city = "Siena";
  console.log(city);
  var city; // hoists
}

bubble(); // "Siena"

予期しないグローバル変数

宣言なしで割り当てられた変数 (var、 のいずれか) let または const) はデフォルトで グローバル変数になります:

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // "Siena"

この動作を排除するには、strict モード#の使用が必要です##:

"use strict";

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // ReferenceError: assignment to undeclared variable city

再割り当ておよび再宣言可能

var で宣言された変数は後で##Reassign または Redeclare で作成できます。再宣言の例:

function bubble() {
  var city = "Florence";
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

再代入の例:

function bubble() {
  var city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"

let

let

ステートメントは、次の規則に従う JavaScript の変数を宣言します:

はブロック スコープに属します。

• は
一時的なデッド ゾーン
• の対象となります。 これは、
window
• にグローバル プロパティを作成しません。 は
割り当て可能な
• です。
再宣言することはできません
• 。
ブロック スコープ

let

で宣言された変数は、window にグローバル プロパティを作成しません: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let city = &quot;Florence&quot;; console.log(window.city); // undefined</pre><div class="contentsignin">ログイン後にコピー</div></div>When関数内で宣言された場合、変数のスコープは関数になります。

let city = "Florence";

function bubble() {
  let city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

ブロック

内で宣言された場合、変数のスコープはブロックになります。ブロックでの使用例:

let city = "Florence";

{
  let city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

if

ブロックでの使用例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let city = &quot;Florence&quot;; if (true) {   let city = &quot;Siena&quot;;   console.log(city); // &quot;Siena&quot;; } console.log(city); // &quot;Florence&quot;</pre><div class="contentsignin">ログイン後にコピー</div></div> 逆に、

var

は次の影響を受けません。ブロックの制限: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var city = &quot;Florence&quot;; {   var city = &quot;Siena&quot;;   console.log(city); // &quot;Siena&quot;; } console.log(window.city); // &quot;Siena&quot;</pre><div class="contentsignin">ログイン後にコピー</div></div>一時的なデッド ゾーン

let

ステートメントはプロモートできますが、 は一時的なデッド ゾーンを生成します:

function bubble() {
  city = "Siena";
  console.log(city); // TDZ
  let city;
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization

ステージング デッド ゾーンにより、初期化前の

let

ステートメントへのアクセスが妨げられます。別の例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function bubble() {   console.log(city); // TDZ   let city = &quot;Siena&quot;; } bubble(); // ReferenceError: can't access lexical declaration 'city' before initialization</pre><div class="contentsignin">ログイン後にコピー</div></div> 2 つの例で生成された例外は同じであることがわかり、「一時的なデッド ゾーン」の出現が証明されています。

再割り当て可能ですが、再宣言はできません

let

で宣言された変数 は再宣言できません 。例外をスローする再宣言の例:

function bubble() {
  let city = "Siena";
  let city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of let city

これは有効な再宣言の例です:

function bubble() {
  let city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"

const

const

ステートメントは以下で使用されます。 JavaScript で変数を宣言します。これは次の規則に従います。

はブロック スコープに属します。

• は「一時的なデッドゾーン」の対象となります。
• これは、
window
• にグローバル プロパティを作成しません。
再割り当てできません
• 。
再宣言することはできません
• 。
ブロック スコープ

const で宣言された変数は、

window

: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const city = &quot;Florence&quot;; console.log(window.city); // undefined</pre><div class="contentsignin">ログイン後にコピー</div></div>関数内で宣言された場合、グローバル プロパティを作成しません。変数のスコープは関数です。

const city = "Florence";

function bubble() {
  const city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

ブロック

で宣言された場合、変数のスコープはブロックです。ブロック ステートメント {} の例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const city = &quot;Florence&quot;; {   const city = &quot;Siena&quot;;   console.log(city); // &quot;Siena&quot;; } console.log(city); // &quot;Florence&quot;</pre><div class="contentsignin">ログイン後にコピー</div></div>

if

ブロック内の例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const city = &quot;Florence&quot;; if (true) {   const city = &quot;Siena&quot;;   console.log(city); // &quot;Siena&quot;; } console.log(city); // &quot;Florence&quot;</pre><div class="contentsignin">ログイン後にコピー</div></div>一時的なデッド ゾーン

const

宣言は昇格できますが、 は一時的なデッド ゾーンに入ります:

function bubble() {
  console.log(city);
  const city = "Siena";
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization

は再割り当てできず、再宣言できません

Use

const

宣言された変数 は再宣言したり、再割り当てしたりすることはできません 。再宣言時にスローされる例外の例:

function bubble() {
  const city = "Siena";
  const city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of const city

再割り当ての例 例:

function bubble() {
  const city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // TypeError: invalid assignment to const 'city'

summary

##var✅❌✅❌ #const##✅✅❌❌英語の元のアドレス: https://www.valentinog.com/blog/var/ 著者: Valentino

ブロック スコープ	一時的なデッド ゾーン	グローバル プロパティの作成	再割り当て可能	再宣言可能
##❌❌	✅	✅	✅		#let
✅
❌

関連する無料学習の推奨事項:

js ビデオ チュートリアル

以上がJS の var、let、const を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。