JavaScript的函数调用

函数调用有三种方式:

        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调用,它并不是真正的继承但是有和继承同样的作用。 

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sshm_666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值