先進のJavaScriptシリーズ-パート4.1:グローバル、機能とブロック範囲

スコープとは

In simple terms, Scope can be defined as the space in which variables and statements are accessible.

or

Scope determines the accessibility of variables, objects, and functions from different parts of the code.

この定義を例として理解しましょう

例

var x = 2

function myFunc(){
  console.log(x)
}

myfunc関数は変数にアクセスすることができますx したがって、私たちはx はmyfuncの範囲にある.

ES 6(2015)の前に、範囲(グローバルと機能)の2つのタイプだけがありました、しかし、ES 6で、新しい範囲は導入されました、すなわち、ブロック範囲.

3スコープの種類:
クレジット

1 .グローバルスコープ

グローバルに宣言された変数/グローバル実行コンテキストではグローバルスコープがあります.

彼らはプログラムのどこからでもアクセスできます.

彼らが宣言されているとしてもvar , let or const , グローバルスコープで宣言された変数は同様に動作します.

例

var x = 2

function myFunc(){
  console.log(x)
}

ここで変数x グローバルスコープで宣言され、プログラム全体で使用可能です.

この高度なJavaScriptシリーズで説明したように、変数が宣言されていなければvar , let or const キーワード、常にグローバルスコープで宣言されます.

例

function myFunc(){
  x = 1
}
console.log(x)

ここでコードは出力1 変数からx グローバルスコープで宣言されます.

2 .関数/ローカルスコープ

JavaScript関数内で宣言された変数は、関数のローカルになります.

これらの変数は、関数内からのみアクセスできます.

関数の実行が完了すると、これらの変数はメモリから削除され、変数名を他の関数で再利用できます.

すべてvar , let and const 関数スコープで同様に動作します.

例

function myFunc(){
  let x = 1
  console.log(x)
}

ここで変数x この関数は、関数の中からのみアクセス可能です.

ブロックスコープ

変数宣言の2つの新しいキーワードlet and const ES 6で導入されたのはブロックスコープです.

ブロックの範囲内で宣言されるどんな変数またはブロックでも、それから外でアクセスされることができないということはブロックスコープであると言われます.

例

var x = 1
if(x){
  var y = 2
  let z = 3
  console.log("hello world")
}
console.log(y)
console.log(z)

出力

2
Uncaught ReferenceError: z is not defined

ここで変数y 外部からアクセスできませんif block 変数はlet を使って宣言された変数var でない.

語彙対ダイナミックスコープ

レキシカル(静的)スコープでは、プログラムソースコードの構造は、参照している変数を決定します.

動的スコープでは、プログラムスタックのランタイム状態は、参照している変数を決定します.

Lexical scoping refers to the variables in the location of a function's definition, whereas dynamic scoping refers to the variables in the location of a function's invocation.

例の助けを借りて理解しましょう.

例

コード

function a() { 
    console.log(i);
}

function b() {
    var i = 1;
    a();
}

var i = 0;

b();

解説

We have two function, a and b. a logs out the value of i which is set globally to 0. b sets its value to 1, and calls a. If we call b, it will log out 0. This is because — while a doesn't have a variable called i — a has access to the enclosing scope where the function is defined. And in the global scope, we have an i which is set to 0. This is called lexical scoping.

In dynamic scoping, the value of i will be 1. This is because instead of looking at where the function is defined, it looks at where it is called from. It sees from the call stack that it has been called from b, which sets the value of i to be 1.

ご覧のように、レキシカルスコープは関数が宣言されている場所を見ます.ダイナミックスコープは関数が呼び出される場所を指します.

クレジットThang Tran Duc

私とつながってください

GitHub

付録

リファレンス

https://www.w3schools.com/js/js_scope.asp

https://stackoverflow.com/questions/22394089/static-lexical-scoping-vs-dynamic-scoping-pseudocode

https://www.webtips.dev/webtips/javascript-interview/lexical-vs-dynamic-scoping