JavaScript函数的apply方法与call方法的代码实例介绍

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript函数的apply方法与call方法的代码实例介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2740字，纯文字阅读大概需要4分钟。

内容图文

调试的时候走的是标红的这段代码，然后用到了callback.call这个函数，于是翻看了一下《js高级程序设计》，其中有比较深的解释。

首先，function是一个指向Function对象，函数名是一个指向函数的指针。那么在函数体内，就会有一个作用域，即this关键字。

this关键字指的是函数运行的作用域，举个例子来说

<script type="text/javascript">
        function funcA() {
            alert(this);
            alert("Function A");
        }
</script>

上面这段代码中的函数funcA定义在全局环境中，那么函数体内的this即window对象。

下面该到call和apply的说明了。以call函数为例，call的第一个参数，就是改变函数的作用域，后面的参数为传入函数的所需的参数，必须与原函数的参数一直，举例说明：

<script type="text/javascript">
        var testO = { name: "Lily" };
        function funcA(a,b) {
            alert(this);
            alert("Function A");
        }

        function funcB(a, b) {
            funcA.call(testO, a, b);
        }

        funcB(1,2);  //this变成了testO
    </script>

我们定义funcB函数的中，调用了funcA的call函数，这个时候我们改变了funcA中this的指向，原本指向window的，现在指向了call的第一个参数testO这个对象。而且调用call时，因为funcA函数有两个参数，所以如果要想funcA传递参数，必须一一指出参数，即后面的两个参数a和b，或者可以只穿第一个参数

即：funcA.call(testO)；或者只传a，即：funcA.call(testO,a);

而apply与call的区别仅在于，apply的第二个参数可以是数组形式，而且不必一一指出参数，funcA.apply(testO,[a,b])

介绍完call与apply的基本用法，该说说他哥俩真正的用武之地了，扩充函数赖以运行的作用域。

<script type="text/javascript">
        window.color = "透明";
        var testObj = { color: "红色" };

        function testFuc() {
            alert(this.color);
        }

        $(function () {
            1.testFuc(); //弹出“透明”
            2.testFuc(this); //弹出“undefined”
            3.testFuc.call(this.parent); //弹出“透明”
            4.testFuc.call(window); //弹出“透明”
            5.testFuc.call(testObj); //弹出“红色”
        });
</script>

上面这段代码演示了call的作用。第一个函数调用，this指向了window，所以弹出了window的color属性。

第二个函数可能有些朋友以为也会弹出透明，但是请先确定我们的函数运行在$(function(){});中，这个jQuery的函数，了解jQuery的朋友都很清楚，在

$(function(){});中this的作用域指向的是document，然后我们调用testFunc，要弹出document的color，当然是未定义的。

第三个函数将testFunc的this指向了document的亲爹window，弹出window的color当然也是没有问题的。

第四个函数就更加直白了，把window传进去了

第五个函数，将testFunc的this指向了testObj，弹出了红色。

讲到这里，用法大家应该都有所了解了，但是具体怎么去理解怎么去使用还是看自己的套路。

我是这么理解的，可以把这种用法看成是C#或者java中的泛型方法。比如一个C#方法的定义

public void Test<T>(T a, T b) { }

这样我们就可以实现对方法的扩展，实现通用的目的。

以上就是JavaScript函数的apply方法与call方法的代码实例介绍的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的JavaScript函数的apply方法与call方法的代码实例介绍全部内容，希望文章能够帮你解决JavaScript函数的apply方法与call方法的代码实例介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端