在JavaScript里，this 关键字的指向一直是很多开发者头疼的问题。特别是在事件回调中，this 默认指向触发事件的DOM元素，但你的业务逻辑可能希望它指向某个特定的对象实例。$.proxy() 就是jQuery提供的一个解决这类上下文绑定问题的工具方法。
它的核心作用是：接收一个已有的函数，返回一个新的函数，这个新函数的 this 上下文被固定为你指定的对象。无论这个新函数在哪里被调用，它内部的 this 都会稳定地指向你预设的那个上下文。
为什么不用原生的 Function.prototype.bind()？
可能有人会问，现在JavaScript已经有原生的 bind() 方法了，$.proxy() 还有什么存在价值？回溯一下时间线，$.proxy() 在jQuery 1.4版本就引入了，而原生 bind() 直到ES5才被标准化，在IE8等老浏览器中根本不支持。jQuery当年推出这个方法，就是为开发者提供一个跨浏览器一致的解决方案。
到了2026年的今天，如果你的项目已经不依赖jQuery，直接在函数上调用 .bind(context) 是更原生的做法。但如果你的代码库里jQuery本身就是基础设施的一部分，用 $.proxy() 保持代码风格统一，并且在维护老代码时减少心智负担，也有它的道理。这不分好坏，只是看项目语境。
语法详解
$.proxy() 有两种传参方式，适应不同的使用习惯。
方式一：直接传入函数和上下文
jQuery.proxy(function, context)
-
function：要被绑定的那个已有函数。
-
context：希望函数内部
this指向的那个对象。
这种方式适合函数已经定义好，你只需要改变它的执行上下文。
方式二：传入上下文对象和函数名
jQuery.proxy(context, name)
-
context：希望成为
this指向的对象。 -
name：函数名，注意它是作为
context对象的一个属性存在的，以字符串形式传入。
这种方式在你有一个对象包含多个方法，想把其中某个方法抽出来单独绑定上下文时用起来很方便。
实战示例一：在事件回调中保持对象上下文
这个例子展示了一个实际痛点——在构造函数的原型方法里绑定点击事件，如何让回调中的 this 指向实例本身而不是被点击的DOM元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery.proxy() 绑定上下文示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>点击按钮查看上下文指向</h2>
<p>当前触发事件的元素标签名会通过alert展示，同时实例属性也会被访问。</p>
<button id="actionBtn">点击我</button>
<div id="info-panel"></div>
<script>
$(document).ready(function() {
// 定义一个构造函数
function TaskManager() {
this.taskName = "数据同步任务";
this.status = "就绪";
}
// 原型上添加事件绑定的方法
TaskManager.prototype.bindEvents = function() {
// 关键点：用$.proxy把回调的this锁定为当前TaskManager实例
$("#actionBtn").click($.proxy(this.handleClick, this));
};
// 原型上添加事件处理方法
TaskManager.prototype.handleClick = function(event) {
// 这里的this指向TaskManager实例，而不是按钮DOM
// event.currentTarget才是被点击的按钮元素
var elementTag = event.currentTarget.tagName;
alert("触发事件的元素是: " + elementTag + "\n当前任务名称: " + this.taskName);
};
// 创建实例并绑定事件
var manager = new TaskManager();
manager.bindEvents();
});
</script>
</body>
</html>
在这个示例中，如果没有 $.proxy() 的包装，handleClick 里的 this 会指向被点击的 button 元素，this.taskName 就会是 undefined。通过 $.proxy(this.handleClick, this)，我们把 this 牢牢绑定在了 TaskManager 这个实例上，同时依然能通过 event.currentTarget 拿到触发事件的DOM元素，两者互不干扰。
实战示例二：用上下文加函数名的方式绑定对象方法
这个例子演示第二种语法——在一个字面量对象里定义好方法，然后通过对象名和方法名来绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery.proxy() 对象方法绑定</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>查看用户信息</h2>
<p>点击按钮后，会在下方展示对象内部的数据。</p>
<button id="showBtn">显示用户资料</button>
<p id="output-area"></p>
<script>
$(document).ready(function() {
// 定义一个包含数据和方法的学生对象
var student = {
name: "李明",
age: 22,
major: "计算机科学与技术",
grade: "本科四年级",
showInfo: function() {
var infoHtml = "<b>姓名:</b> " + this.name + "<br>" +
"<b>年龄:</b> " + this.age + "<br>" +
"<b>专业:</b> " + this.major + "<br>" +
"<b>年级:</b> " + this.grade;
$("#output-area").html(infoHtml);
}
};
// 使用第二种语法：传入上下文对象和要绑定的方法名
// showInfo内部的this会指向student对象
$("#showBtn").click($.proxy(student, "showInfo"));
});
</script>
</body>
</html>
这里 $.proxy(student, "showInfo") 返回了一个新函数，这个新函数执行时，showInfo 里的 this 就是 student 对象。这种写法在需要把对象方法直接作为回调传入，又不想额外写匿名函数包装时特别顺手。
本节课程知识要点
-
$.proxy()的核心功能是改变函数的执行上下文，返回一个新函数，新函数内部的this长久指向指定的对象。 -
该方法提供两种传参方式：一是
$.proxy(function, context)，直接传函数和上下文；二是$.proxy(context, "methodName")，通过上下文对象和方法名字符串来绑定。 -
$.proxy()在jQuery生态中的定位，类似于原生JavaScript中的Function.prototype.bind()，在老版本浏览器兼容性或统一jQuery项目代码风格时是一个可靠的替代方案。 -
在事件回调场景中使用
$.proxy()时，可以通过回调参数中的event.currentTarget或event.target来访问触发事件的DOM元素，不会因为this被替换而丢失对事件源的引用。 -
一旦通过
$.proxy()绑定上下文后，后续再对该函数使用call()或apply()去改变this，不会生效，因为绑定后的函数上下文是不可覆盖的。这一点和原生bind()的行为一致。
