JavaScript クロージャ
クロージャとは何ですか
クロージャ、クロージャの公式説明は次のとおりです: 多くの変數(shù)とこれらの変數(shù)にバインドされた環(huán)境を持つ式 (通常は関數(shù))、つまりこれらの変數(shù)も式の一部です。クロージャの特徴:
1. 関數(shù)変數(shù)への參照として、関數(shù)が戻ったときにアクティブになります。
2. クロージャとは、関數(shù)が戻ったときにリソースを解放しないスタック領(lǐng)域です。
簡単に言えば、JavaScript では內(nèi)部関數(shù)の使用が許可されています。つまり、関數(shù)定義と関數(shù)式は別の関數(shù)の関數(shù)本體內(nèi)に配置されます。さらに、これらの內(nèi)部関數(shù)は、すべてのローカル変數(shù)、パラメータ、およびそれらが存在する外部関數(shù)で宣言された他の內(nèi)部関數(shù)にアクセスできます。クロージャは、これらの內(nèi)部関數(shù)の 1 つが、それらを含む外部関數(shù)の外側(cè)で呼び出されるときに形成されます。
クロージャを書いて使用するいくつかの方法
最初の書き方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14159;
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}
var c = new Circle(1.0);
alert(c.area());
</script>
</head>
<body>
</body>
</html> この書き方は特別なものではなく、関數(shù)にいくつかの屬性を追加するだけです。
2番目の書き方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
var Circle = function() {
var obj = new Object();
obj.PI = 3.14159;
obj.area = function( r ) {
return this.PI * r * r;
}
return obj;
}
var c = new Circle();
alert( c.area( 1.0 ) );
</script>
</head>
<body>
</body>
</html> この書き方は、変數(shù)を宣言し、その変數(shù)に値として関數(shù)を代入する方法です。
3 番目の書き方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
var Circle = new Object();
Circle.PI = 3.14159;
Circle.Area = function( r ) {
return this.PI * r * r;
}
alert( Circle.Area( 1.0 ) );
</script>
</head>
<body>
</body>
</html> この方法は、新しいオブジェクトを作成し、そのオブジェクトにプロパティとメソッドを追加するという方法でよく理解されています。
4番目の書き方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );
</script>
</head>
<body>
</body>
</html>この方法はよく使われており、最も便利です。 var obj = {} は空のオブジェクトを宣言することです
JavaScript クロージャの目的
実際、クロージャを使用すると、多くのことができます。たとえば、オブジェクト指向のコーディング スタイルをシミュレートし、コードをよりエレガントかつ簡潔に表現(xiàn)し、いくつかの側(cè)面でコードの実行効率を向上させることができます。
1. 匿名の自己実行関數(shù)
2. 実裝クラスと継承
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 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>plus() 関數(shù)に外部からアクセスできれば、カウンターのジレンマを解決できます。
counter = 0 が 1 回だけ実行されるようにする必要もあります。
ここで閉鎖が必要です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<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>分析例
変數(shù) add は関數(shù)の自己呼び出しの戻り値の値を指定します。
自己呼び出し関數(shù)は 1 回だけ実行されます。カウンタを 0 に設(shè)定します。そして関數(shù)式を返します。
add変數(shù)は関數(shù)として使用できます。優(yōu)れた點(diǎn)は、関數(shù)の上のスコープからカウンターにアクセスできることです。
これは JavaScript クロージャと呼ばれます。これにより、関數(shù)がプライベート変數(shù)を持つことが可能になります。
カウンターは匿名関數(shù)のスコープによって保護(hù)されており、add メソッドを通じてのみ変更できます。
クロージャとは、上位関數(shù)がクローズされている場合でも、上位関數(shù)のスコープ內(nèi)の変數(shù)にアクセスできる関數(shù)です。
![[クラウド サーバー學(xué)習(xí)] Webhook 自動展開ブログ](https://img.php.cn/upload/course/000/000/041/61e515d5eed45156.jpg)
