JavaScript のクロージャーの紹介 (Situ Zhengmei)_JavaScript スキル

クロージャの定義は非常に曖昧です。クロージャとは、構文ドメインが特定の領域に位置し、外部の実行ドメイン内の非永続変数値を継続的に参照 (読み取りおよび書き込み) する機能を備えた段落を指します。エリア内の独自のスコープ。実行スコープの外にあるこれらの非永続変数は、クロージャが最初に定義された (または作成された) ときの値 (ディープリンク) を魔法のように保持します。簡単に言うと、クロージャは、上位レベルの関数またはスコープから取得した変数 (キーと値のペア) のコピーを別のスコープに保存します。これらのキーと値のペアは、上位レベルの関数の実行には従いません。完成したら。 Zhou Aimin氏は、クロージャは「属性テーブル」であり、クロージャはデータブロックであり、クロージャは「名前=値」を格納する比較テーブルであると、より明確に述べました。それはとても簡単です。ただし、クロージャは実行時の概念であることを強調しておく必要があります。
JavaScript のクロージャには 2 つの特徴があります:
関数変数への参照として - 関数が返されるときにアクティブ化されます。
クロージャは、関数が戻ったときにリソースを解放しないスタック領域です。
現在、認識されているクロージャ実装は 3 つあります:

コードをコピー コードは次のとおりです:

with(obj){
//これがオブジェクト クロージャです
}

コードをコピーします コードは次のとおりです。

(function(){
//関数クロージャー
})()

コードをコピー コードは次のとおりです:

try{
//...
} catch( e) {
//catch クロージャーですが IE にはありません
}

いくつかの便利な例

コードをコピーします コードは次のとおりです:

//**************** クロージャ uniqueID******** ********
uniqueID = (function(){ //この関数の呼び出しオブジェクトは値を保存します
var id = 0; //これはプライベート永続値です
//外側の関数は、アクセスできる永続値を返します。 ネストされた関数
//これは、変数 uniqueID に保存したネストされた関数です。 //Return, self。 -increment.
})() ; //定義後に外部関数を呼び出します。
document.writeln(uniqueID());
document.writeln(uniqueID()); //2
document.writeln(uniqueID()); //4

コードをコピー コードは次のとおりです: //****** ************クロージャ階乗** ***********

var a = (function(n){

if(nif( n==1){ return 1; }
else{ return n * argument.callee(n-1); 4);
document.writeln(a);

コードをコピーします

コードは次のとおりです: function User(properties ) { //現在のインスタンスを指すように変数をここで宣言する必要があります

var objthis = this;

for ( var i inproperties ) {
(function(){
//クロージャの内部では、t は毎回 new であり、
var t = property[i] の場合、properties[i] の値が内部にあります。
objthis[ "get" i ] = function() {return t;};objthis[ "set" i ] = function(val) {t = val;})(); }
}
//テストコード
var user = new User({
名前: "ボブ",
年齢: 44
}); getname());
alert(user.getage());
alert(user.getage()); ));
user.setage( 22 );
alert ( user.getage());


が質問です今日、Wuyou で次のことを確認しました:
リクエスト:
これを 3 つのノードの Onclick イベントで、対応するパラメーターを正しくポップアップできます。




コードをコピー

コードは次のとおりです:

aa

aa

;li id="a3">aa

Situ Zhengmei による JavaScript クロージャー <title> </title> <meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美">Situ Zhengmei による JavaScript クロージャー<meta name="description" content="javascript闭包 by 司徒正美"> <h1> </h1>ああ<ul> <li id="a1">ああ</li> <li id="a2">ああ</li> <li id="a3"> </li> </ul>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ] My説明は、onclick バインディング関数 function(){alert(i)} のスコープは、対応する li オブジェクトであり、alert の i のスコープは window です。各ループは window.i の値を書き換えているため、ループの後はが完了すると、i はすでに 4 になり、どの li 要素をクリックしても 4 になります。

解決策:
関数クロージャーを使用します。

コードをコピー コードは次のとおりです。

var lists = document.getElementsByTagName("li ");

for(var i=0,l=lists.length; i lists[i].onclick = (function(i){//外部関数に保存
return function(){
alert(i);
}
})(i)
}

コードをコピーします

コードは次のとおりです。 var lists = document.getElementsByTagName("li"); for(var i=0); ,l=リスト; i lists[i] = new function(){

return function(){
(t 1)
}
}
}

Situ Zhengmei による JavaScript クロージャー

<title> </title>Situ Zhengmei による JavaScript クロージャ (関数クロージャ)<meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美">ああ<h1> </h1>ああ<ul> <li id="a1">ああ</li> <li id="a2"> </li> <li id="a3"> </ul> [Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります ] を使用しますイベント プロキシ

コードをコピー

コードは次のとおりです。 var ul = document.getElementsByTagName( "ul")[0]; ul.onclick = function(){

var e = argument[0] ||

target = e.srcElement ?ターゲット;
if(target .nodeName.toLowerCase() == "li"){
alert(target.id.slice(-1))
}
}

Situ Zhengmei による JavaScript クロージャー

<title> </title> <meta charset="utf-8">Situ Zhengmei (イベント エージェント) による JavaScript クロージャー<meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美"> <h1 id="ああ">ああ</h1> <ul>ああ<li id="a1"> </li>ああ<li id="a2"> </li> <li id="a3"> </ul>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ] Keepノード上の要素内の一時変数。

コードをコピー コードは次のとおりです:

var lists = document.getElementsByTagName("li");
for(var i=0,t=0,el; el = list[i++];){
el.i = t++
el.onclick = function(){
alert(this.i)
}
}

<title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美"> <script type="text/javascript"> window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0,t=1,el; el = lists[i++];){ el.i = t++ el.onclick = function(){ alert(this.i) } } } </script> <h1 id="javascript闭包-by-司徒正美-将临时变量变成某一个对象的属性">javascript闭包 by 司徒正美（将临时变量变成某一个对象的属性）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

使用with语句造成的对象闭包。

复制代码 代码如下:

var els = document.getElementsByTagName("li")
for(var i=0,n=els.length;iwith ({i:i})
els[i].onclick = function() { alert(this.innerHTML+i) };
}

<title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美"> <script type="text/javascript"> window.onload = function(){ var els = document.getElementsByTagName("li") for(var i=0,n=els.length;i<n;i++){ with ({i:i}) els[i].onclick = function() { alert(i) }; } } </script> <h1 id="javascript闭包-by-司徒正美-对象闭包">javascript闭包 by 司徒正美（对象闭包）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

使用try...catch语句构造的异常闭包：

复制代码 代码如下:

var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i try{
throw i;
}catch(i){
lists[i].onclick = function(){
alert(i)
}
}
}

<title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美"> <script type="text/javascript"> window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0,l=lists.length; i < l; i++){ try{ throw i; }catch(i){ lists[i].onclick = function(){ alert(i) } } } } </script> <h1 id="javascript闭包-by-司徒正美-异常闭包">javascript闭包 by 司徒正美（异常闭包）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

复制代码 代码如下:

var els = document.getElementsByTagName("li");
(''+Array(els.length+1)).replace(/./g,function(a,i){
els[i].onclick=function(){alert(i)}
})