JavaScript クロージャ
JavaScript 変數(shù)はローカル変數(shù)またはグローバル変數(shù)にすることができます。
プライベート変數(shù)はクロージャを使用できます。
グローバル変數(shù)
この関數(shù)は、次のような関數(shù)內(nèi)で定義された変數(shù)にアクセスできます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>訪問函數(shù)內(nèi)部定義的變量:</p>
<button type="button" onclick="myFunction()">查看</button>
<p id="demo"></p>
<script>
function myFunction() {
var a = 4;
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>プログラムを?qū)g行して試してみましょう
この関數(shù)は、次のような関數(shù)の外部で定義された変數(shù)にもアクセスできます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>函數(shù)可以訪問定義在函數(shù)外的變量：</p>
<button type="button" onclick="myFunction()">點(diǎn)我</button>
<p id="demo"></p>
<script>
var a = 5;
function myFunction() {
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>プログラムを?qū)g行してみよう
次の例では、 a はグローバル変數(shù)です。
Web ページのグローバル変數(shù)は window オブジェクトに屬します。
グローバル変數(shù)は、ページ上のすべてのスクリプトに適用されます。
最初の例では、a はローカル変數(shù)です。
ローカル変數(shù)は、それが定義されている関數(shù)內(nèi)でのみ使用できます。他の関數(shù)またはスクリプト コードでは使用できません。
グローバル変數(shù)とローカル変數(shù)は、同じ名前であっても、2 つの異なる変數(shù)です。どちらかの値を変更しても、もう一方の値には影響しません。
ヒント: 変數(shù)が var キーワードを使用せずに宣言されている場(chǎng)合、それが関數(shù)內(nèi)で定義されている場(chǎng)合でも、それはグローバル変數(shù)です。
変數(shù)のライフサイクル
グローバル変數(shù)のスコープはグローバルです。つまり、グローバル変數(shù)は JavaScript プログラム全體のあらゆる場(chǎng)所にあります。
関數(shù)內(nèi)で宣言された変數(shù)は関數(shù)內(nèi)でのみ機(jī)能します。これらの変數(shù)はローカル変數(shù)であり、そのスコープはローカルです。関數(shù)のパラメータもローカルであり、関數(shù)內(nèi)でのみ機(jī)能します。
カウンターのジレンマ
いくつかの値を數(shù)えたい場(chǎng)合、カウンターはすべての関數(shù)で使用できると想像してください。
グローバル変數(shù)と関數(shù)を使用してカウンターの増分を設(shè)定できます:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>全局變量計(jì)數(shù)。</p>
<button type="button" onclick="myFunction()">計(jì)數(shù)!</button>
<p id="demo">0</p>
<script>
var counter = 0;
function add() {
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>プログラムを?qū)g行して試してください
add() 関數(shù)が実行されるとカウンター値が変化します。
しかし、ここで問題が発生します。add() 関數(shù)が呼び出されていなくても、ページ上の任意のスクリプトでカウンターが変更される可能性があります。
関數(shù)內(nèi)でカウンターを宣言した場(chǎng)合、関數(shù)を呼び出さずにカウンターの値を変更することはできません:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>局部變量計(jì)數(shù)。</p>
<button type="button" onclick="myFunction()">計(jì)數(shù)!</button>
<p id="demo">0</p>
<script>
function add() {
var counter = 0;
return counter += 1;
}
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>プログラムを?qū)g行して試してください
上記のコードは出力されません正しくは、add() 関數(shù)を呼び出すたびに、カウンターは 1 に設(shè)定されます。
JavaScript の組み込み関數(shù)でこの問題を解決できます。
JavaScript 組み込み関數(shù)
すべての関數(shù)はグローバル変數(shù)にアクセスできます。
実際、JavaScript では、すべての関數(shù)がその上のスコープにアクセスできます。
JavaScript はネストされた関數(shù)をサポートしています。ネストされた関數(shù)は、上位レベルの関數(shù)変數(shù)にアクセスできます。
この例では、埋め込み関數(shù) plus() は親関數(shù)のカウンター変數(shù)にアクセスできます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>局部變量計(jì)數(shù)。</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
</script>
</body>
</htmlプログラムを?qū)g行して試してください
plus() 関數(shù)に外部からアクセスできれば、これで問題を解決できますカウンタージレンマ。
counter = 0 が 1 回だけ実行されるようにする必要もあります。
閉鎖が必要です。
JavaScript クロージャ
関數(shù)自體を呼び出していることを覚えていますか?この機(jī)能は何をするのでしょうか?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>局部變量計(jì)數(shù)。</p>
<button type="button" onclick="myFunction()">計(jì)數(shù)!</button>
<p id="demo">0</p>
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>プログラムを?qū)g行して試してみましょう
分析例
変數(shù)addは関數(shù)の自己呼び出しの戻り値を指定します。
自己呼び出し関數(shù)は 1 回だけ実行されます。カウンタを 0 に設(shè)定します。そして関數(shù)式を返します。
add変數(shù)は関數(shù)として使用できます。優(yōu)れた點(diǎn)は、関數(shù)の上のスコープからカウンターにアクセスできることです。
これは JavaScript クロージャと呼ばれます。これにより、関數(shù)がプライベート変數(shù)を持つことが可能になります。
カウンターは匿名関數(shù)のスコープによって保護(hù)されており、add メソッドを通じてのみ変更できます。
ヒント: クロージャは、前の関數(shù)が閉じられている場(chǎng)合でも、前の関數(shù)のスコープ內(nèi)の変數(shù)にアクセスできる関數(shù)です。
