js之apply，call浅谈

JS函数this绑定

最新推荐文章于 2024-01-25 12:07:32 发布

原创最新推荐文章于 2024-01-25 12:07:32 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#apply #call #arguments #bind

JS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了JavaScript中apply(), call()和bind()三个函数的区别与用法。通过实例详细解释了如何改变函数内部this对象的指向，以及这些方法在传递参数方面的不同。

apply(), call() 的用途都是在特定的作用域中调用函数，实际上等于设置函数体内的this对象的值。区别在于:

apply()接收的两个参数，一个是所绑定的作用域，一个是数组(例1)
call()接收的两个参数，一个是同上为所绑定的作用域，一个是列表，即参数都需要罗列出来。如果对参数格式无特殊要求，其实两个函数都是可以的（例2）

另外

bind() 方法是创建一个函数的实例，this会被绑定在新对象上。（例3）

^例1

<script>
        function sum(arg1, arg2) {
            alert(arg1 + arg2);
        }
        function sum1() {
            return (sum.apply(this, arguments));
        }
        sum1(10,1);
    </script>

——–这里输出结果为11

^例2
为了区分apply(),我们在这里做个小的测试，

<script>
        function sum(arg1, arg2) {
            alert(arg1 + arg2);
        }
        function sum1() {
            return (sum.call(this, arguments));
        }
        sum1(10,1);
    </script>

这段代码同例1几乎相同，唯一的区别在于将sum1()的回调函数改成了call。
——–这里提示
例2输出结果
我们稍微了解下arguments:
arguments是传入函数内的实际参数的类数组对象，也就是说，arguments里面包含所有传入到函数的参数，但是它本身不是数组（除arguments.length()属性外），不含有任何数组的方法和属性。
讲解完了 arguments，我们回过头来看这个测试用例，就不难明白为什么会报这种错误了，call()只支持将参数罗列出来，在例2使用arguments相当于将参数以数组的形式传进来，故会报错。正确的写法应为：

<script>
        function sum(arg1, arg2) {
            alert(arg1 + arg2);
        }
        function sum1() {
            return (sum.call(this, arguments[0], arguments[1]));
        }
        sum1(10,1);
    </script>

^例3

<script>
        function sum(arg1, arg2) {
            alert(arg1 + arg2);
        }
        var sum1 = sum.bind(this);
        sum1();
    </script>

--------输出结果为11；
今天hell0_kitty就讲到这里，我会继续努力哒~