[TIL]プログラマーDAY 9:var,let,const,this,Closer

🙋🏻‍♂️

現在整理されている内容には、いくつかのエラーやエラーがある可能性があります.エラーを最小限に抑えることができますが、一部発生する可能性もありますのでご了承ください.エラーや補足説明を修正する必要がある場合は、コメントで教えてください.

🍪 学習ディレクトリ

JS関連予科

問題解決

🍽 学習の総括と重要な内容

var、let、const差異

varは、

を再宣言および再割り当てできる関数スキャンです.

letはブロックスキャンであり、

のみ再割り当て可能である.

constはブロックスキャンであり、再宣言できない、割り当てられない(定数に等しい)

元のタイプ(文字列、null、booleanなど)がcontとして指定されている場合にのみ、データは指定した値を変更することはできませんが、オブジェクトタイプ(Array、Objectなど)は指定した値にアクセスして内部値を操作できます.
理由は簡単です.元のタイプはスタックという名前のメモリに格納されます.可変ではありません.つまり、値が再割り当てされると、別のメモリに新しい値として格納され、対応するアドレスが格納されます.オブジェクトタイプでは、不変性はありません.hipという名前のダイナミックメモリに格納して値を変更し、最初からhipメモリの値を変更できます.参照アドレス値が変数に割り当てられているため、メモリを直接指していないため、値を変更できます.

がんばって

hoistingとは、変数に値を割り当てる前にscopeの最上位レベルに値を上げる現象で、var、let、constはhoistingを行いますが、varは同時に宣言して初期化するので、undeffinedに初期化した値は正常に出力されます.let.constは順次宣言と初期化を行い,このプロセス間のTDZ間でエスケープを行うと参照エラーが発生する.

関数スキャンとブロックスキャン

var関数スキャンサンプルコード

function Var(){
	var ex = 1;
    
    if(조건1){
    	var ex = 2;
    }
    
    if(조건1){
    	var test = "a";
    }
    
    for( ~~~ ){
    	var replay = "b";
    }
    
    console.log(ex);
    // 2
    console.log(test);
    // "a"
    console.log(replay);
    // "b"
}

上から見ると、関数スキャンがあるので、ブロック基準を上から下にして変数にアクセスしてtest、replayを出力することができ、関数スキャンがあるので、内部ブロックスキャンで値を変更すると、前のスキャンから値を出力すると結果が反映されるのでexは2に変更される.
上のコードが違うと

function Var(){
	var ex = 1;
    var test;
    var replay;
    
    if(조건1){
    	ex = 2;
    }
    
    if(조건1){
    	test = "a";
    }
    
    for( ~~~ ){
    	replay = "b";
    }
    
    console.log(ex);
    // 2
    console.log(test);
    // "a"
    console.log(replay);
    // "b"
}

上記のコードに示すように、関数スキャンの最上位レベルでは、すべての変数が宣言され、後続の変数を処理すると、宣言された変数に値を割り当てる構造が表示されます.
const,letブロックスキャンサンプルコード

function Block(){
	let ex = 1;
    
    console.log(ex);
    // 1
    
    const sample = 0;
    
    if(조건1){
    	ex = 2;
    }
    
    console.log(ex);
    // 1
    
    ex = 10;
    
    console.log(ex);
    // 10
    
    if(조건1){
    	let test = "a";
    }
    
    for( ~~~ ){
    	const replay = "b";
    }
    
    sample = 1;
    
    console.log(ex);
    // 10
    console.log(test);
    // 에러 발생
    console.log(replay);
    // 에러 발생
    console.log(sample);
    // 에러 발생
}

変数はブロック単位で遊ぶため、ブロックの外で動作する変数を表示しようとすると、出力されるブロックミラー変数が外部であるか、内部ブロックミラーにのみ存在する値であると、参照する変数が存在せず、エラーが発生する.
sampleの場合、constとして宣言された同じスキャンの変数を再割り当てしようとしたため、エラーが発生します.

this

一般的な関数では、thisは最上位のwindowを指します.したがって、これを関数に適用する場合は、関数を変数に割り当てるときにキーワードnewを使用してscopeを作成して、関数参照の範囲を定義できます.

function ex(){
	this.call = "call";
}

const test = ex();
console.log(test.call)
// undefined;

function ex2(){
	this.call = "call";
}

const test = new ex2();
console.log(test.call)
// call;

あるいは、()即時実行関数を使用して、この参照範囲を関数に限定することもできます.

const test = (function ex3() {
  this.call = "call";
  return this.call;
})();
console.log(test);
// call;

関数と矢印関数の違い

関数のthisはグローバルを示すか、関数内部のブロックスキャンで宣言された関数は宣言された上位関数を示す.
arrow関数では、親関数、ブロックスキャンを指し、参照の範囲を限定できます.

エンクロージャ

関数を返すと、宣言された関数の実行環境が記憶され、環境内の変数にアクセスしたり、他の定義された関数の機能に影響を与えたりします.
サンプルコード

function Sample1() {
  let num = 0;

  return function () {
    console.log(num);
  };
}

Sample1()();
// 0

サンプルコード2

function Sample2() {
  let num = 0;

  function plus() {
    num += 1;
  }

  function print() {
    console.log(num);
  }

  return {
    plus,
    print,
  };
}

const test = new Sample2();

test.plus();
console.log(test.print());
// 1
test.plus();
console.log(test.print());
// 2
test.plus();
console.log(test.print());
// 3

上記のモジュールを使用すると、オブジェクト言語向けの他のプライベート・アクセス者を実装できます.これは、情報の非表示と元のデータの不変性を確保しながら、最新の値を格納する方法です.

🧘🏻‍♂️ 困難と後期

以前知っていた概念も問題によって再接触して解決し,混同して困難である.
どんな場合でも、JSの基本概念を適用してすぐに判断できるはずですが、今は構造が少し複雑だと難しいかも・・・
今日のまとめ:概念を理解した瞬間に油断しないで、実際に理解していない可能性もあります

🔗 リファレンス

プログラマ