検索
ホームページウェブフロントエンドjsチュートリアルJavaScript 関数型プログラミングのクロージャを理解する_JavaScript スキル

クロージャは、1960 年代に登場した関数型プログラミングの概念で、クロージャを実装した最初の言語は LISP の方言である Scheme でした。それ以来、クロージャ機能は他の言語で広く採用されてきました。
クロージャの厳密な定義は、「関数 (環境) とそれに囲まれた自由変数で構成されるセット」です。この定義は誰にとっても少しわかりにくいため、最初に例を通して説明し、それほど厳密ではないクロージャを説明します。次に、クロージャの古典的な使用例をいくつか示します。

クロージャとは

平たく言えば、JavaScript のすべての関数はクロージャですが、一般に、ネストされた関数は
をより適切に反映できます。 クロージャーの特性を示すために、次の例を参照してください:

var generateClosure = function() {
var count = 0;
var get = function() {
count ++;
return count;
};
return get;
};
var counter = generateClosure();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2
console.log(counter()); // 输出 3

このコードでは、generateClosure() 関数にローカル変数 count があり、初期値は 0 です。 get と呼ばれる関数もあります。この関数は、親スコープであるgenerateClosure() 関数内の count 変数を 1 ずつ増加させ、count の値を返します。 generateClosure() の戻り値は get 関数です。外部的には、カウンター変数を介してgenerateClosure()関数を呼び出し、その戻り値であるget関数を取得しました。その後、counter()を数回繰り返し呼び出したところ、戻り値が毎回1ずつ増加することがわかりました。
上記の例の特徴を見てみましょう。命令型プログラミングの考え方の通常の理解によれば、そのライフサイクルは、generateClosure がコール スタックから呼び出されるときの期間です。カウント変数 適用されていたスペースが解放されます。問題は、generateClosure() の呼び出しが終了した後、counter() が「すでに解放された」カウント変数を参照し、エラーが発生しないだけでなく、counter() が呼び出されるたびに count が変更されて返されることです。どうしたの?
これはまさにいわゆるクロージャの特徴です。関数がその中で定義された関数を返す場合、クロージャには返された関数だけでなく、関数が定義されている環境も含まれます。上記の例では、関数generateClosure()の内部関数getが外部変数counterから参照されている場合、counterとgenerateClosure()のローカル変数がクロージャとなります。十分に明確でない場合は、次の例が役立つかもしれません
あなたは理解しています:

var generateClosure = function() {
var count = 0;
var get = function() {
count ++;
return count;
};
return get;
};
var counter1 = generateClosure();
var counter2 = generateClosure();
console.log(counter1()); // 输出 1
console.log(counter2()); // 输出 1
console.log(counter1()); // 输出 2
console.log(counter1()); // 输出 3
console.log(counter2()); // 输出 2

上記の例は、クロージャがどのように生成されるかを説明しています。counter1 と counter2 はそれぞれ、generateClosure() 関数を呼び出し、クロージャの 2 つのインスタンスを生成します。内部的に参照する count 変数は、それぞれの動作環境に属します。 generateClosure() が get 関数を返すと、get が参照する可能性のあるgenerateClosure() 関数の内部変数 (つまり、count 変数) もプライベートに返され、メモリ内にコピーが生成されることがわかります。 thengenerateClosure() 返された関数の 2 つのインスタンス、counter1 と counter2 は互いに独立しています。

閉鎖の目的

1. ネストされたコールバック関数
クロージャには主に 2 つの用途があります。1 つはネストされたコールバック関数を実装すること、もう 1 つはオブジェクトの詳細を隠すことです。まず、ネストされたコールバック関数を理解するために次のコード例を見てみましょう。次のコードは、Node.js で MongoDB を使用して、ユーザーを追加する単純な関数を実装します。

exports.add_user = function(user_info, callback) {
var uid = parseInt(user_info['uid']);
mongodb.open(function(err, db) {
if (err) {callback(err); return;}
db.collection('users', function(err, collection) {
if (err) {callback(err); return;}
collection.ensureIndex("uid", function(err) {
if (err) {callback(err); return;}
collection.ensureIndex("username", function(err) {
if (err) {callback(err); return;}
collection.findOne({uid: uid}, function(err) {
if (err) {callback(err); return;}
if (doc) {
callback('occupied');
} else {
var user = {
uid: uid,
user: user_info,
};
collection.insert(user, function(err) {
callback(err);
});
}
});
});
});
});
});
};
Node.js や MongoDB に詳しくなくても問題ありません。詳細を理解する必要はなく、一般的なロジックを理解するだけで十分です。このコードはクロージャのネストの層を使用しており、ネストの各層はコールバック関数です。コールバック関数はすぐには実行されませんが、対応するリクエストが処理された後に、リクエストされた関数によってコールバックされます。ネストの各層にコールバックへの参照があり、最も内側の層でも外側の層で定義された uid 変数が使用されていることがわかります。クロージャ メカニズムの存在により、外部関数が実行された場合でも、そのスコープに適用された変数は解放されません。これは、内部関数が引き続きこれらの変数を参照する可能性があるためです。これにより、ネストされた非同期コールバックが完全に実現されます。

2. プライベートメンバーの実装 JavaScript オブジェクトにはプライベート プロパティがないことがわかっています。これは、オブジェクトのすべてのプロパティが外部に公開されていることを意味します。これにより、たとえば、オブジェクトのユーザーが属性を直接変更すると、オブジェクトの内部データの一貫性が破壊されるなど、セキュリティ リスクが発生する可能性があります。 JavaScript では、このプロパティがプライベートであり、外部オブジェクトが直接読み書きできないことを示すために、すべてのプライベート プロパティ (_myPrivateProp など) の前にアンダースコアを置く規則が使用されています。しかし、これは単なる非公式の合意であり、オブジェクトのユーザーがこれを行わないと仮定すると、より厳密なメカニズムはあるのでしょうか。答えは「はい」です。クロージャを通じて実現できます。前の例をもう一度見てみましょう:

var generateClosure = function() {
var count = 0;
var get = function() {
count ++;
return count;
};
return get;
};
var counter = generateClosure();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2
console.log(counter()); // 输出 3

counter() を呼び出すことのみがクロージャ内の count 変数にアクセスし、ルールに従って 1 ずつインクリメントできることがわかります。他の方法で count 変数を見つけることは不可能です。この単純な例から着想を得て、オブジェクトをクロージャでカプセル化し、詳細を隠すために「アクセサ」オブジェクトのみを返すことができます。

上記がこの記事の全内容です。これが皆さんの JavaScript クロージャの学習と理解に役立つことを願っています。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Python vs. JavaScript:開発環境とツールPython vs. JavaScript:開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか?証拠を調べるJavaScriptはCで書かれていますか?証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1)C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2)V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3)JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール