关于 $.proxy(fn,context,arg) 方法

2019-08-17 23:55:05 阅读：310 来源： 互联网

标签：function 函数 fadeOut proxy context arg click fn

  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>

标签：function,函数,fadeOut,proxy,context,arg,click,fn
来源： https://www.cnblogs.com/Knowledge-is-infinite/p/11370973.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

关于 $.proxy(fn,context,arg) 方法