ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript クロージャに関する詳細な説明

JavaScript クロージャに関する詳細な説明

PHPz
リリース: 2024-08-29 10:37:32
オリジナル
545 人が閲覧しました

JavaScript のクロージャは、JavaScript プログラミング言語のさまざまな機能とパターンを理解するのに役立つ重要かつ強力な機能です。クロージャについて詳しく説明するには、スコープと字句環境 (関数が宣言される場所) の概念について知る必要があります。

  • それらについては以下で説明します:-

1.スコープ:- スコープは、変数、関数、またはオブジェクトにアクセスできる特定のフィールドまたは環境です。 JavaScript には主に 2 つのタイプのスコープがあります:-

  • グローバル スコープ: これは、スクリプト全体で変数または関数にアクセスできるデフォルトのスコープです。
var myGlobalVar = "This is global!";

function printSomething() {
  console.log(myGlobalVar);
}

printSomething(); // Output: This is global!
ログイン後にコピー
  • ローカル/関数スコープ: 特定の関数またはブロック内の変数または関数にアクセスするために使用されます。
function printSomething() {
  var myLocalVar = "I'm local!";
  console.log(myLocalVar);
}

printSomething(); // Output: I'm local!

// Not allowed
console.log(myLocalVar); // Output: Uncaught ReferenceError: myLocalVar is not defined
ログイン後にコピー

? クロージャは基本的にローカル/関数スコープに関連しています。 ローカル/関数スコープ は関数内の変数へのアクセスを示しますが、グローバル スコープ はスクリプト全体にわたる変数へのアクセスを指します。

2.字句環境:- 字句環境は、現在の実行コンテキストのすべての変数と関数参照を含むオブジェクトです。各関数は実行中に独自の語彙環境を作成します。

JavaScript Closures সম্পর্কে বিস্তারিত আলোচনা

クロージャはどのように機能しますか?

関数が定義されると、その関数はクロージャを作成します。このクロージャには、関数のコードと、その関数の語彙範囲内の変数または関数が含まれています。 関数が呼び出されるとクロージャ新しい実行コンテキストを作成し、そのコンテキスト内の変数と関数にアクセスできます

  • 次に、例を使用してクロージャがどのように機能するかを説明しましょう。
function outerFunction() {
    let outerVariable = 'I am from outer function';

    function innerFunction() {
        console.log(outerVariable); // এখানে outerVariable-কে access করছে
    }

    return innerFunction;
}

const closureFunc = outerFunction();
closureFunc(); // Output: I am from outer function
ログイン後にコピー

説明:

  • এখানে outerFunction একটি ভেরিয়েবল outerVariable ডিক্লেয়ার করেছে এবং একটি innerFunction রিটার্ন করছে।
  • innerFunctionএর মধ্যে outerVariableকে এক্সেস করা হচ্ছে, যদিও innerFunction নিজে কোনো outerVariable ডিক্লেয়ার করে নাই।
  • যখন closureFunc চালানো হয়, তখন outerVariable প্রিন্ট হবে, যদিও outerFunction ইতিমধ্যে execute হয়ে শেষ হয়ে গেছে। এটি সম্ভব হয়েছে closure-এর কারণে, যা outerFunctionএর lexical environment ধরে রেখেছে।

Closures-এর ব্যবহার:

  1. Data Privacy/Encapsulation:- Closures প্রাইভেট ডেটা তৈরি করতে পারে যা শুধুমাত্র নির্দিষ্ট ফাংশনের মাধ্যমে অ্যাক্সেস করা যায়।
function counter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const myCounter = counter();
console.log(myCounter()); // Output: 1
console.log(myCounter()); // Output: 2
console.log(myCounter()); // Output: 3
ログイン後にコピー
  1. Function Currying:- একটি ফাংশন যে অন্য ফাংশনকে তার আর্গুমেন্ট হিসেবে গ্রহণ করে এবং একটি নতুন ফাংশন রিটার্ন করে, সেটি কারিং বলে।
function multiply(a) {
    return function(b) {
        return a * b;
    };
}

const multiplyBy2 = multiply(2);
console.log(multiplyBy2(5)); // Output: 10
ログイン後にコピー
  1. Asynchronous Handling Operations:- Closures প্রায়ই asynchronous callback ফাংশনের ক্ষেত্রে ব্যবহৃত হয়, যেমন setTimeout বা event listeners.
function asyncFunction() {
    let message = 'Hello, World!';

    setTimeout(function() {
        console.log(message);
    }, 1000);
}

asyncFunction(); // Output: Hello, World! (1 সেকেন্ড পরে)
ログイン後にコピー

Closures-এর সুবিধা:

  • ডেটা প্রাইভেসি: Closures sensitive ডেটা encapsulate করতে পারে এবং সেই ডেটা বাইরের জগতে অ্যাক্সেস থেকে নিরাপদ রাখে।
  • মেমরি ইফিশিয়েন্সি: একটি ফাংশন তার lexical scope ধরে রাখে, তাই closure যথাযথভাবে ব্যবহৃত হলে এটি মেমরি ইফিশিয়েন্ট হয়।

Closures-এর অসুবিধা:

  • মেমরি লিক: যদি Closures অনুপযুক্তভাবে ব্যবহৃত হয়, তাহলে এটি মেমরি লিকের কারণ হতে পারে, কারণ এটি প্রয়োজনের চেয়ে বেশি ডেটা ধরে রাখতে পারে।
  • ডিবাগিং সমস্যা: Closures জটিল হতে পারে এবং ডিবাগিং কঠিন হয়ে যায়, কারণ যখন আপনি বিভিন্ন ভেরিয়েবলের ভ্যালু ট্র্যাক করেন, তখন সেগুলি কোথায় সংরক্ষিত আছে তা স্পষ্ট নাও হতে পারে।

JavaScript-এ Closures একটি মৌলিক ও শক্তিশালী কনসেপ্ট যা আপনাকে অনেক উন্নত ও কার্যকরী কোড লিখতে সহায়তা করবে।

以上がJavaScript クロージャに関する詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート