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

最新推荐文章于 2022-06-12 19:21:31 发布

沧海一屌丝

最新推荐文章于 2022-06-12 19:21:31 发布

阅读量271

点赞数 1

分类专栏： javaScipt 文章标签： javascript 全局变量

本文链接：https://blog.csdn.net/qq_31924435/article/details/54091771

版权

javaScipt 专栏收录该内容

6 篇文章 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

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

image

2：匿名方法及立即执行

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

image

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

image

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

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

<!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("=================================");