proxy() से Context Bind करना
In this page:
var bound = $.proxy(function, context);proxy() क्या है?
$.proxy() एक नया function return करता है जो हमेशा एक fixed this value के साथ चलता है, चाहे वह function बाद में कैसे भी या कहीं भी call हो।
उदाहरण: What is proxy()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const obj = {
name: "Widget",
show: function() { console.log(this.name); }
};
const bound = $.proxy(obj.show, obj);
bound();
</script>
</body>
</html>Context क्यों मायने रखता है
एक callback — जैसे कोई event handler या setTimeout function — अक्सर उस object से अलग this value के साथ चलता है जिसमें वह originally define किया गया था।
उदाहरण: Why Context Matters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
const obj = {
name: "Widget",
handleClick: function() { console.log(this.name); }
};
$("#btn").on("click", obj.handleClick);
// logs undefined -- this is the button, not obj
</script>
</body>
</html>proxy() के साथ Arguments Pass करना
proxy() अपनी this value fix करने के अलावा किसी function से arguments भी bind कर सकता है, जो तब उपयोगी है जब किसी event handler या callback को extra context चाहिए।
उदाहरण: Pass Arguments with proxy()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
function greet(greeting) { console.log(greeting, this.name); }
const obj = {name: "Alice"};
const bound = $.proxy(greet, obj);
bound("Hello");
</script>
</body>
</html>Events के साथ proxy इस्तेमाल करना
Events अक्सर callbacks को ऐसे तरीकों से pass करते हैं जो expected this binding को तोड़ देते हैं — उदाहरण के लिए, सीधे click handler के रूप में इस्तेमाल किया गया एक method अपना।
उदाहरण: Use proxy with Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
const obj = {
name: "Widget",
handleClick: function() { console.log(this.name); }
};
$("#btn").on("click", $.proxy(obj.handleClick, obj));
</script>
</body>
</html>एक छोटा proxy() Project
proxy() सबसे valuable तब है जब किसी object की अपनी methods को standalone callbacks की तरह इस्तेमाल किया जाता है — timers, event handlers, या AJAX completion functions के लिए।
उदाहरण: Small proxy() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const timer = {
label: "Countdown",
tick: function() { console.log(this.label, "ticking"); }
};
setTimeout($.proxy(timer.tick, timer), 100);
</script>
</body>
</html>- एक method को
$("#btn").on("click", obj.greet)जैसे callback की तरह pass करना औरthisकोobjके बजाय button पाना, जो problem$.proxy(obj.greet, obj)solve करता है। - argument order swap कर देना, जबकि
$.proxy(function, context)पहले function लेता है और दूसरा context। - नए 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: