关于 $.proxy(fn,context,arg) 方法
1 <!-- $.proxy(fn,this,agrument);
proxy 代理 思考做酒的代理商
argument就是代理商 把fn所在的作用域对象的参数/属性 代理给fn执行。
2 3 fn: 要被调用的已有的函数。 4 5 this: fn函数所在的对象的名称。 就是 fn在哪里调用，this 就是指向那个作用域中的对象。 6 说白了就是：fn 函数在哪个作用被调用，this就是指向谁。 7 8 arg： 把fn函数所在的对象 this 的参数 传递给fn执行。 9 arg 一定是 fn函数所在的对象this 里面的任何参数皆可。 10 --> 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>Document</title> 16 </head> 17 <body> 18 <div id="panel" style="display:none;"> 19 <button class="close">消失</button> 20 </div> 21 <script src="js/jquery.js"></script> 22 <script> 23 /*$("#panel").fadeIn(3000,function () { 24 $('.close').click(function () { 25 $(this).fadeOut(); // 其实这里我想让 #panel 隐藏来着 26 console.log($(this)); 27 }); 28 }); 29 $('#panel').click(function() { 30 setTimeout(function() { 31 $(this).addClass('aNewClass'); // 这个 this 根本就不对嘛 32 console.log($(this)); 33 }, 1000); 34 });*/ 35 36 $("#panel").fadeIn(function(){ 37 console.log(this);//指向 $('$panel')对象 38 $('.close').click($.proxy(HidePanel, this)); 39 // 相比这个 $('.close').click(function(){HidePanel()}); 优美很多 40 }); 41 42 function HidePanel() { 43 //如果HidePanel这个函数单独调用，那么这里的this指向window 44 //$(this).fadeOut(); 而这句话就会报错，因为window是无法执行fadeOut动画的。 45 //这里不能单独执行，如果没有$(this).fadeOut();这句代码，那就可以执行。 46 //该函数在哪个作用域中执行，这个this就指向谁。 47 console.log(this); 48 $(this).fadeOut(); 49 } 50 51 $('#panel').click(function() { 52 setTimeout( 53 $.proxy( 54 function(e) { 55 $(this).addClass('aNewClass'); 56 for (var p in e) { 57 console.log(e); 58 } 59 }, 60 this, 61 'woaini'), 62 1000); 63 }); 64 65 //单独执行函数HidePanel 会报错，函数中的this指向window，而window是无法执行fadeOut动画的 66 // HidePanel(); 67 </script> 68 </body> 69 </html> 70 ==================== 71 $(selector).proxy(context,name) 72 function 要被调用的已有的函数。 73 name 已有的函数，其上下文将被改变（应该是 context 对象的属性）。 74 就是：不再执行整个function函数了，而是直接执行context。 75 <!DOCTYPE html> 76 <html> 77 <head> 78 <meta charset="utf-8"> 79 <title>菜鸟教程(runoob.com)</title> 80 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> 81 </script> 82 <script> 83 $(document).ready(function(){ 84 var objPerson = { 85 name: "John Doe", 86 age: 32, 87 test: function(){ 88 $("p").after("Name: " + this.name + "<br> Age: " + this.age); 89 } 90 }; 91 $("button").click($.proxy(objPerson,"test")); 92 }); 93 </script> 94 </head> 95 <body> 96 97 <button>执行 test 函数</button> 98 <p></p> 99 100 </body> 101 </html> 102 ============ 103 语法：$(selector).proxy(function,context) 104 function 要被调用的已有的函数。 105 context 函数所在的对象的名称。 106 <!DOCTYPE html> 107 <html> 108 <head> 109 <meta charset="utf-8"> 110 <title>菜鸟教程(runoob.com)</title> 111 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> 112 </script> 113 <script> 114 $(document).ready(function(){ 115 test=function() 116 { 117 this.txt="这是一个对象属性"; 118 $("div").click($.proxy(this.myClick,this)); 119 }; 120 121 test.prototype.myClick = function(event) 122 { 123 alert(this.txt); 124 alert(event.currentTarget.nodeName); 125 }; 126 127 var x = new test(); 128 }); 129 </script> 130 </head> 131 <body> 132 133 <div>这是一个 div 元素。</div> 134 135 </body> 136 </html>
