javascript之apply()和call()用法浅析

最新推荐文章于 2024-05-30 11:27:58 发布

徐同保

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量1.8k

点赞数 1

分类专栏： web前端前端技术分享文章标签： javascript call apply

本文链接：https://blog.csdn.net/xutongbao/article/details/77646467

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

每个函数都包含两个非继承而来的方法：apply()和call()。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。

首先，apply()方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是Array的实例，也可以是arguments对象。

call()方法与apply()方法的作用相同。它们的区别仅在于接收参数的方式不同。对于call()方法而言，第一个参数是this值没有变化，变化的是其余参数都

直接传递给函数。换句话说，在使用call()方法时，传递给函数的参数必须逐个列举出来。

事实上，传递参数并非apply()和call()真正的用武之地；它们真正强大的地方是能够扩充函数赖以运行的作用域。

使用call()或apply()来扩充作用域的最大好处，就是对象不需要与方法有任何耦合关系。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
    <script type="text/javascript">
        function sum(num1, num2) {
            return num1 + num2;
        }
        function callSum1(num1, num2) {
            return sum.apply(this, arguments);
        }
        function callSum2(num1, num2) {
            return sum.apply(this, [num1, num2]);
        }
        function callSum3(num1, num2) {
            return sum.call(this, num1, num2);
        }
        alert(callSum1(10, 5));
        alert(callSum2(20, 30));
        alert(callSum3(20, 50));

        window.color = 'red';
        var o = {color: 'blue'};

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

        sayColor.call(this);        //red
        sayColor.call(window);      //red
        sayColor.call(o);           //blue
    </script>
</body>
</html>