JavaScript中的方法、方法引用和参数

╰+哭是因爲堅強的太久メ 2021-12-14 16:31 212阅读 0赞

首先，我们来看一段代码，如果觉得不甚明白的，则本文会对你有益：

> var player = function (e) \{  
> return (function f(m) \{  
> return m ? (function (n) \{  
> return $('\#Player', n).get(0) || f($('iframe', n).get(0));  
> \})(m.contentWindow.document) : null;  
> \})($(e).get(0));  
> \};

该段代码涉及到的知识点包括：方法、匿名方法、匿名方法的立即执行、JQuery对象及Dom对象的互转等。现在，我们回过头来从基础的出发，争取对于JavaScript中的方法、方法引用和参数弄得概念清楚一些。

**一：示例代码**

首先，先看测试代码：

> <!DOCTYPE html>  
> <head>  
> </head>  
> <body>  
> <script src="scripts/jquery.min.js"></script>  
> <script language="javascript">  
> window.console.log("=================================");  
> var p0 = function (e) \{  
> window.console.log("self:" + e);  
> \};  
> p0("outp0");  
> var A = new p0("p0");
> 
> window.console.log("=================================");  
> var p00 = function (e) \{  
> window.console.log("self:" + e);  
> return function f(m) \{  
> window.console.log("newo:" + m);  
> \};  
> \};  
> var B = new p00("outp00B");  
> B("BB");  
> var C = new B("outp00C");  
>   
>   
> window.console.log("=================================");  
> var p01 = function (e) \{  
> window.console.log("self:" + e);  
> return (function f(m) \{  
> window.console.log("newo:" + m);  
> \})("p01");  
> \};  
> var D = new p01("outp01D");  
>   
> window.console.log("=================================");  
> var p1 = (function (e) \{  
> window.console.log("self:" + e);  
> \})("p1");
> 
> window.console.log("=================================");  
> var p11 = (function (e) \{  
> window.console.log("self:" + e);  
> return function (m) \{  
> window.console.log("newo:" + m + e);  
> \};  
> \})("p11");  
> p11("outp11\_2");  
> var E = new p11("outp11");  
>   
> window.console.log("=================================");  
> var p12 = (function (e) \{  
> window.console.log("self:" + e);  
> return \{  
> p121: function (m) \{ window.console.log("newo:" + m); \},  
> p122: function (options, fn) \{  
> fn(e + options);  
> \}  
> \};  
> \})("p12");  
> p12.p121("outp121");  
> p12.p122("outp122", function (e) \{  
> window.console.log("invoker:" + e)  
> \});  
> </script>  
> </body>  
> </html>

该代码的执行结果为：

> =================================  
> self:outp0  
> self:p0  
> =================================  
> self:outp00B  
> newo:BB  
> newo:outp00C  
> =================================  
> self:outp01D  
> newo:p01  
> =================================  
> self:p1  
> =================================  
> self:p11  
> newo:outp11\_2p11  
> newo:outp11p11  
> =================================  
> self:p12  
> newo:outp121  
> invoker:p12outp122

**二：示例代码的讲解**

**1：对象，即 new**

由于 p0 是一个 function，所以可以被 new，function 本身就相当于构造器了。不过过因为 p0 本身内部没有参数、方法或者 return，所以 A 基本没什么用处。

[![image][]][image 1]

由于 p00 return 一个 function，所以 B 可以执行自己，即被调用；  
B("BB");  
上面说了，由于 B 是一个 function，所以可以被 new

[![image][image 2]][image_image 2]

**2：匿名方法及立即执行**

p01 return 的本身是一个立即执行的匿名方法，  
于是很不幸，D 本身变成什么也不是了，以下代码不能执行  
D("DD");  
不同于 B，B 是 function 本身，所以可以执行:

[![image][image 3]][image_image 3]

p1 是定义了一个匿名方法，并立即执行它，并且说明也没返回（或者说返回 null），所以：  
1: p1 即不能被 new ,即 new p1();  
2: 也不能执行，即 p1();

[![image][image 4]][image_image 4]

p11 定义了一个匿名方法，并且立即执行了它，同时返回了一个方法，所以  
1：p11 本身就代表了这个被 return 的方法，所以可被执行，即 p11("x");  
2：因为 p11 本身是 function，故可以 new  
[![image][image 5]][image_image 5]

现在，为了便于查看，上一个加了注释的版本：

> <!DOCTYPE html>  
> <head>  
> </head>  
> <body>  
>   
> <script src="scripts/jquery.min.js"></script>  
>   
> <script language="javascript">  
> window.console.log("=================================");  
> var p0 = function (e) \{  
> window.console.log("self:" + e);  
> \};  
> p0("outp0");  
> // 1：由于 p0 是一个 function，所以可以被 new，function 本身就相当于构造器了；  
> // 2：不过因为 p0 本身内部没有参数、方法或者 return，所以 A 基本没什么用处；  
> var A = new p0("p0");
> 
> window.console.log("=================================");  
> var p00 = function (e) \{  
> window.console.log("self:" + e);  
> return function f(m) \{  
> window.console.log("newo:" + m);  
> \};  
> \};  
> // 构造器就是 p00 这个方法本身；  
> var B = new p00("outp00B");  
> // 由于 p00 return 一个 function，所以 x 可以执行自己，即被调用；  
> B("BB");  
> // 上面说了，由于 x 是一个 function，所以可以被 new  
> var C = new B("outp00C");  
>   
>   
> window.console.log("=================================");  
> var p01 = function (e) \{  
> window.console.log("self:" + e);  
> return (function f(m) \{  
> window.console.log("newo:" + m);  
> \})("p01");  
> \};  
> // p01 return 的本身是一个立即执行的匿名方法，  
> // 于是很不幸，D 本身变成什么也不是了，以下代码不能执行  
> // D("DD");  
> // 不同于 B，B 是 function 本身，所以可以执行  
> var D = new p01("outp01D");  
>   
> window.console.log("=================================");  
> // p1 是定义了一个匿名方法，并立即执行它，并且说明也没返回（或者说返回 null），所以：  
> // 1: p1 即不能被 new ,即 new p1();  
> // 2: 也不能执行，即 p1();  
> var p1 = (function (e) \{  
> window.console.log("self:" + e);  
> \})("p1");
> 
> window.console.log("=================================");  
> var p11 = (function (e) \{  
> window.console.log("self:" + e);  
> return function (m) \{  
> window.console.log("newo:" + m + e);  
> \};  
> \})("p11");  
> // p11 定义了一个匿名方法，并且立即执行了它，同时返回了一个方法，所以  
> // 1：p11 本身就代表了这个被 return 的方法，所以可被执行，即 p11("x");  
> // 2：因为 p11 本身是 function，故可以 new  
> p11("outp11\_2");  
> var E = new p11("outp11");  
>   
> window.console.log("=================================");  
> // 1：在这里，对于 p12 而言，实际上 e 永远等于字符串 “p12”  
> // 2：在实际应用中，可能会传入一个待处理的对象；  
> // 3：new p12("outp12");  
> // error: 因为 p12 没有 return 一个 funtion，所以它不能 new 出一个对象；  
> // 4：调用 p12.p121 或 p12.p122 实际调用的是其代表的方法。  
> // 5：如，调用 p12.p122，  
> // 首先执行 p12.p122 方法本身；  
> // 其次，方法参数中又有一个方法，p12.p122 调用了它  
> // e 是 p12 这个对象的内部变量，而 options 则是 p122 的参数  
> var p12 = (function (e) \{  
> window.console.log("self:" + e);  
> return \{  
> p121: function (m) \{ window.console.log("newo:" + m); \},  
> p122: function (options, fn) \{  
> fn(e + options);  
> \}  
> \};  
> \})("p12");  
> p12.p121("outp121");  
> p12.p122("outp122", function (e) \{  
> window.console.log("invoker:" + e)  
> \});  
> </script>  
> </body>  
> </html>

以上，基本上阐明了全部的Js方法怎么用的做法。如果认真体会上文代码，并明白其中的输出，那么基本上对于 JS 的方法的应用可以满足日常开发了。

**三：一个实际代码**

现在，我们就可以轻松的看明白下面这段代码的含义了：

> var learning = (function ($) \{
> 
> var player = function (e) \{  
> return (function f(m) \{  
> return m ? (function (n) \{  
> // $('\#Player', n) 指的是：在 DOM对象n 中寻找\#Player对象  
> return $('\#Player', n).get(0) || f($('iframe', n).get(0));  
> \})(m.contentWindow.document) : null;  
> \})($(e).get(0));  
> \};
> 
> var playing = (function () \{  
> return \{  
> current: function () \{  
> return chapter;  
> \},  
> tiny: function (e) \{  
> tinyObj = e;  
> \},  
> body: function (e) \{  
> bodyObj = e;  
> \}  
> \}  
> \})();
> 
> return \{  
> player: player,  
> load: function (options, fn) \{  
> playing.tiny(options.tiny);  
> playing.body(options.body);  
> \}  
> \};  
> \})(this.jQuery);
> 
>   
> $(function () \{  
> learning.load(\{  
> tiny: $('\#player\_tiny'),  
> body: $('\#player\_body')  
> \},  
> function (e) \{
> 
> \});  
> var p1 = learning.player($('\#player\_tiny'));  
> var p2 = learning.player($('\#player\_body'));  
> if (p1) p1.pause();  
> if (p2) p2.pause();  
> \});

以上代码中，最后一个方法调用指的是作为页面 dom 加载完毕执行的代码，它作为页面的主方法。在该代码中， 调用了 learning.load 方法，并且传入了两个参数。继而，我们执行了一个方法，它是：

> var p1 = learning.player($('\#player\_tiny'));

我们可以看到，这个方法本身定义为：

> var player = function (e) \{  
> return (function f(m) \{  
> return m ? (function (n) \{  
> // $('\#Player', n) 指的是：在 DOM对象n 中寻找\#Player对象  
> return $('\#Player', n).get(0) || f($('iframe', n).get(0));  
> \})(m.contentWindow.document) : null;  
> \})($(e).get(0));  
> \};

执行该方法，执行一个立即执行的匿名方法，该方法返回下面的东西：

> m ? (function (n) \{  
> // $('\#Player', n) 指的是：在 DOM对象n 中寻找\#Player对象  
> return $('\#Player', n).get(0) || f($('iframe', n).get(0));  
> \})(m.contentWindow.document) : null;

这个方法本身看上去这么复杂，是因为这里存在一个递归调用（虽然该递归调用是可以被去掉的），即 f 方法内部，又调用了 f 方法本身。也许，我们把它换成不那么高级的写法，就好容易理解多了：

> var findDoc = function (n) \{  
> return $('\#Player', n).get(0) || findX($('iframe', n).get(0));  
> \};
> 
> var findX = function (m) \{  
> return m ? findDoc(m.contentWindow.document) : null;  
> \};
> 
> var player = function (e) \{  
> findX($(e).get(0));  
> \};

转载于:https://www.cnblogs.com/luminji/p/3638467.html

[image]: /images/20211214/2b512c1ed48a424e9a459cc048bfd9e9.png
[image 1]: https://images0.cnblogs.com/blog/123061/201404/011650191713500.png
[image 2]: https://images0.cnblogs.com/blog/123061/201404/011650213905856.png
[image_image 2]: /images/20211214/24d548bf1a01451eb096c1841682158a.png
[image 3]: https://images0.cnblogs.com/blog/123061/201404/011650223281469.png
[image_image 3]: /images/20211214/c83da33917954dfc9f8ab482a2d60d01.png
[image 4]: https://images0.cnblogs.com/blog/123061/201404/011650233122067.png
[image_image 4]: /images/20211214/3a8c1cb9d03341988f0ed51b1d801a73.png
[image 5]: https://images0.cnblogs.com/blog/123061/201404/011650247504295.png
[image_image 5]: /images/20211214/8ea182b25cc8446aa4f30055e5efd15a.png