機能または「JavaScriptが好きなもの」：クロージャ、プロトタイピング、およびコンテキスト

JavaScriptのさらなる開発により、Web開発者を支援するスクリプト言語として台頭し、クライアント側を開発する強力なツールとなり、ユーザーのブラウザでページの利便性と対話性を直接提供します。

環境と目標の特殊性により、JavaScriptは通常のプログラミング言語とは異なり、多くの機能を備えていますが、優れたクロスブラウザーコードを作成することは非常に困難です。

JavaScriptコードを数日以上書いたプログラマーのほとんどは、これらの機能に出くわしたと思います。 このトピックの目的は、新しい何かを発見することではなく、これらの機能を「指で」 「欠点」で説明して「利点」を作成することです。

このトピックでは以下を検討します。

1. 短絡
2. プロトタイピング
3. 実行コンテキスト

まえがき

もちろん、著者として、JavaScriptの豊富な可能性をすべて説明したいと思います。 しかし、私がこれをやろうとすると、記事は膨大な数のページにまたがり、多くの初心者開発者はすべての情報を思い出せなくなります。 したがって、引用されている例は単純すぎるように思われ、トピックは完全には開示されていません。 しかし、これらの機能にまだ慣れていない人や、すでに慣れている人が、実際にはすべてが初歩的であることを理解するのに役立つことを願っています。

閉鎖、または「これらの異常な範囲」

「便利なもの！」-これら2つの言葉は表現できます
JavaScriptでのクロージャとその実装に対する私の姿勢。

クロージャーの本質は簡単です。 関数内では、関数が宣言された場所で利用可能なすべての変数を使用できます 。

クロージャの概念は単純ですが、実際には、特定の場合の動作について多くのあいまいな点があります。 最初に、変数の宣言の基本、つまり「 JavaScriptの変数はvarキーワードを使用して宣言される 」を思い出しましょう。

var title = "Hello World"; alert(title); 

コードを実行すると、期待どおりに「 Hello World 」というテキストが表示されます。 何が起こっているかの本質は単純です-グローバル変数のタイトルが値「 Hello World 」で作成され、これはalertを使用してユーザーに表示されます。 この例では、 varキーワードを省略しても、グローバルコンテキストのためにコードは正常に機能します。 しかし、それについては後で。

次に、同じ変数を宣言しようとしますが、すでに関数内にあります。

 function example (){ var title = "Hello World"; } alert(title); 

コードを実行した結果、「 'title' is undefined 」-「 変数 'title'が宣言されていません 」というエラーが生成されます。 これは、変数のローカルスコープのメカニズムによるものです。 関数内で宣言されたすべての変数はローカルであり、この関数内でのみ表示されます 。 または、単純に：関数内で変数を宣言した場合、この関数の外部ではこの変数にアクセスできません。

碑文「 Hello World 」を表示するには、呼び出された関数内でアラートを呼び出す必要があります。

 function example(){ var title = "Hello World"; alert(title); } example(); 

または、関数から値を返します。

 function example(){ var title = "Hello World"; return title; } alert(example()); 

これらの例はすべて明白だと思います-このような動作は、ほぼすべてのプログラミング言語で実装されています。 それでは、実装を他の言語と非常に異なるものにするJavaScriptのクロージャーの特性は何ですか？

主な違いは、JavaScriptでは関数を他の関数内で宣言でき、JavaScriptの関数はオブジェクトであるということです！ これにより、通常のオブジェクトと同じアクションを実行できます-存在の確認、変数への割り当て、プロパティの追加、メソッドの呼び出し、別の関数の結果として関数オブジェクトを返す！

関数はオブジェクトであるため、変数のスコープは関数にも適用されることを意味します。別の関数内で宣言された関数は、宣言された場所でのみ表示されます

 function A(){ function B(){ alert("Hello World"); } } B(); 

変数を使用した例のように、コードを実行すると、変数Bが宣言されていないというエラーが生成されます。 関数A内の宣言の直後に関数Bを呼び出し、関数A自体を呼び出すと、大事なメッセージ「 Hello World 」が表示されます

 function A(){ function B(){ alert("Hello World"); } B(); } A(); 

それでは、ほとんどの初心者がJavaScriptについて何を学ぶかについて説明を始めましょう。変数がどこから来たのかを判断します。 上記のように、変数はvarキーワードを使用して宣言する必要があります。

 var title = 'external'; function example(){ var title = 'internal'; alert(title); } example(); alert(title); 

この例では、 タイトル変数が2回宣言されています。1回目はグローバルに、2回目は関数内で。 サンプル関数内では、 varキーワードを使用してタイトル変数が宣言されたため、ローカルになり、関数の前に宣言されたタイトル変数とは関係ありません。 コード実行の結果、最初に「 内部 」（内部変数）が表示され、次に「 外部 」（グローバル変数）が表示されます。

文字列var title = 'internal'からvarキーワードを削除すると、コードを実行した結果、メッセージ " internal "が2回取得されます。 これは、関数を呼び出したときに、ローカル変数titleを宣言しなかったが、グローバル変数の値を上書きしたためです！

したがって、varキーワードを使用すると変数がローカルになり、外部変数と競合しないことが保証されます（ たとえば、PHPでは、関数内のすべての変数はデフォルトでローカルです。グローバル変数にアクセスするには、グローバル変数を使用して宣言する必要がありますキーワードglobal ）。

それでは、どの変数が関数で使用されているかをどのように判断しますか？

関数を宣言するときに、変数がvarキーワードを使用してローカルに宣言されていない場合、変数は親関数で検索されます。 そこで見つからない場合、インタープリターが変数宣言を見つけるか、グローバルスコープに到達するまで、親関数のチェーンを検索し続けます。

関数宣言のチェーン上またはグローバルスコープ内で変数宣言が見つからない場合、2つの開発オプションがあります。

1. 変数を使用（値を取得）しようとすると、変数が宣言されていないというエラーが生成されます
2. 変数に値を割り当てようとすると、変数がグローバルスコープで作成され、値が割り当てられます。

 function A(){ title = 'internal'; return function B(){ alert(title); } } var B = A(); B(); alert(title); 

コードを実行した後、両方の時間「 内部 」を取得します。 関数A内のタイトル変数に値を割り当てると、関数外で使用できるグローバル変数が作成されます。 変数への値の割り当て（したがってグローバル変数の作成）は関数Aを呼び出す段階で発生するため、関数Aを呼び出す前にアラート（タイトル）を呼び出そうとするとエラーが生成されることに注意してください。



JavaScriptのクロージャーのトピックに戻ります。

JavaScriptは、他のほとんどのプログラミング言語と比較して、変数スコープを使用するより柔軟なアプローチを提供します。 また、ローカルスコープと他の関数内の関数の動的な宣言を組み合わせる可能性があるため、クロージャーメカニズムが発生します。

ご存知のように、すべてのローカル変数は新しい関数呼び出しごとに再作成されます。 たとえば、関数Aがあり 、その中で変数titleが宣言されています。

 function A(){ var title = 'internal'; alert(title); } A(); 

関数Aが実行されると、変数titleは存在しなくなり、アクセスできなくなります。 何らかの方法で変数にアクセスしようとすると、変数が宣言されていないというエラーが発生します。

ここで、関数Aの中に、 title変数の値を表示する関数宣言と、この値を渡された値に変更する関数を追加し、これらの関数を返します。

 function getTitle (){ var title = "default title"; var showTitle = function(){ alert(title); }; var setTitle = function(newTitle){ title = newTitle; }; return { "showTitle": showTitle, "setTitle": setTitle }; } var t = getTitle(); t.showTitle(); t.setTitle("Hello World"); t.showTitle(); 

この例を開始する前に、 タイトル変数の動作を論理的に調べてみます。getTitle関数が起動されると、変数が作成され、呼び出しが完了すると破棄されます。 ただし、 getTitle関数が呼び出されると 、この変数を使用する2つの動的に宣言されたshowTitleおよびsetTitle関数を持つオブジェクトが返されます。 これらの関数を呼び出すとどうなりますか？

そして、この例を実行すると、最初に「 デフォルトのタイトル 」が表示され、次に「 Hello World 」が表示されることがわかります 。 したがって、 タイトル変数は存在し続けますが、 getTitle関数は既に終了しています。 ただし、上記のshowTitle / setTitle関数を除き、この変数には他にアクセスできません。 これはクロージャーの簡単な例です。 タイトル変数は「クローズ」され、宣言中にアクセスできる関数のみに表示されます。

getTitle関数を再度実行すると、 タイトル変数とshowTitle / setTitle関数が毎回再作成され、以前の実行とは関係がないことがわかります。

 var t1 = getTitle(); t1.setTitle("Hello World 1"); var t2 = getTitle(); t2.setTitle("Hello World 2"); t1.showTitle(); t2.showTitle(); 

コードを実行すると（上記のgetTitle関数コードを追加することを忘れずに）、「 Hello World 1 」と「 Hello World 2 」という2つのメッセージが生成されます（ この動作はプライベート変数をエミュレートするために使用されます ）。

理論と最も単純な例を残して、実際にクロージャからどのような利益が得られるかを理解しようとします。

1つは、グローバルスコープを詰まらせない機能です。

グローバルスコープでの競合の問題は明らかです。 簡単な例： showTitle関数を宣言する複数のjavascriptファイルがページに接続されている場合、 showTitleが呼び出されると、最後に宣言された関数が実行されます。 同じことが宣言された変数にも当てはまります。

この状況を回避するには、各関数/変数を一意の名前で呼び出すか、クロージャーを使用する必要があります。 各関数と変数を一意の名前で変形して名前を付けるのは不便であり、完全な一意性を保証するものではありません。 一方、クロージャーメカニズムは、変数と関数の命名に完全な自由を提供します。 これを行うには、宣言の直後に実行される匿名関数でコード全体をラップするだけで十分です。

 (function(){ /*  ,     */ })(); 

その結果、宣言されたすべての変数と関数はグローバルスコープで使用できなくなります。つまり、競合は発生しません。

それでも1つまたは2つの機能にグローバルにアクセスできることが必要な場合はどうすればよいですか？ そして、ここではすべてがとても簡単です。 グローバルスコープを提供する最もグローバルなオブジェクトは、 ウィンドウオブジェクトです。 関数はオブジェクトであるという事実により、関数をウィンドウプロパティに割り当てて、グローバルになることができます。 プライベートスコープからグローバル関数を宣言する例：

 (function(){ var title = "Hello World"; function showTitle(){ alert(title); } window.showSimpleTitle = showTitle; })(); showSimpleTitle(); 

コード実行の結果、メッセージ「 Hello World 」が生成されます-ローカルのshowTitle関数は showSimpleTitleという名前でグローバルに使用可能になり、匿名関数の外部ではアクセスできない「closed」変数titleを使用します。

なぜなら すぐに実行される匿名関数ですべてをラップすると、この関数にパラメーターを渡すことができます。この関数内では、ローカル名で使用できます。 JQueryの例：

 (function(){ $('.hidden').hide(); })(); 

グローバル変数$がjQueryでない場合、エラーがスローされます。 これは、jQueryに加えて、$関数を使用する別のライブラリ（Prototype.JSなど）が使用されている場合に発生します。 「額」の解決策：

 (function(){ var $ = jQuery; $('.hidden').hide(); })(); 

動作し、正しく動作します。 しかし、あまりきれいではありません。 よりきれいな解決策があります-ローカル変数$を関数への引数として宣言し、そこにjQueryオブジェクトを渡します：

 (function($){ /* ,  $ */ })(jQuery); 

関数のすべての引数がデフォルトでローカル変数であることを思い出すと、匿名関数$の内部ではjQueryオブジェクトへの参照であるグローバルオブジェクト$に接続されていないことが明らかになります。 匿名関数による受信をより理解しやすくするために、匿名関数を非匿名にすることができます-関数を宣言してすぐに起動します：

 function __run($){ /* code */ } __run(jQuery); 

それでも、グローバル関数$を呼び出す必要がある場合は、 windowを使用できます。

2つ目は、クロージャーを使用した関数の動的な宣言です。

イベントモデルを使用する場合、同じイベントを異なる要素でハングアップする必要がある場合によく発生します。 たとえば、10個のdiv要素があり、クリックするとalert（N）を呼び出す必要があります（ Nは一意の要素番号です）。

クロージャーを使用した最も簡単なソリューション：

 for(var counter=1; counter <=10; counter++){ $('<div>').css({ "border": "solid 1px blue", "height": "50px", "margin": "10px", "text-align": "center", "width": "100px" }).html('<h1>'+ counter +'</h1>') .appendTo('body') .click(function(){ alert(counter); }); } 

ただし、このコードを実行すると「予期しない」結果が発生します。すべてのクリックで同じ数が表示されます-11。

答えは簡単です。 カウンター変数の値は、要素をクリックしたときに取得されます。 そして、その時までに変数の値は11（サイクルを終了するための条件）になっていたため、それに応じてすべての要素に対して11が表示されます。

正しい解決策は、要素ごとに個別にクリック処理関数を動的に生成することです。

 for(var counter=1; counter <=10; counter ++){ $('<div>').css({ "border": "solid 1px blue", "height": "50px", "margin": "10px", "text-align": "center", "width": "100px" }).html('<h1>'+ counter +'</h1>') .appendTo('body') .click((function(iCounter){ return function(){ alert(iCounter); } })(counter)); } 

このアプローチでは、 カウンターをパラメーターとして受け取り、動的関数を返す匿名関数を使用します。 匿名関数内では、 ローカル変数iCounterには、関数が呼び出されたときの現在のカウンター値が含まれています。 また、関数を呼び出すたびにすべてのローカル変数が再宣言されるため（新しいクロージャーが作成されるため）、匿名関数が呼び出されると、新しい「ダイナミック関数」が、既に「閉じた」番号とともに返されます。

簡単に言うと、関数を2回（3回目、4回目...）実行すると、すべてのローカル変数がメモリ内に再作成され、前の関数呼び出し中に作成された変数とは何の関係もありません。

難しいですか？ 初めてだと思う-はい。 しかし、グローバル変数をたくさん持つ必要はなく、「どこから私を呼び出したのか」という関数でチェックを行います。 そして、デフォルトで渡された関数を呼び出すjQuery.eachを使用すると、コードはさらにシンプルで読みやすくなります。

 $('div.handle-click').each(function(counter){ $(this).click(function(){ alert(counter); }); }); 

クロージャーのおかげで、美しく簡潔で理解しやすいコードを記述し、必要に応じて変数と関数に名前を付けることができます。 また、このコードが他のプラグ可能なスクリプトと競合しないことを確認してください。

プロトタイピングまたは「クラスオブジェクトを作成したい」

JavaScriptのプロトタイピングについて書かれた多くの優れた記事があります。 したがって、私はすでに書かれていることを繰り返さないようにしますが、プロトタイプのメカニズムの基礎を単に説明します。

JavaScriptにはオブジェクトの概念がありますが、クラスの概念はありません。 タイピングが弱いため、すべてのJavaScriptはオブジェクトベースであるため、JavaScriptのほとんどすべてのデータはオブジェクトであるか、オブジェクトとして使用できます。 また、クラスの代替として、プロトタイピングの可能性があります-デフォルトでプロパティとメソッドを持つプロトタイプをオブジェクトに割り当てることができます。

JavaScriptでのオブジェクトの操作は非常に簡単です。オブジェクトを宣言し、プロパティとメソッドを割り当てるだけです。

 var dog = { "name": "Rocky", "age": "5", "talk": function(){ alert('Name: ' + this.name + ', Age: ' + this.age); } }; 

オブジェクトが多数ある場合は、オブジェクトを返す別の関数を作成する方が便利です。

 function getDog(name, age){ return { "name": name, "age": age, "talk": function(){ alert('Name: ' + this.name + ', Age: ' + this.age); } }; } var rocky = getDog('Rocky', 5); var jerry = getDog('Jerry', 3); 

プロトタイプを使用しても同じことができます。

 function Dog(name, age){ this['name'] = name; this.age = age; } Dog.prototype = { "talk": function(){ alert('Name: ' + this.name + ', Age: ' + this.age); } }; var rocky = new Dog('Rocky', 5); var jerry = new Dog('Jerry', 3); 

前述のように、プロトタイプはデフォルトのプロパティとメソッドを含む単純なオブジェクトです。 つまり オブジェクトでプロパティを取得しようとするか、オブジェクトが持たない関数を呼び出すと、JavaScriptインタープリターはエラーを生成する前に、プロトタイプオブジェクトでこのプロパティ/関数を見つけようとします。見つかった場合は、プロパティ/関数プロトタイプ。



JavaScriptは非常に柔軟な言語です。 したがって、概して、プロトタイプを使用して実行できることはすべて、プロトタイプなしで実行できます。 ただし、プロトタイプを使用すると、変更と継承、およびOOPに近い構文により柔軟な可能性が提供されます。 興味のある方のために、記事の最後に、独自のクラスを実装するためのメカニズムと可能性の詳細な説明を含む記事へのリンクがあります。

そして、プロトタイプを使用して既存のオブジェクトの機能を拡張する小さな説明的な例

任意の日付から曜日の名前を取得する必要がありますが、組み込みのDateオブジェクトにはgetDayメソッドのみが含まれており、曜日の数値表現を0〜6で返します：日曜日から土曜日。

これを行うことができます：

 function getDayName(date){ var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; return days[date.getDay()]; } var today = new Date(); alert(getDayName(today)); 

または、プロトタイピングを使用して、組み込みの日付オブジェクトを拡張します。

 Date.prototype.getDayName = function(){ var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; return days[this.getDay()]; } var today = new Date(); alert(today.getDayName()); 

2番目の方法はよりエレガントで、「余分な」関数でスコープを詰まらせることはないと思います。一方、複数の人がコードに取り組んでいる場合、埋め込みオブジェクトの拡張は悪い形であるという意見があります。したがって、これには注意する必要があります。

実行コンテキストまたは「This Mysterious this」

OOPが使用されている他のプログラミング言語からJavaScriptに切り替えると、このオブジェクトがJavaScriptで何を意味するかを理解することは非常に困難です。簡単に説明しようとすると、これは関数が呼び出されるオブジェクトへの参照です。例：

 var exampleObject = { "title": "Example Title", "showTitle": function(){ alert(this.title); } }; exampleObject.showTitle(); 

例からわかるように、exampleObject.showTitle（）を呼び出すと、関数はオブジェクトメソッドとして呼び出され、この関数内で関数を呼び出したexampleObjectオブジェクトを参照します。関数自体はオブジェクトには一切付加されず、個別に存在します。コンテキストバインディングは、関数呼び出し中に直接発生します。

 function showTitle(){ alert(this.title); } var objectA = { "title": "Title A", "showTitle": showTitle }; var objectB = { "title": "Title B", "showTitle": showTitle }; objectA.showTitle(); objectB.showTitle(); 

この例で明らかにコールすることを示しているobjectA.showTitleは（） 、これはを参照ObjectAに、と呼び出しobjectB.showTitleを（） - ObjectBに上。showTitle関数自体は別個に存在し、作成時にプロパティとしてオブジェクトに単純に割り当てられます。

関数を呼び出すときに、関数（関数）がオブジェクトを参照しない場合、関数内のこれはグローバルウィンドウオブジェクトを参照します。つまり単にshowTitle（）を呼び出すと、タイトル変数が宣言されていないというエラーが生成されます。ただし、グローバル変数titleを宣言すると、関数はこの変数の値を出力します。

 var title = "Global Title"; function showTitle(){ alert(this.title); } showTitle(); 

関数のコンテキストが呼び出し中に正確に決定されることを示すために、関数がオブジェクトメソッドとしてのみ最初に存在する例を示します。

 var title = "Global Title"; var exampleObject = { "title": "Example Title", "showTitle": function(){ alert(this.title); } }; var showTitle = exampleObject.showTitle; //      showTitle(); //         

実行の結果、メッセージ「Global Title」が表示されます。これは、関数呼び出し中に、これがexampleObjectオブジェクトではなくグローバルウィンドウオブジェクトを指すことを意味します。これは、var行のshowTitle = exampleObject.showTitleで関数へのリンクのみを取得し、showTitle（）が呼び出されると、この参照をウィンドウオブジェクトにする元のexampleObjectへの参照がないためです。簡単にするために、関数がオブジェクトのプロパティとして呼び出される場合、これはこのオブジェクトを参照します。発信者がいない場合、これ

グローバルウィンドウオブジェクトを参照します。

よくある間違いの例：

 var exampleObject = { "title": "Example Title", "showTitle": function(){ alert(this.title); } }; jQuery('#exampleDiv').click(exampleObject.showTitle); 

予想される「Example Title」ではなくID「exampleDiv」のDIVをクリックすると、空の行またはDIVの「title」属性の値が表示されます。これは、クリックイベントに関数を与えるが、オブジェクトには与えないという事実によるものです。そして、その結果、元のexampleObjectを参照せずに関数が起動されます（便宜上、jQueryは要素自体のコンテキストでハンドラー関数を実行し、同様の結果につながります）。オブジェクトにバインドされた関数を開始するには、オブジェクトへの参照を使用して関数を呼び出す必要があります。

 jQuery('#exampleDiv').click(function(){ exampleObject.showTitle(); }); 

JavaScript自体を使用して、このような「不器用な」宣言を回避するには、bindを使用して関数をコンテキストにバインドできます。

 jQuery('#exampleDiv').click(exampleObject.showTitle.bind(exampleObject)); 

ただし、バージョン9以前の誰もが愛する IEはこの機能をサポートしていません。したがって、ほとんどのJSライブラリは、この機能を何らかの形で独立して実装します。たとえば、jQueryではプロキシです。

 jQuery('#exampleDiv').click(jQuery.proxy(exampleObject.showTitle, exampleObject)); //  : jQuery('#exampleDiv').click(jQuery.proxy(exampleObject, "showTitle")); 

このアプローチの本質は非常に単純です。jQuery.proxyが呼び出されると、匿名関数が返され、クロージャーを使用して、渡されたオブジェクトのコンテキストで元の関数が呼び出されます。

実際、JavaScriptは任意のコンテキストで任意の関数を実行できます。また、オブジェクトに機能を割り当てる必要もありません。JavaScriptでこれを行うには、適用と呼び出しの 2つの方法があります。

 function showTitle(){ alert(this.title); } var objectA = { "title": "Title A", }; var objectB = { "title": "Title B", }; showTitle.apply(objectA); showTitle.call(objectA); 

関数のパラメーターを使用しなくても、両方とも同じように機能します。適用関数と呼び出し関数は、呼び出されたときにパラメーターが渡される方法のみが異なります。

 function example(A, B, C){ /* code */ } example.apply(context, [A, B, C]); example.call(context, A, B, C); 

取り上げられているトピックの詳細については、次を参照してください。

• 短絡
• JavaScriptのショートカット
• クロージャとJavaScriptオブジェクト。通訳の再発明
• ECMA-262-3の微妙さ。パート4.可視性のチェーン。
• JavaScriptのクラス
• C / C ++ / C＃/ Javaプログラマ向けのJavaScriptプロトタイプ
• JavaScriptでオブジェクトを操作する：理論と実践
• このコンテキストの詳細
• 関数をオブジェクトにバインドしてカリー化する：「bind / bindLate」
• このjavascriptキーワード-実際にコンテキストを定義することを学ぶ