← Back to jQuery Course | Chapter 11: Utility Methods | Lesson 5 of 6

proxy() से Context Bind करना

proxy method एक fixed this value वाला function बनाता है। जब callbacks को एक specific object context चाहिए तब यह उपयोगी है।

In this page:

  1. proxy() क्या है?
  2. Context क्यों मायने रखता है
  3. proxy() के साथ Arguments Pass करना
  4. Events के साथ proxy इस्तेमाल करना
  5. एक छोटा proxy() Project
Syntax
javascript 
var bound = $.proxy(function, context);

proxy() क्या है?

$.proxy() एक नया function return करता है जो हमेशा एक fixed this value के साथ चलता है, चाहे वह function बाद में कैसे भी या कहीं भी call हो।

उदाहरण: What is proxy()?

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    function init() {
      const obj = {
        name: "Widget",
        show: function() { $("#output").append($("<div>").text(String(this.name))); }
      };
      const bound = $.proxy(obj.show, obj);
      bound();
    }
    init();

    $("#resetBtn").click(function() {
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Context क्यों मायने रखता है

एक callback — जैसे कोई event handler या setTimeout function — अक्सर उस object से अलग this value के साथ चलता है जिसमें वह originally define किया गया था।

उदाहरण: Why Context Matters

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    .btn { display:inline-block; padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border-radius:4px; cursor:pointer; font:13px sans-serif; }
    #resetBtn.btn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <span id="resetBtn" class="btn" role="button">Reset</span>
  <section id="demo">
    <button id="btn">Click</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      const obj = {
        name: "Widget",
        handleClick: function() { $("#output").append($("<div>").text(String(this.name))); }
      };
      $("#btn").on("click", obj.handleClick);
      // logs undefined -- this is the button, not obj
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

proxy() के साथ Arguments Pass करना

proxy() अपनी this value fix करने के अलावा किसी function से arguments भी bind कर सकता है, जो तब उपयोगी है जब किसी event handler या callback को extra context चाहिए।

उदाहरण: Pass Arguments with proxy()

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    function init() {
      function greet(greeting) { $("#output").append($("<div>").text(String(greeting) + " " + this.name)); }
      const obj = {name: "Alice"};
      const bound = $.proxy(greet, obj);
      bound("Hello");
    }
    init();

    $("#resetBtn").click(function() {
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Events के साथ proxy इस्तेमाल करना

Events अक्सर callbacks को ऐसे तरीकों से pass करते हैं जो expected this binding को तोड़ देते हैं — उदाहरण के लिए, सीधे click handler के रूप में इस्तेमाल किया गया एक method अपना।

उदाहरण: Use proxy with Events

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button id="btn">Click</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      const obj = {
        name: "Widget",
        handleClick: function() { $("#output").append($("<div>").text(String(this.name))); }
      };
      $("#btn").on("click", $.proxy(obj.handleClick, obj));
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

एक छोटा proxy() Project

proxy() सबसे valuable तब है जब किसी object की अपनी methods को standalone callbacks की तरह इस्तेमाल किया जाता है — timers, event handlers, या AJAX completion functions के लिए।

उदाहरण: Small proxy() Project

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const timer = {
        label: "Countdown",
        tick: function() { $("#output").text(String(this.label) + "ticking"); }
      };
      setTimeout($.proxy(timer.tick, timer), 100);
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

on() से Event Binding · extend() से Objects Merge करना · DOM Nodes पर Metadata Store करना · Array के Helper टूल्स

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. एक method को $("#btn").on("click", obj.greet) जैसे callback की तरह pass करना और this को obj के बजाय button पाना, जो problem $.proxy(obj.greet, obj) solve करता है।
  2. argument order swap कर देना, जबकि $.proxy(function, context) पहले function लेता है और दूसरा context।
  3. नए code में $.proxy() इस्तेमाल करना, जबकि यह jQuery 3.3 से deprecated है और Function.prototype.bind() या arrow functions वही काम करते हैं।
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson Merging Objects with extend() Next Lesson → Storing Metadata on DOM Nodes

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.