javascript জাভাস্ক্রিপ্ট বন্ধ করার জন্য একটি ব্যবহারিক ব্যবহার কি?



জাভাস্ক্রিপ্ট বই (20)

আমি জাভাস্ক্রিপ্ট বন্ধ প্রায় আমার মাথা মোড়ানো আমার কঠিন trying করছি।

আমি একটি অভ্যন্তরীণ ফাংশন ফেরত দিয়ে যে পেতে, এটি তার অবিলম্বে পিতামাতার সংজ্ঞায়িত কোন পরিবর্তনশীল অ্যাক্সেস থাকবে।

কোথায় এই আমার জন্য দরকারী হবে? সম্ভবত আমি এখনও কাছাকাছি আমার মাথা পেয়েছিলাম না। আমি অনলাইন দেখেছি বেশিরভাগ উদাহরণ কোনও বাস্তব বিশ্ব কোড সরবরাহ করে না, কেবল অস্পষ্ট উদাহরণগুলি।

কেউ আমাকে একটি বন্ধ করার একটি বাস্তব বিশ্বের ব্যবহার দেখাতে পারেন?

এই এক, উদাহরণস্বরূপ?

var warnUser = function (msg) {
    var calledCount = 0;
    return function() {
       calledCount++;
       alert(msg + '\nYou have been warned ' + calledCount + ' times.');
    };
};

var warnForTamper = warnUser('You can not tamper with our HTML.');
warnForTamper();
warnForTamper();

https://src-bin.com


Answer #1

ফ্রন্ট-শেষ জাভাস্ক্রিপ্টে আমরা যে কোডটি লিখি তা হল ইভেন্ট-ভিত্তিক - আমরা কিছু আচরণ সংজ্ঞায়িত করি, তারপরে ব্যবহারকারীর দ্বারা ট্রিগার (যেমন একটি ক্লিক বা কীপ্রেস) এটি সংযুক্ত করুন। আমাদের কোড সাধারণত একটি কলব্যাক হিসাবে সংযুক্ত করা হয়: একটি একক ফাংশন যা ইভেন্ট প্রতিক্রিয়া কার্যকর করা হয়। size12, size14, এবং size16 এখন ফাংশনগুলি যা শরীরের পাঠ্যকে যথাক্রমে 12, 14 এবং 16 পিক্সেলের আকারে রূপান্তরিত করবে। আমরা বোতামে (এই ক্ষেত্রে লিঙ্কগুলিতে) তাদের সাথে সংযুক্ত করতে পারি:

function makeSizer(size) {
    return function() {
    document.body.style.fontSize = size + 'px';
    };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

Fiddle


Answer #2

আপনি উদাহরণ দিতে একটি চমৎকার এক। Closures একটি বিমূর্ততা প্রক্রিয়া যা আপনাকে খুব পরিষ্কারভাবে উদ্বেগ পৃথক করার অনুমতি দেয়। আপনার উদাহরণ সেমেটিক্স থেকে একটি যন্ত্র (কল গণনা) পৃথক করার একটি কেস (একটি ত্রুটি রিপোর্টিং API)। অন্যান্য ব্যবহার অন্তর্ভুক্ত:

  1. একটি অ্যালগরিদম (ক্লাসিক উচ্চ ক্রম প্রোগ্রামিং) মধ্যে পরামিতি আচরণ পাস:

    function proximity_sort(arr, midpoint) {
        arr.sort(function(a, b) { a -= midpoint; b -= midpoint; return a*a - b*b; });
    }
  2. বস্তু ভিত্তিক প্রোগ্রামিং সিমুলেশন:

    function counter() {
        var a = 0;
        return {
            inc: function() { ++a; },
            dec: function() { --a; },
            get: function() { return a; },
            reset: function() { a = 0; }
        }
    }
  3. JQuery এর ইভেন্ট হ্যান্ডলিং এবং AJAX এপিআইগুলির মতো বহিরাগত প্রবাহ নিয়ন্ত্রণ বাস্তবায়ন করা।


Answer #3

আমি জানি এই প্রশ্নটির উত্তর দেওয়ার জন্য আমি খুব দেরিতে আছি কিন্তু এটি 2018 সালে যে কেউ উত্তরটি সন্ধান করতে সাহায্য করবে।

জাভাস্ক্রিপ্ট বন্ধকরণ আপনার অ্যাপ্লিকেশন throttle এবং debounce কার্যকারিতা বাস্তবায়নের জন্য ব্যবহার করা যেতে পারে।

থ্রোট্লিং :

থ্রোটলিং সময়সীমার সাথে একটি ফাংশনকে বলা যেতে পারে সর্বোচ্চ সংখ্যক হিসাবে সীমাবদ্ধ রাখে। যেমন "এই 100 টি মিলিসেকেন্ডে একবারে এই ফাংশনটি কার্যকর করুন।"

কোড:

const throttle = (func, limit) => {
  let isThrottling
  return function() {
    const args = arguments
    const context = this
    if (!isThrottling) {
      func.apply(context, args)
      isThrottling = true
      setTimeout(() => isThrottling = false, limit)
    }
  }
}

প্রত্যাবর্তন :

একটি নির্দিষ্ট ফাংশনটির উপর সীমাবদ্ধতা পুনরাবৃত্তি না হওয়া পর্যন্ত এটি নির্দিষ্ট না হওয়া পর্যন্ত একটি নির্দিষ্ট সময়সীমা অতিক্রম করা হয়। যেমন "100 টি মিলিসেকেন্ড এটির নাম্বার ছাড়াই পাস করলেই এই ফাংশনটি কার্যকর করুন।"

কোড:

const debounce = (func, delay) => {
  let debouncing
  return function() {
    const context = this
    const args = arguments
    clearTimeout(debouncing)
    debouncing = setTimeout(() => func.apply(context, args), delay)
  }
}

আপনি বন্ধ দেখতে পারেন দুটি সুন্দর বৈশিষ্ট্য বাস্তবায়নে সহায়তা করে যা প্রতিটি ওয়েব অ্যাপ্লিকেশনটিকে মসৃণ UI অভিজ্ঞতা কার্যকারিতা সরবরাহ করতে হবে।

আমি এটা কেউ সাহায্য করবে আশা করি।


Answer #4

আমি জিনিসগুলি করার মতো ক্লোজার ব্যবহার করেছি:

a = (function () {
    var privatefunction = function () {
        alert('hello');
    }

    return {
        publicfunction : function () {
            privatefunction();
        }
    }
})();

যেহেতু আপনি সেখানে দেখতে পারেন, এখন একটি অবজেক্ট publicfunction ( a.publicfunction() ) যা ব্যক্তিগত privatefunction কল privatefunction , যা শুধুমাত্র বন্ধের ভিতরে বিদ্যমান। আপনি সরাসরি ব্যক্তিগত privatefunction কল করতে পারবেন না (অর্থাত a.privatefunction() ), কেবল publicfunction()

এটি একটি সংক্ষিপ্ত উদাহরণ কিন্তু আপনি এটি ব্যবহার দেখতে পারেন? আমরা পাবলিক / প্রাইভেট পদ্ধতি প্রয়োগ করার জন্য এই ব্যবহার।


Answer #5

আমি মজিলার ফাংশন ফ্যাক্টরী example

function makeAdder(x) {

    return function(y) {
        return x + y;
    };
}

var addFive = makeAdder(5);

console.assert(addFive(2) === 7); 
console.assert(addFive(-5) === 0);

Answer #6

ইভেন্ট-হ্যান্ডলিং কোডটি সরল করার জন্য কীভাবে বন্ধগুলি ব্যবহার করা যেতে পারে সে সম্পর্কে কিছুটা আগে আমি একটি নিবন্ধ লিখেছিলাম। এটি ক্লায়েন্ট-পার্শ্ব jQuery এএসপি.NET ইভেন্ট পরিচালনাকে তুলনা করে।

http://www.hackification.com/2009/02/20/closures-simplify-event-handling-code/


Answer #7

এই থ্রেড কিভাবে বন্ধ কাজ কাজ সম্পর্কে একটি ভাল বোঝার অর্জন করতে অত্যন্ত সাহায্য করেছে। আমি আমার নিজের কিছু পরীক্ষা করেছি এবং এই নিখুঁত সরল কোডটি দিয়ে এসেছি যা কিছু অন্যান্য লোককে সাহায্য করতে পারে যে কিভাবে ব্যবহারিক পদ্ধতিতে বন্ধকরণগুলি ব্যবহার করা যায় এবং স্ট্যাটিকের মতো পরিবর্তনশীলগুলি বজায় রাখার জন্য বিভিন্ন স্তরের ক্লোজারটি কীভাবে ব্যবহার করতে হয়। / অথবা বৈশ্বিক ভেরিয়েবলগুলির সাথে ওভাররাইট বা বিভ্রান্ত হওয়ার ঝুঁকি ছাড়াই গ্লোবাল ভেরিয়েবল। এটি কী করে বাটন ক্লিকগুলি ট্র্যাক রাখে, প্রতিটি স্থানীয় বাটন এবং স্থানীয় স্তরের উভয় ক্ষেত্রেই, প্রতিটি বোতাম ক্লিক গণনা করে, একটি একক চিত্রের দিকে অবদান রাখে। উল্লেখ্য, আমি এটি করার জন্য কোন বিশ্বব্যাপী ভেরিয়েবল ব্যবহার করি নি, যা ব্যায়ামের বিন্দু - যা একটি হ্যান্ডলার আছে যা কোন বোতামে প্রয়োগ করা যেতে পারে যা বিশ্বব্যাপী কিছুতে অবদান রাখে।

বিশেষজ্ঞদের দয়া করে, আমি এখানে কোন খারাপ অনুশীলন করেছি যদি আমাকে জানাতে! আমি এখনও নিজেকে এই জিনিস শেখা।

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Closures on button presses</title>
<script type="text/javascript">

window.addEventListener("load" , function () {
    /*
    grab the function from the first closure,
    and assign to a temporary variable 
    this will set the totalButtonCount variable
    that is used to count the total of all button clicks

    */
    var buttonHandler = buttonsCount(); 

    /*
    using the result from the first closure (a function is returned) 
    assign and run the sub closure that carries the 
    individual variable for button count and assign to the click handlers 
    */
    document.getElementById("button1").addEventListener("click" , buttonHandler() );
    document.getElementById("button2").addEventListener("click" , buttonHandler() );
    document.getElementById("button3").addEventListener("click" , buttonHandler() );

    // Now that buttonHandler has served its purpose it can be deleted if needs be
    buttonHandler = null;
});



function buttonsCount() {
    /* 
        First closure level 
        - totalButtonCount acts as a sort of global counter to count any button presses
    */
    var totalButtonCount = 0;

    return  function () {
        //second closure level
        var myButtonCount = 0;

        return function (event) {
            //actual function that is called on the button click
            event.preventDefault();
            /*  
               increment the button counts.
               myButtonCount only exists in the scope that is 
               applied to each event handler, therefore acts 
               to count each button individually whereas because 
               of the first closure totalButtonCount exists at 
               the scope just outside, so maintains a sort 
               of static or global variable state 
            */

            totalButtonCount++;
            myButtonCount++;

            /* 
                do something with the values ... fairly pointless 
                but it shows that each button contributes to both 
                it's own variable and the outer variable in the 
                first closure 
            */
            console.log("Total button clicks: "+totalButtonCount);
            console.log("This button count: "+myButtonCount);
        }
    }
}

</script>
</head>

<body>
    <a href="#" id="button1">Button 1</a>
    <a href="#" id="button2">Button 2</a>
    <a href="#" id="button3">Button 3</a>
</body>
</html>

Answer #8

এখানে আমার ক্লোজার ধারণাটির একটি সহজ উদাহরণ রয়েছে যা আমরা আমাদের ই-কমার্স সাইটে বা অন্য অনেককেও ব্যবহার করতে পারি। আমি উদাহরণ সহ আমার jsfiddle লিঙ্ক যোগ করছি। এটা 3 আইটেম এবং এক কার্ট কাউন্টার একটি ছোট পণ্য তালিকা রয়েছে।

Jsfiddle

//Counter clouser implemented function;
var CartCouter = function(){
	var counter = 0;
  function changeCounter(val){
  	counter += val
  }
  return {
  	increment: function(){
    	changeCounter(1);
    },
    decrement: function(){
    changeCounter(-1);
    },
    value: function(){
    return counter;
    }
  }
}

var cartCount = CartCouter();
function updateCart(){
	document.getElementById('cartcount').innerHTML = cartCount.value();
  }

var productlist = document.getElementsByClassName('item');
for(var i = 0; i< productlist.length; i++){
	productlist[i].addEventListener('click',function(){
  	if(this.className.indexOf('selected')<0){
    		this.className += " selected";
        cartCount.increment();
        updateCart();
    } else{
    	this.className = this.className.replace("selected", "");
      cartCount.decrement();
      updateCart();
    }
  })
}
.productslist{
  padding:10px;
}
ul li{
  display: inline-block;
  padding: 5px;
  border: 1px solid #ddd;
  text-align: center;
  width: 25%;
  cursor: pointer;
}
.selected{
  background-color: #7CFEF0;
  color: #333;
}
.cartdiv{
  position: relative;
  float:right;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #f1f1f1;
}
<div>
<h3>
Practical Use of JavaScript Closure consept/private variable.
</h3>
<div class="cartdiv">
    <span id="cartcount">0</span>
</div>
<div class="productslist">
    <ul >
    <li class="item">Product 1</li>
     <li class="item">Product 2</li>
     <li class="item">Product 3</li>
    </ul>

</div>
</div>


Answer #9

এখানে, আমি একটি অভিবাদন যে আমি বেশ কয়েকবার বলতে চাই। আমি বন্ধ করে দিলে, আমি কেবল অভিবাদন রেকর্ড করতে সেই ফাংশনটি কল করতে পারি। যদি আমি বন্ধ না করে থাকি, আমাকে প্রত্যেক নামতে আমার নামটি পাস করতে হবে।

কোনও ক্লোজার ছাড়াই ( https://jsfiddle.net/lukeschlangen/pw61qrow/3/ ):

function greeting(firstName, lastName) {
  var message = "Hello " + firstName + " " + lastName + "!";
  console.log(message);
}

greeting("Billy", "Bob");
greeting("Billy", "Bob");
greeting("Billy", "Bob");
greeting("Luke", "Schlangen");
greeting("Luke", "Schlangen");
greeting("Luke", "Schlangen");

বন্ধের সাথে ( https://jsfiddle.net/lukeschlangen/Lb5cfve9/3/ ):

function greeting(firstName, lastName) {
  var message = "Hello " + firstName + " " + lastName + "!";

  return function() {
    console.log(message);
  }
}

var greetingBilly = greeting("Billy", "Bob");
var greetingLuke = greeting("Luke", "Schlangen");

greetingBilly();
greetingBilly();
greetingBilly();
greetingLuke();
greetingLuke();
greetingLuke();

Answer #10

জাভাস্ক্রিপ্ট মডিউল প্যাটার্ন বন্ধ ব্যবহার করে এর চমৎকার প্যাটার্ন আপনাকে কিছু "পাবলিক" এবং "প্রাইভেট" ওয়ারসের মতো কিছু করার অনুমতি দেয়।

var myNamespace = (function () {

  var myPrivateVar, myPrivateMethod;

  // A private counter variable
  myPrivateVar = 0;

  // A private function which logs any arguments
  myPrivateMethod = function( foo ) {
      console.log( foo );
  };

  return {

    // A public variable
    myPublicVar: "foo",

    // A public function utilizing privates
    myPublicFunction: function( bar ) {

      // Increment our private counter
      myPrivateVar++;

      // Call our private method using bar
      myPrivateMethod( bar );

    }
  };

})();

Answer #11

জাভাস্ক্রিপ্টে (বা কোনও ইসিএমএসস্ক্রিপ্ট) ভাষাতে, বিশেষত, বন্ধনগুলি কার্যকারিতা বাস্তবায়নের ক্ষেত্রে লুকিয়ে থাকে যদিও এখনও ইন্টারফেস প্রকাশ করে।

উদাহরণস্বরূপ, কল্পনা করুন যে আপনি একটি তারিখের ইউটিলিটি পদ্ধতি লেখেন এবং আপনি ব্যবহারকারীদের সূচকের দ্বারা সপ্তাহান্তের নামগুলি দেখতে অনুমতি দিতে চান তবে আপনি তাদের হুডের অধীনে ব্যবহার করা নামগুলির অ্যারে সংশোধন করতে পারবেন না।

var dateUtil = {
  weekdayShort: (function() {
    var days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    return function(x) {
      if ((x != parseInt(x)) || (x < 1) || (x > 7)) {
        throw new Error("invalid weekday number");
      }
      return days[x - 1];
    };
  }())
};

মনে রাখবেন যে days অ্যারেটি কেবলমাত্র dateUtil একটি সম্পত্তি হিসাবে বস্তু হিসাবে সংরক্ষণ করা যেতে পারে তবে এটি স্ক্রিপ্টের ব্যবহারকারীদের কাছে দৃশ্যমান হবে এবং যদি তারা আপনার সোর্স কোডের প্রয়োজন ছাড়াই এটিও পরিবর্তন করতে পারে। যাইহোক, এটি অ্যানিমেশন ফাংশন দ্বারা আবদ্ধ রয়েছে যা তারিখ সন্ধানের ফাংশনটি ফেরত দেয়, এটি কেবল লুকআপ ফাংশন দ্বারা অ্যাক্সেসযোগ্য তাই এটি এখন ছদ্মবেশ-প্রমাণ।


Answer #12

ধরুন, আপনি কতবার ওয়েবপৃষ্ঠায় একটি বোতামে ক্লিক করেছেন তার সংখ্যা গণনা করতে চান।
এই জন্য, আপনি পরিবর্তনশীল গণনা আপডেট বাটন onclick ইভেন্ট একটি ফাংশন ট্রিগার করা হয়

<button onclick="updateClickCount()">click me</button>  

এখন অনেক মতামত হতে পারে:

1) আপনি একটি বৈশ্বিক পরিবর্তনশীল , এবং পাল্টা বৃদ্ধি একটি ফাংশন ব্যবহার করতে পারে:

var counter = 0;

function updateClickCount() {
    ++counter;
    // do something with counter
}

কিন্তু, pitfall হল যে কোনও স্ক্রিপ্ট updateClickCount() কল না করে কাউন্টার পরিবর্তন করতে পারে

2) এখন, আপনি ফাংশনের ভেরিয়েবল ঘোষণা করার কথা ভাবছেন:

function updateClickCount() {
    var counter = 0;
    ++counter;
    // do something with counter
}

কিন্তু, আরে! প্রত্যেকবার updateClickCount() ফাংশন বলা হয়, পাল্টা আবার 1 সেট করা হয়।

3) Nested ফাংশন সম্পর্কে চিন্তা?

নেস্টেড ফাংশন তাদের "উপরে" সুযোগ অ্যাক্সেস আছে।
এই উদাহরণে, অভ্যন্তরীণ ফাংশন updateClickCount() countWrapper() পিতার ফাংশন countWrapper() পাল্টা পরিবর্তনশীল অ্যাক্সেস রয়েছে countWrapper()

function countWrapper() {
    var counter = 0;
    function updateClickCount() {
    ++counter;
    // do something with counter
    }
    updateClickCount();    
    return counter; 
}

এটি কাউন্টার updateClickCount() সমাধান করতে পারে, যদি আপনি বাইরে থেকে updateClickCount() ফাংশনটি updateClickCount() করতে পারেন এবং আপনাকে updateClickCount() একবার শুধুমাত্র counter = 0 চালানোর উপায় খুঁজে বের করতে হবে।

4) রেসকিউ বন্ধ! (স্ব-উদ্দীপক ফাংশন) :

 var updateClickCount=(function(){
    var counter=0;

    return function(){
     ++counter;
     // do something with counter
    }
})();

স্ব-invoking ফাংশন শুধুমাত্র একবার রান। এটি counter শূন্য (0) সেট করে এবং একটি ফাংশন অভিব্যক্তি প্রদান করে।

এই ভাবে updateClickCount একটি ফাংশন হয়ে। "বিস্ময়কর" অংশ এটি পিতামাতার সুযোগে পাল্টা অ্যাক্সেস করতে পারে।

এটি একটি জাভাস্ক্রিপ্ট বন্ধ করা হয় । এটি একটি ফাংশন " ব্যক্তিগত " ভেরিয়েবল আছে জন্য এটি সম্ভব করে তোলে।

counter বেনামী ফাংশনের সুযোগ দ্বারা সুরক্ষিত, এবং যোগ ফাংশন ব্যবহার করে শুধুমাত্র পরিবর্তন করা যেতে পারে!

বন্ধের উপর আরো প্রাণবন্ত উদাহরণ:

  <script>
    var updateClickCount=(function(){
    var counter=0;

    return function(){
    ++counter;
     document.getElementById("spnCount").innerHTML=counter;
    }
  })();
</script>

<html>
 <button onclick="updateClickCount()">click me</button>
  <div> you've clicked 
    <span id="spnCount"> 0 </span> times!
 </div>
</html>

Answer #13

প্রদত্ত নমুনাতে সংযুক্ত ভেরিয়েবল 'পাল্টা' এর মান সুরক্ষিত এবং কেবলমাত্র প্রদত্ত ফাংশনগুলি ব্যবহার করে পরিবর্তন করা যেতে পারে (বৃদ্ধি, হ্রাস)। কারণ এটি বন্ধ করা হয়,

var MyCounter= function (){
    var counter=0;
    return {
    	increment:function () {return counter += 1;},
        decrement:function () {return counter -= 1;},
        get:function () {return counter;}
    };
};

var x = MyCounter();
//or
var y = MyCounter();

alert(x.get());//0
alert(x.increment());//1
alert(x.increment());//2

alert(y.increment());//1
alert(x.get());// x is still 2


Answer #14

বন্ধন generators তৈরি করার একটি কার্যকর উপায়, একটি ক্রম অন-চাহিদা বৃদ্ধি:

    var foobar = function(i){var count = count || i; return function(){return ++count;}}

    baz = foobar(1);
    console.log("first call: " + baz()); //2
    console.log("second call: " + baz()); //3

নিম্নরূপ পার্থক্য সারসংক্ষেপ করা হয়:

Anonymous functions                                    Defined functions

Cannot be used as a method                             Can be used as a method of an object

Exists only in the scope in which it is defined        Exists within the object it is defined in

Can only be called in the scope in which it is defined Can be called at any point in the code

Can be reassigned a new value or deleted               Cannot be deleted or changed

তথ্যসূত্র


Answer #15

বন্ধের জন্য আরেকটি সাধারণ ব্যবহার এটি একটি নির্দিষ্ট বস্তুর একটি পদ্ধতিতে আবদ্ধ করা, এটি অন্য কোথাও বলা যেতে পারে (যেমন একটি ইভেন্ট হ্যান্ডলার)।

function bind(obj, method) {
    if (typeof method == 'string') {
        method = obj[method];
    }
    return function () {
        method.apply(obj, arguments);
    }
}
...
document.body.addEventListener('mousemove', bind(watcher, 'follow'), true);

যখনই একটি মৌমাছি ঘটনা আগুন, watcher.follow(evt) বলা হয়।

ক্লোজারগুলি উচ্চ-ক্রম ফাংশনগুলির একটি অপরিহার্য অংশও, যা ভিন্ন অংশগুলিকে পরামিতি দ্বারা একক উচ্চ ক্রমের ফাংশন হিসাবে একাধিক অনুরূপ ফাংশন পুনর্লিখনের সাধারণ প্যাটার্নের অনুমতি দেয়। একটি বিমূর্ত উদাহরণ হিসাবে,

foo_a = function (...) {A a B}
foo_b = function (...) {A b B}
foo_c = function (...) {A c B}

হয়ে

fooer = function (x) {
    return function (...) {A x B}
}

যেখানে A এবং B সিনট্যাক্টিক ইউনিট নয় তবে সোর্স কোড স্ট্রিংগুলি (স্ট্রিং লিটারাল নয়)।

একটি কংক্রিট উদাহরণ জন্য " একটি ফাংশন সঙ্গে আমার জাভাস্ক্রিপ্ট streamlining " দেখুন।


Answer #16

যদি আপনি বস্তুর ভিত্তিক অর্থে একটি শ্রেণী তাত্ক্ষণিকভাবে ধারণ করতে পারেন (অর্থাত্ সেই শ্রেণির একটি বস্তু তৈরি করতে) তবে আপনি বন্ধের বোঝার কাছাকাছি।

এভাবে চিন্তা করুন: যখন আপনি দুটি ব্যক্তি বস্তুগুলি তাত্ক্ষণিক করেন তখন আপনি জানেন যে ক্লাস সদস্য পরিবর্তনশীল "নাম" উদাহরণগুলির মধ্যে ভাগ করা হয় না; প্রতিটি বস্তুর নিজস্ব কপি আছে। একইভাবে, যখন আপনি একটি ক্লোজার তৈরি করেন, তখন ফ্রি ভেরিয়েবল (উপরের আপনার উদাহরণে 'কলকাতা') ফাংশনের 'দৃষ্টান্ত' থেকে আবদ্ধ।

আমি মনে করি আপনার ধারণাগত লীপটি সামান্যই হুমকির মুখে রয়েছে যে alert_ser ফাংশন দ্বারা ফেরত প্রতিটি ফাংশন / ক্লোজার (সরাইয়া: এটি একটি উচ্চ-ক্রিয়া ফাংশন ) ক্লোজারটি একই প্রাথমিক মান (0) সহ 'কলাউন্ট' বন্ধ করে দেয়, যখন প্রায়ই বন্ধ হয়ে যায় উচ্চতর ক্রম ফাংশনে বিভিন্ন সূচনাকারীগুলিকে পাস করা আরও বেশি কার্যকর, যা একটি শ্রেণির কন্সট্রাকটরকে বিভিন্ন মানগুলি পাস করার মতো।

সুতরাং, ধরুন যখন 'কলআউট' একটি নির্দিষ্ট মান পৌঁছায় তবে আপনি ব্যবহারকারীর অধিবেশন শেষ করতে চান; স্থানীয় নেটওয়ার্ক বা বড় খারাপ ইন্টারনেট থেকে অনুরোধ আসে কিনা তা নির্ভর করে আপনি এর জন্য বিভিন্ন মান চান। (হ্যাঁ, এটি একটি রূপান্তরিত উদাহরণ)। এটি অর্জন করতে, আপনি alertUser (অর্থাত -3, বা 0?) মধ্যে callCount জন্য বিভিন্ন প্রাথমিক মান পাস করতে পারে।

সাহিত্যে সমস্যাটির অংশটি তাদের বর্ণনা করার জন্য ব্যবহৃত নামকরণ ("লেক্সিকাল সুযোগ", "বিনামূল্যে ভেরিয়েবল")। এটা আপনাকে বোকা যাক না, বন্ধ প্রদর্শিত হবে তুলনায় আরো সহজ ... প্রথম চেহারা ;-)


Answer #17

রেফারেন্স: বন্ধের ব্যবহারিক ব্যবহার

প্র্যাকটিস ক্লোজারে মার্জিত ডিজাইন তৈরি করতে পারে, বিভিন্ন হিসাবের কাস্টমাইজেশন, বিলম্বিত কলগুলি, কলব্যাকস, এনক্যাপাসুলেটেড সুযোগ ইত্যাদি তৈরি করতে পারে।

উদাহরণস্বরূপ অ্যারের সাজানোর পদ্ধতি যা সাজানোর শর্ত হিসাবে স্বীকৃতি দেয়:

[1, 2, 3].sort(function (a, b) {
    ... // sort conditions
});

ম্যাপিং ফাংশনগুলি অ্যারের মানচিত্র পদ্ধতি হিসাবে যা একটি নতুন অ্যারেকে কার্যকরী যুক্তি অনুসারে ম্যাপ করে:

[1, 2, 3].map(function (element) {
   return element * 2;
}); // [2, 4, 6]

প্রায়শই এটি অনুসন্ধানের জন্য প্রায় সীমাহীন শর্ত সংজ্ঞায়িত কার্যকরী আর্গুমেন্টগুলি ব্যবহার করে অনুসন্ধান ফাংশন বাস্তবায়ন করার সুবিধাজনক।

 someCollection.find(function (element) {
        return element.someProperty == 'searchCondition';
    });

এছাড়াও, আমরা প্রয়োগকারী ফাংশনগুলিকে নোট করতে পারি, উদাহরণস্বরূপ, একটি সম্পূর্ণ পদ্ধতি যা উপাদানগুলির একটি অ্যারেতে একটি ফাংশন প্রয়োগ করে:

[1, 2, 3].forEach(function (element) {
    if (element % 2 != 0) {
        alert(element);
    }
}); // 1, 3

একটি ফাংশন আর্গুমেন্টগুলিতে প্রয়োগ করা হয় (আর্গুমেন্টগুলির একটি তালিকাতে - প্রয়োগ করতে, এবং আর্গুমেন্টগুলিতে অবস্থান করতে - কল করুন):

(function () {
  alert([].join.call(arguments, ';')); // 1;2;3
}).apply(this, [1, 2, 3]);

বিলম্বিত কল:

var a = 10;
    setTimeout(function () {
      alert(a); // 10, after one second
    }, 1000);

কলব্যাক ফাংশন:

var x = 10;
// only for example
xmlHttpRequestObject.onreadystatechange = function () {
  // callback, which will be called deferral ,
  // when data will be ready;
  // variable "x" here is available,
  // regardless that context in which,
  // it was created already finished
  alert(x); // 10
};

সহায়ক বস্তু গোপন উদ্দেশ্যে একটি encapsulated সুযোগ সৃষ্টি:

var foo = {};
(function (object) {
  var x = 10;
  object.getX = function _getX() {
    return x;
  };
})(foo);
alert(foo.getX());// get closured "x" – 10

Answer #18

হ্যাঁ, এটি একটি কার্যকর বন্ধের একটি ভাল উদাহরণ। AlertUser এর কলটি তার সুযোগে calledCount পরিবর্তনশীল তৈরি করে এবং একটি ফাঁকা ফাংশনটি ফেরত দেয় যা warnForTamper পরিবর্তনশীলতে সংরক্ষিত থাকে। তথাকথিত Callount ভেরিয়েবলের বন্ধ করার জন্য এখনও এটি ব্যবহার করা হয়েছে, এটি ফাংশনের প্রস্থানের পরে মুছে ফেলা হয় না, তাই warnForTamper() এ প্রতিটি কল warnForTamper() পরিবর্তনশীলকে বাড়িয়ে দেবে এবং মানটি সতর্ক করবে।

স্ট্যাকঅভারফ্লোতে আমি দেখি এমন সবচেয়ে সাধারণ সমস্যা হল যে কেউ প্রতিটি লুপে যে পরিবর্তনশীলটি বৃদ্ধি পায় তার "বিলম্ব" করতে চায়, কিন্তু কারণ পরিবর্তনশীলটি স্কপ করা হয়, তারপরে পরিবর্তনশীলের প্রতিটি রেফারেন্স লুপটি শেষ হওয়ার পরে হতে পারে, যার ফলে পরিবর্তনশীল শেষ অবস্থা:

for (var i = 0; i < someVar.length; i++)
    window.setTimeout(function () { 
        alert("Value of i was "+i+" when this timer was set" )
    }, 10000);

এই প্রতিটি সতর্কতা i একই মান দেখানোর ফলে, লুপ শেষ যখন মান বৃদ্ধি ছিল। সমাধান একটি নতুন বন্ধ, পরিবর্তনশীল জন্য একটি পৃথক সুযোগ তৈরি করা হয়। এটি একটি অবিলম্বে নির্বাহিত বেনামী ফাংশন ব্যবহার করে সম্পন্ন করা যেতে পারে, যা পরিবর্তনশীল গ্রহণ করে এবং তার রাষ্ট্রকে একটি যুক্তি হিসাবে সঞ্চয় করে:

for (var i = 0; i < someVar.length; i++)
    (function (i) {
        window.setTimeout(function () { 
            alert("Value of i was "+i+" when this timer was set" )
        }, 10000);
    })(i); 


Answer #20

বন্ধনের ব্যবহার:

বন্ধন জাভাস্ক্রিপ্ট সবচেয়ে শক্তিশালী বৈশিষ্ট্য এক। জাভাস্ক্রিপ্ট ফাংশন নেস্টিংয়ের জন্য অনুমতি দেয় এবং অভ্যন্তরীণ ফাংশনটি বাইরের ফাংশনের ভিতরে সংজ্ঞায়িত সমস্ত ভেরিয়েবল এবং ফাংশনগুলিতে পূর্ণ অ্যাক্সেস দেয় (এবং অন্যান্য ফাংশন এবং ফাংশন যা বাইরের ফাংশনটিতে অ্যাক্সেস থাকে)। যাইহোক, বহিরাগত ফাংশন অভ্যন্তরীণ ফাংশন ভিতরে সংজ্ঞায়িত ভেরিয়েবল এবং ফাংশন অ্যাক্সেস নেই। এটি ভিতরের ফাংশনের ভেরিয়েবলগুলির জন্য একটি ধরণের সুরক্ষা সরবরাহ করে। এছাড়াও, অভ্যন্তরীণ ফাংশন বাইরের ফাংশনের সুযোগের অ্যাক্সেসের সাথে সাথে বাইরের ফাংশনে সংজ্ঞায়িত ভেরিয়েবল এবং ফাংশন বাহ্যিক ফাংশনের চেয়ে বেশি সময় বাঁচবে, যদি অভ্যন্তরীণ ফাংশন বাহ্যিক ফাংশনের জীবনের বাইরেও বেঁচে থাকে। অভ্যন্তরীণ ফাংশন বাইরের ফাংশনের বাইরের কোনও সুযোগের জন্য উপলব্ধ করা হয় যখন একটি বন্ধন তৈরি করা হয়।

উদাহরণ:

<script>
var createPet = function(name) {
  var sex;

  return {
    setName: function(newName) {
      name = newName;
    },

    getName: function() {
      return name;
    },

    getSex: function() {
      return sex;
    },

    setSex: function(newSex) {
      if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
        sex = newSex;
      }
    }
  }
}

var pet = createPet("Vivie");
console.log(pet.getName());                  // Vivie

console.log(pet.setName("Oliver"));   
console.log(pet.setSex("male"));
console.log(pet.getSex());                   // male
console.log(pet.getName());                  // Oliver
</script>

উপরের কোডে বাইরের ফাংশনের নাম পরিবর্তনশীল অভ্যন্তরীণ ফাংশনগুলিতে অ্যাক্সেসযোগ্য এবং ভিতরের ফাংশন ব্যতীত অভ্যন্তরীণ ভেরিয়েবলগুলি অ্যাক্সেস করার অন্য কোন উপায় নেই। ভেতরের ফাংশনের ভেতরের ভেরিয়েবল ভিতরের ফাংশনের জন্য নিরাপদ স্টোর হিসাবে কাজ করে। তারা "স্থায়ী", এখনো নিরাপদ, অভ্যন্তরীণ ফাংশন সঙ্গে কাজ করার জন্য তথ্য রাখা। ফাংশন এমনকি একটি পরিবর্তনশীল বরাদ্দ করা হবে না, অথবা একটি নাম আছে। বিস্তারিত জানার জন্য here পড়ুন





terminology