ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptで変数を宣言する4つの方法とは何ですか

JavaScriptで変数を宣言する4つの方法とは何ですか

青灯夜游
青灯夜游オリジナル
2021-04-01 17:40:3412100ブラウズ

JavaScript で変数を宣言する 4 つの方法: 1. 「var a;」など、「var」を使用して変数を宣言します。 2. 「function Fun (num)」など、「function」を使用して変数を宣言します。 {}"; 3. "let" を使用して変数を宣言します。 4. "const" を使用して変数を宣言します。

JavaScriptで変数を宣言する4つの方法とは何ですか

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

変数を宣言する方法

JavaScript で変数を宣言するにはいくつかの方法があります:

  • ES6 より前は、var と function
  • New ES6 で let と const

function を追加することは変数を宣言する方法ですか?

検証してみましょう

検証方法 1:

    function repeatFun (num) {
      return num;
    }

    repeatFun(10); // 10

    var repeatFun = 1;

    repeatFun(2); // Uncaught TypeError: repeatFun is not a function

このメソッドは var を使用して変数を繰り返し宣言しますが、後者は前の機能を上書きします

見てみましょうここで何が起こったかを見てください:

  • 最初に、名前がrepeatFun
  • である関数が宣言され、その後1回呼び出されます。結果は10
  • です。その後、repeatFun が var で再度宣言され、1 に初期化されます。
  • 関数repeatFunが最後にもう一度呼び出されます
  • 結果はエラーで、内容は次のとおりです:repeatFunは関数ではありません

実行結果に基づいて、ブラウザのメモリにrepeatFun変数があると推測できます。これは以前の関数であり、後にvarキーワードによって再宣言され、最初は1に変更されました。

検証方法 2:

    {
      let repeatFun = 1;
      function repeatFun (num) {
        return num
      }
    }
    // Uncaught SyntaxError: Identifier 'repeatFun' has already been declared

2 つ目の方法は、

ES6 の構文を使用することです。繰り返し宣言できない let の機能を使用して、関数も同様であることを証明します。宣言された変数


var、let、const の違い:

  • 変数宣言のプロモーション

    • var には変数宣言のプロモーションがあります関数は、最初に使用してから宣言することも、その逆も可能です。
    • let と const には、変数宣言を昇格する機能がありません。使用する前に、最初に宣言する必要があります。
  • 繰り返し宣言

    • var は繰り返し宣言でき、後者は前者をカバーします
    • let と const は繰り返し宣言できません
  • scope

    • var のスコープは関数によって制限されます
    • let と const はブロック スコープです
    • var はグローバルを定義できます変数とローカル変数、let と const はローカル変数のみを定義できます。
  • const の特別な点は、宣言後に変更することはできません (参照型と基本型の動作のいくつかの違い) 異なる)

  • 変数宣言の促進

var には変数の機能があります宣言プロモーション。最初に使用してから宣言できます

    let と const には変数宣言プロモーションの機能がありません。使用する前に最初に宣言する必要があります。
  • 例 1、var 変数のプロモーションを確認します:
  • var b = a + 1; // b: NaN 
    var a = 1; // a: 1
まず、宣言します。変数 b が最初に認識され、初期化された値は 1 (a の値は何ですか?) です。

次に、変数 a は次のようになります。宣言され、初期認識は 1 です。

これは、コードが表面的にどのように見えるかです。これらのことを行うとき、実際に行われることは次のとおりです。



変数が宣言されるたびに、その変数は宣言はコードの先頭に配置され、初期化が一度実行されます。値は未定義ですが、代入位置は変更されません。

#その後、他の操作を実行します
  • #次の書き方でも同じ効果が得られます
  • var b;
    var a;
    
    b = a +1; // b: NaN 
    a = 1; // a: 1
  • let と const は var とは異なる動作をします
例 2、let に変数昇格があるかどうかを確認します:

let b = a + 1; // Uncaught ReferenceError: a is not defined
let a = 1;

実行時にスコープ エラーが直接スローされます。このように変更すると、エラーは発生しません:

let a = 1; // a: 1
let b = a + 1; // b: 2

const で、変数昇格に関しても同じように実行します。

Duplicate宣言

var は繰り返し宣言でき、後者はオーバーライドします。 前者

let と const は繰り返し宣言できません。
  • 例 1、繰り返しを確認します。 var:
  • var a = 1;
    var a = 2;
    var b = a + 1; // 3
  • 最初に変数 a を宣言し、1

    に初期化します。次に変数 a を再度宣言し、2

      に初期化します。最後に変数 b を宣言します。初期値は 1
    • 例 2、let ステートメントの繰り返しを確認します:
    • let a = 1;
      let a = 2; // Uncaught SyntaxError: Identifier 'a' has already been declared
      var a = 1;
      let a = 2; //Uncaught SyntaxError: Identifier 'a' has already been declared
    • 明らかに、同じ実行環境で let を使用して宣言された変数は繰り返し宣言できません。そうでない場合は、エラーがスローされます
    const と繰り返し宣言に関して同じように動作させます


    • スコープのスコープ
var のスコープは関数によって制限されます

let と const はブロック スコープです

    var はグローバル変数とローカル変数を定義できますが、let と const はローカル変数のみを定義できます
  • 例として階乗関数をカプセル化します。末尾再帰を使用せず、if を使用して実装に使用します。
  • 例 1、階乗関数はスコープを検証します。
  •   var num = 5;
    
      function factorial(num) {
    
          var result = 1,resultValue = 0;
    
          for (let i = num - 1; i >= 1; i--) {
    
            if (i === num - 1) {
              resultValue = num * i;
            }else{
              resultValue = num * i / num;
            }
    
            result *= resultValue;
          }
    
          // i 是用 let 进行定义它的作用域仅仅被限制在 for 循环的区域内
          // i++;// Uncaught ReferenceError: i is not defined
    
          return result;
      }
    
      // result 是用 var 进行定义,他的活动区域在 factorial 函数内
      // result++; // var的作用域.html:34 Uncaught ReferenceError: result is not defined
    
      factorial(num); // 120
  • const は let と同じように動作します。スコープ内で

例 2、const スコープを確認します:

  {
    const NUM_1 = 10;
  }

  let b = NUM_1 + 1;  // Uncaught ReferenceError: NUM_1 is not defined

例 3、var がグローバル変数を定義できることを確認し、let と const はローカル変数のみを定義できることを確認します

  // 可以挂载到全局作用域上
  // var name = 'window scoped';

  let name = 'let scoped'; //是不挂载到全局作用域中

  let obj = {
    name: 'myName',
    sayName () {

       return function () {
        console.log(this.name); // 打印出来为空
      };
    }
  }

  obj.sayName()();
  console.log(window); //name 这个属性的值没有,如下图

若这样改一下就可以得到我们想要的值:

  • 把用 var 定义的 name 的代码取消注释,把用 let 定义的 name 的代码注释。

这个同时也涉及到新问题 this 的指向。后面的文章再详细举例验证


const 的特殊之处

const 与 let , var 其实还是有些地方不一样的

例子1:验证 const 的特殊之处(一)<br>

const NUM = 100; 
 NUM = 1000; // Uncaught TypeError: Assignment to constant variable
  • 经过 const 方式进行声明,之后赋值完毕,则不可以进行改变,否则会报错

但是也有例外 

例子二:验证 const 的特殊之处(二)

  const obj = {
    name: &#39;xiaoMing&#39;,
    sayName () {
      return this.name
    }
  };
  obj.sayName(); // xiaoMing

  obj.name = &#39;xiaoHong&#39;;
  obj.sayName(); // xiaoHong
  • 使用 const 首先声明一个变量 obj , 并且这个变量指向我们在内存中创建的对象,你会发现我们改变里面的属性是没有任何问题

若这样改一下: <br> 例子三:验证 const 的特殊之处(三)

  const obj = {
    name:&#39;xiaoMing&#39;,
    sayName(){
      return this.name
    }
  };

  obj = {}; // Uncaught TypeError: Assignment to constant variable
  • 若改变该变量的指向的对象,则就会报错。这种错误和 「 验证 const 的特殊之处(一)」的错误是一样的

更多编程相关知识,请访问:编程视频!!

以上がJavaScriptで変数を宣言する4つの方法とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。