> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 클로저에 대한 자세한 토론

JavaScript 클로저에 대한 자세한 토론

PHPz
풀어 주다: 2024-08-29 10:37:32
원래의
545명이 탐색했습니다.

JavaScript의 클로저는 JavaScript 프로그래밍 언어의 다양한 기능과 패턴을 이해하는 데 도움이 되는 중요하고 강력한 기능입니다. 클로저에 대해 자세히 논의하려면 범위 개념과 어휘 환경(함수가 선언된 위치)을 알아야 합니다.

  • 아래에서 논의됩니다.-

1. 범위:- 범위는 변수, 함수 또는 개체에 액세스할 수 있는 특정 필드 또는 환경입니다. JavaScript에는 두 가지 주요 유형의 범위가 있습니다.

  • 전역 범위: 스크립트 전체에서 모든 변수나 함수에 액세스할 수 있는 기본 범위입니다.
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. Lexical Environment:- Lexical Environment는 현재 실행 컨텍스트의 모든 변수와 함수 참조를 포함하는 객체입니다. 각 함수는 실행 중에 자체 어휘 환경을 생성합니다.

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

클로저는 어떻게 작동하나요?

함수가 정의되면 해당 함수는 클로저를 생성합니다. 이 클로저에는 함수의 코드와 해당 함수 어휘 범위 내의 변수 또는 함수가 포함되어 있습니다. 함수가 호출되면 클로저새 실행 컨텍스트를 생성하고 해당 컨텍스트 내의 변수와 함수에 액세스할 수 있습니다.

  • 이제 예를 들어 Closure가 어떻게 작동하는지 설명해 보겠습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿