函数调用有三种方式:

        1.直接调用

        2.call调用

        3.apply调用

一、直接调用

        直接调用函数是最常见、最普通的方式。这种方式直接以函数附加的对象作为调用者,在函数后括号内传入参数来调用函数。例如下代码:

<script>
        function person(name, age) {
            this.name = name;
            this.age = age;
            this.walk = function() {
                document.write("你调用了walk")
            }
        }
        var p = new person("lll", 23)
        p.walk();
    </script>

调用结果如下图:

 

 像alert()弹框也是一种调用方式,它是调用window对象的alert方法,只不过window可以省略。

二、call调用

函数引用.call(调用者,参数1,参数2)

由此可以得出直接调用函数与通过call()调用函数关系如下:

调用者.函数(参数1,参数2....)=函数.cal(调用者,参数1,参数2...) 

 例如下代码:

<script>
        function person(name, age) {
            this.name = name;
            this.age = age;
        }
        var p = new person()
        person.call(p, "jjj", 20);
        document.writeln(p.age);
        document.writeln(p.name);
    </script>

 

 call调用函数会把函数和调用者分的很清楚,当函数是一个变量时,依然会把函数作为一个函数引用(变量),而不会把函数作为一个真正的函数

看如下代码:

function each(array, fn) {
    for (var index in array) {
        //call调用 此时的fn是参数变量,不会当做一个真正的函数
        fn.call(window, index, array[index]); //等同于window.fn(index, array[index]) 但是这                    
      //种调用方式会把fn当成一个函数,window里并没有定义fn这个函数所以这种调用方式是不可行的。

    }
}

each([23, 45, 67, 89], function(index, elem) {
    document.writeln(index + "->" + elem + "<br>");
});

运行结果如下:

三、apply调用

函数引用.cal(调用者,参数1,参数2...) =函数引用.apply(调用者,[参数1,参数2...])

 apply调用和call类似,优势是可以结合arguments,arguments是一个封装好的数组

看如下关于arguments代码:

function test() {
    console.log(arguments);
    var res = "";
    for (var item of arguments) {
        res += item+",";
    }
    console.log(res);
}

test("gs", 29, 78, 23, 3);

 也就是在test方法里写的数据都会封装在arguments数组里。

看如下如何使用apply的代码:

 <script>
        var myfun = function(a, b) {
            document.writeln("a的值是" + a + "\nb的值是" + b)
        }
        myfun.call(window, 12, 23); //用call方式调用
        myfun.apply(window, [12, 23]); //用apply方式调用
        var example = function(c, d) {
            myfun.apply(this, arguments); //this代表调用者是example,arguments是把example里的参数封装成了数组
        }
        example(23, 33); //调用example函数
    </script>

 结果如图:

在js冒充继承里也用到了call和apply调用,它并不是真正的继承但是有和继承同样的作用。 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐