スコープ
8410 ワード
スコープは、特定の変数または関数にアクセスできる場所を参照します.MDNドキュメントから、「スコープ」は現在の実行コンテキストです.値と式が「見える」文脈または参照することができます.変数または他の式が「現在のスコープ」でないなら、それは使用のために利用できません
スコープの例をいくつか紹介しましょう.
機能範囲
関数スコープで、関数を定義して変数を作成し、その関数の外部からアクセスしようとすると、どうなるのでしょうか?コンソールで試してみましょう
さて、関数の外部で変数を宣言して、関数の内部で関数にアクセスしようとしたらどうですか?以下のようにしましょう.
ブロックスコープ
それで何
上の例では、どうすればよいかを変更しますか?何も.同じ出力ですが、どうやってVarに変更しますか?レッツトライ
はい.あなたはそれを正しく見た.変数の値を出力します
語彙スコープ
また、静的スコープとして知られている語彙スコープは、変数が宣言され、その変数がどこにあるかを決定する場所を指します.入れ子関数を持っているときは、外部スコープで宣言された変数にアクセスできます.つまり、親関数ではなく、逆の関数です.
上の図では入れ子関数があります.内部機能内部
お読みありがとうございます.
スコープの例をいくつか紹介しましょう.
機能範囲
関数スコープで、関数を定義して変数を作成し、その関数の外部からアクセスしようとすると、どうなるのでしょうか?コンソールで試してみましょう
function funcScope() {
let a = 10
const b = 20
var c = 5
console.log(a)
}
// to execute this function in the console we have to invoke it like so:
funScope()
console.log(a)
console.log(b)
console.log(c)
>10
>Uncaught ReferenceError: a is not defined
>Uncaught ReferenceError: b is not defined
>Uncaught ReferenceError: c is not defined
上記のコードスニペットで、最初にコンソール.ログa
は、その関数のスコープの中にあり、他の全てのコンソールログがref error
彼らは範囲外だから.関数内で宣言された変数にはアクセスできません.これは、他の関数で同じ変数を宣言できる理由です.さて、関数の外部で変数を宣言して、関数の内部で関数にアクセスしようとしたらどうですか?以下のようにしましょう.
let color = ‘red’
function rainbow(){
let color = ‘orange’
console.log(color)
}
rainbow()
console.log(color)
> orange
> red
面白い右?この場合、変数color = ‘orange’
, 関数の内部では、その関数の外では変数color = ‘red’
関数の外部では、Global scope
. 関数のレインボーから変数を削除した場合、コンソール.関数虹からのlog ( color )は関数の外に見えますcolor
宣言?この場合、yesで赤を返します.ブロックスコープ
それで何
block
JavaScriptで?エーblock
固いブラケットのセットです{ }
これにはコードのチャンクがありますが、以下のようなJavaScriptオブジェクトとは異なりません:{ name: uma, age: 30}
. ASfunction scope
インblock scope
外部の変数にアクセスできませんblock
それは内部で宣言されます.以下の例を見てください. If (true) {
let name = ‘Uma’
}
console.log(name)
> uncaught ReferenceError: name is not defined
ここでは実験に1つ面白いことがあります.あなたたちはそれの準備ができていますか?わかりましょう!上の例では、どうすればよいかを変更しますか?何も.同じ出力ですが、どうやってVarに変更しますか?レッツトライ
if (true) {
var name = ‘Uma’
}
console.log(name)
> Uma
何?はい.あなたはそれを正しく見た.変数の値を出力します
let or const
and var
スコープの異なるルールを持っている.これが使用を推奨しない理由ですvar
. var
上記の例ではどんな合併症も起こらないかもしれませんが、同じ変数がブロックの外で宣言されたシナリオを持っているならば、それは確かに衝突を引き起こすことができます.自分で試してみてください.追加するvar name = ‘Aiden’
上のコードの上にコンソールを追加します.ログイン名block
そして何が起こるかを参照してください?両方の変数または1つだけを出力しますか? var name = ‘Aiden’
if (true) {
var name = ‘Uma’
console.log(name)
}
console.log(name)
> Uma
> Uma
はい.それはちょうど2回、馬を印刷しました.今すぐletでそれを試してください.以下のようにして間違いなく両方の変数を取得します.Uma
Aiden
語彙スコープ
また、静的スコープとして知られている語彙スコープは、変数が宣言され、その変数がどこにあるかを決定する場所を指します.入れ子関数を持っているときは、外部スコープで宣言された変数にアクセスできます.つまり、親関数ではなく、逆の関数です.
上の図では入れ子関数があります.内部機能内部
inFunc()
宣言された変数はありませんが、そのコードを実行するとUma
内部関数の外部で宣言されます.インならoutFunc()
また、外部の関数よりもグローバルスコープで検索する変数は存在しませんでした.この場合、名前変数はoutFunc()
それで、それは帰りますUmesh
しかし、変数を宣言するならinFunc()
関数:function outFunc(){
function inFunc() {
let name = ‘Aiden’
}
inFunc()
console.log(name)
}
この場合、外部関数が内部関数にアクセスできないため、何も返されません.これは語彙スコープと呼ばれます.私はこの記事がスコープについてのより良いアイデアを少し与えてほしい.お読みありがとうございます.
Reference
この問題について(スコープ), 我々は、より多くの情報をここで見つけました https://dev.to/uma/scope-3gg1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol