JavaScript 変数のプロモーションとクロージャーの理解-jsチュートリアル-php.cn

JavaScript 変数のプロモーションとクロージャーの理解

亚连

リリース： 2018-05-31 10:00:02

オリジナル

1428 人が閲覧しました

この記事では、JavaScript 変数のプロモーションとクロージャーに関連する知識ポイントを詳細に分析します。興味のある方は参照してください。

まず質問を見てみましょう:

<script>
 console.log(typeof a)//undefined
 var a=&#39;littlebear&#39;;
 console.log(a)//littlebear 
</script>
<script>
 console.log(typeof a)//string
 var a=1;
 console.log(a)//1
</script>

ログイン後にコピー

最初のスクリプトでは、var a が最上位に昇格し、a = 'littlebear' がそのままの位置に保たれていることがわかります。

2 番目のスクリプトが最初に unknown を出力しない理由は、a が上記の var によって宣言されているため、var a は再度昇格されないためです。

別の質問を見てください:

<script>
  console.log(a)//function a(){}
  var a=1;
  console.log(a)//1
  function a(){}
  console.log(a)//1
</script>

ログイン後にコピー

関数 a(){} が最上位に昇格していることがわかります。関数のプロモーションと変数のプロモーションについて説明します

1. 変数のプロモーション

ES6 より前では、JavaScript にはブロックレベルのスコープがなく (中かっこ {} のペアはブロックレベルのスコープです)、グローバルのみでした。スコープ
と関数スコープ。変数ホイスティングは、変数宣言をスコープの先頭にホイストします。
最後の履歴書の例は次のとおりです:

console.log(global); // undefined
var global = &#39;global&#39;;
console.log(global); // global

function fn () {
　　console.log(a); // undefined
　　var a = &#39;aaa&#39;;
　　console.log(a); // aaa
}
fn();

ログイン後にコピー

上記の出力結果は、js の変数プロモーションによるものです。実際、上記のコードは次のように実行されます:

var global; // 变量提升，全局作用域范围内，此时只是声明，并没有赋值
console.log(global); // undefined
global = &#39;global&#39;; // 此时才赋值
console.log(global); // 打印出global
 
function fn () {
　　var a; // 变量提升，函数作用域范围内
　　console.log(a);
　　a = &#39;aaa&#39;;
　　console.log(a);
}
fn();

ログイン後にコピー

2. js で関数を作成するには、関数宣言と関数リテラルの 2 つの方法があります。関数ホイスティングは関数宣言に対してのみ存在します。例:

console.log(f1); // function f1() {}  
console.log(f2); // undefined 
function f1() {}
var f2 = function() {}

ログイン後にコピー

上記の出力結果がある理由は、js の関数プロモーションにより、コードが実際に次のように実行されるためです:

function f1() {} // 函数提升，整个代码块提升到文件的最开始
console.log(f1);  
console.log(f2);  
var f2 = function() {}

ログイン後にコピー

3. クロージャとは

クロージャには権利があります。別の関数のスコープ内の変数にアクセスする関数。

簡単に言うと、JavaScript では内部関数の使用が許可されています。つまり、関数定義と関数式は別の関数の関数本体に配置されます。さらに、これらの内部関数は、すべてのローカル変数、パラメータ、およびそれらが存在する外部関数で宣言された他の内部関数にアクセスできます。クロージャは、これらの内部関数の 1 つが、それらを含む外部関数の外側で呼び出されるときに形成されます。

4. 変数のスコープ

クロージャを理解するには、まず変数のスコープを理解する必要があります。

変数のスコープは、グローバル変数とローカル変数の2種類にすぎません。

JavaScript 言語の特別な点は、グローバル変数を関数内で直接読み取ることができることです。

内部関数のスコープチェーンには外部関数のスコープが含まれるため、内部関数は外部関数の変数にアクセスできます。

次のように理解することもできます。内部関数のスコープは、外部関数;

var n=999;
function f1(){
　alert(n);
}
f1(); // 999

ログイン後にコピー

一方、関数内のローカル変数を関数の外から読み取ることはできません。

function f1(){
　var n=999;
}
alert(n); // error

ログイン後にコピー

ここで注意すべき点があります。関数内で変数を宣言する場合は、var コマンドを使用する必要があります。これを使用しない場合、実際にはグローバル変数を宣言していることになります。

function f1(){
　 n=999;
}
f1();
alert(n); // 999

ログイン後にコピー

5. クロージャの書き方と使い方

var Circle={ 
  "PI":3.14159, 
  "area":function(r){ 
    return this.PI * r * r; 
  } 
}; 
alert( Circle.area(1.0) );//3.14159

ログイン後にコピー

最初は、このようなオブジェクトの書き方もクロージャの一種であるとは知りませんでしたが、今振り返ると、これは典型的なクロージャの使い方だと思います。
6. クロージャを使用する際の注意点
1) クロージャは関数内の変数をメモリに格納し、大量のメモリを消費するため、クロージャを悪用することはできません。そうしないと、パフォーマンスの問題が発生します。 Web ページで、IE でメモリリークが発生する可能性があります。解決策は、関数を終了する前に、未使用のローカル変数をすべて削除することです。

2) クロージャは、親関数内の変数の値を親関数の外で変更します。したがって、親関数をオブジェクトとして使用し、クロージャをそのパブリックメソッドとして使用し、内部変数をプライベート値として使用する場合は、親関数内の変数の値を自由に変更しないように注意する必要があります。

上記は私があなたのためにまとめたものです。

関連記事:

vueのカスタムjsファイル読み込み方法
vueページ離脱後の関数実行例
vueカルーセルチャートプラグインvue-concise-sliderの使い方
以上がJavaScript 変数のプロモーションとクロージャーの理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。