jQuery 之$.proxy() 方法

定义和用法

$.proxy 方法接受一个已有的函数，并返回一个带特定上下文的新的函数。

该方法通常用于向上下文指向不同对象的元素添加事件。

参数描述
function 要被调用的已有的函数。
context 函数所在的对象的名称。
name 已有的函数，其上下文将被改变（应该是 context 对象的属性）。

 

 

 

具体实例1：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             var initItem = function () {
 9                 this.$item = $("<div style='width:200px;height:100px;background:#ccc;'></div>");
10                 this.initClick = function () {
11                     var that = this; //这个this指的是initItem
12 //                    this.$item.click(function () {
13 //                        alert($(this).css("width")); //这个this指的是item,结果：200px
14 //                        that.aa();//alert(2)
15 //                    });
16 
17 
18 //                    this.$item.click($.proxy(function () {
19 //                        this.aa();//结果alert(2);
20 //                    }, this)); //这个this指的是initItem
21 
22                     var o = {
23                         name: "wowoowwo",
24                         test: function () {
25                             alert(this.name);
26                         }
27                     };
28                     // this.$item.click($.proxy(bb.test, bb));
29                     this.$item.click($.proxy(o, "test"));//$.proxy()用这个代理可以访问对象o里面的私有name
30                 };
31                 this.appendH = function () {
32                     $(".main").append(this.$item);
33                 };
34                 this.init = function () {
35                     this.initClick();
36                     this.appendH();
37                 };
38                 this.aa = function () {
39                     alert(2);
40                 };
41                 this.init();
42             }
43             initItem();
44         })
45     </script>
46 </head>
47 <body>
48 <div class="main"></div>
49 </body>
50 </html>

实例2：
 1  $(function () {
 2             var F = function () {
 3                 this.fClick = function () {
 4                     alert(0);
 5                 }
 6                 //                 $("#father").click(function () {                                     
 7                 //                    this.fClick();//报错，this指向$("#father"),还没定义fClick方法
 8                 //                });
 9 
10                 $("#father").click($.proxy(function () {
11                     //alert(1);                   
12                     this.fClick(); ////0，this指向F,已定义fClick方法
13                 }, this));
14                 this.init = function () {
15                     this.fClick();
16                 }
17                 this.init();
18             }
19             F();
20         })

 

 

 

posted @ 2014-09-11 16:32  dean.wei  阅读(422)  评论(0)  编辑  收藏  举报