es 6学習ノート-let、constとブロックレベルの役割領域_v 1.0_byKL

4905 ワード

es 6学習ノート-let、constとブロックレベルの役割領域_v 1.0
ブロックレベルのスコープ
  • javascriptはもとはブロックレベルのスコープがないので、大域的なスコープと関数のスコープ
  • だけあります.
    例1
    ブロックレベルがないので、毎回のiは同じです.
    var a = []; 
    for (var i = 0; i < 10; i++) {//  i var   ,         
        a[i] = function () {
            console.log(i); //   i       ,     i         10
        };
    }
    a[1](); //  10
    a[6](); //  10
    例2
    ここでは前に中に閉包の例がありますと一緒に理解できます.
    function createFunctions() {
            var result = new Array();
            for (var i = 0; i < 10; i++) {
                result[i] = function () { //      
                    //          createFunctions    ,           (for    ),
                    //i   10 ,     10,    ,                ,       
                    return i;
                };
            }
            return result; //        ,             function
        }
        var test = createFunctions();
        for (var i = 0; i < 10; i++) {
            //       function          
            console.log(test[i]());//  10 
        }
    //    ,                     
          function createFunctions() {
            var result = new Array();
            for (var i = 0; i < 10; i++) {
                result[i] = function (num) {//        ,    num
                    return function () {//       ,         num      num,             ,                    
                        return num;     //                ,              num     
                    };
                }(i);//           ,      i    num
            }
            return result; //        ,             function
        }
        var test = createFunctions();
        for (var i = 0; i < 10; i++) {
            //       function          
            console.log(test[i]());//  0-9
        }
    ここでは、クローズドバックが変数オブジェクト全体として保存され、iの値が変数オブジェクトとともに変化するということですが、ここではグローバルオブジェクトに置き換えて例を作ります.
    例3
    ここで真実の応用に還元します.
    
    
    
    
    
    

    //      :Uncaught TypeError: Cannot read property 'innerText' of undefined
        at HTMLButtonElement. (
     var buttons = document.querySelectorAll('.button');
     var output = document.querySelector('#output');
    
     for(var i =0;i
    総じて言えば、以前のjsの中でブロックレベルのスコープを実現すると:
  • または関数のスコープを使用して、たとえば関数内で変数を再定義する
  • .
  • は、独立した変数
  • を使用するために、クローズドのような方法を使用します.
    let
  • letの役割は、変数をブロックレベルのスコープ内に保持することです.他のスコープと争うことはなくなります.
  • varは変数が上昇する場合があります.(変数は声明の前に使用できます.)が、letは
  • を持っていません.
  • ステートメントの繰り返しは許されません.
    letに変更しました
    
    var a = [];
    for (let i = 0; i < 10; i++) {
        a[i] = function () {
            console.log(i);
        };
    }
    a[1](); //   1
    a[6](); //   6
    
    他の例も簡単にvarの代わりにletを変更することができます.
    ブロックレベルのスコープと関数宣言
  • s 5は、関数が最上位のスコープと関数スコープの中でしか宣言できないと規定しています.ブロックレベルスコープ宣言はできません.
  • s 6は、ブロックレベルのスコープ内の宣言関数
  • を明確にすることを規定している.
    しかし、古いコードの問題を考慮して、このため発生した互換性のない問題を軽減するために、ES 6は付録Bに規定されています.ブラウザの実現は上記の規定を守らなくてもいいです.
    環境による挙動の違いを考慮して、ブロックレベルのスコープ内で関数を宣言することを避けるべきである.必要であれば、関数宣言文ではなく関数表現にも書くべきです.
    //       
    {
      let a = 'secret';
      function f() {
        return a;
      }
    }
    
    //      
    {
      let a = 'secret';
      let f = function () {
        return a;
      };
    }
    
    forサイクル
    for循環はもう一つの特別なところがあります.循環語句の部分は父作用域です.循環体の内部は単独の副作用領域です.
    for (let i = 0; i < 3; i++) { //i for    
      let i = 'abc'; //  for     i      
      console.log(i);
    }
    // abc
    // abc
    // abc
    上記のコードは3回のabcを出力しています.これは関数内部の変数iと外部の変数iが分離されていることを示しています.
    コンサート
    constは読み取り専用の定数を宣言します.一度声明したら定数の値は変更できません.
    constが実際に保証しているのは、変数の値が変更されてはいけないのではなく、変数が指すメモリアドレスが変更されてはいけないのです.
  • は、単純なタイプのデータ(数値、文字列、ブール値)に対して、変数が指すメモリアドレスに値を格納するので、定数に等しい.
  • は複合タイプのデータ(主に対象と配列)であり、変数が指すメモリアドレスは、1つのポインタだけで保存されています.constはこのポインタが固定されていることを保証できます.データ構造が可変であるかどうかは、完全に制御できません.
    const foo = {};
    
    //   foo       ,    ,       ,             
    foo.prop = 123;
    foo.prop // 123
    
    //   foo        ,    ,             
    foo = {}; // TypeError: "foo" is read-only
    オブジェクトを凍結する必要がある場合、本物の「定数」として保証するためには、Object.freezeが必要であり、また、除外対象の中にオブジェクトが含まれていることを保証するためには、再帰的な凍結が必要である.
    //    
    const foo = Object.freeze({});
    
    //      ,        ;
    //      ,     
    foo.prop = 123;
    
    //    
    var constantize = (obj) => {
      Object.freeze(obj);
      Object.keys(obj).forEach( (key, value) => {
        if ( typeof obj[key] === 'object' ) {
          constantize( obj[key] );
        }
      });
    };
    要するに:
  • 一般的には、constを用いて値の格納容器(変数)
  • を定義する.
  • は、変数
  • を定義するために、値容器が明確に変更されると判断された場合にのみ、letを使用する.
  • はvar
  • を使用していません.
    参照参照:
  • s 6-関数の拡張
  • es実戦2015