call 和 apply

Pink 发布于2019-08-26 13:55 / 1064人阅读

摘要：带着以下几个问题和的区别在哪在什么情况下使用在什么情况下使用有哪些妙用和都可以劫持另外一个对象的方法，继承另外一个对象的属性，下面我们看一些他们的不同在哪里下面看代码是如何体现的方法能接收两个参数这个对象的指向将代替类里指向这个是数组，它将

带着以下几个问题：
1、call 和 apply 的区别在哪？
2、call 在什么情况下使用？ apply 在什么情况下使用？
3、apply 有哪些妙用？

apply 和 call 都可以劫持另外一个对象的方法，继承另外一个对象的属性，下面我们看一些他们的不同在哪里；
下面看代码是如何体现的：

Function.apply(obj, arguments)方法能接收两个参数
obj：这个对象的 this 指向将代替Function类里this指向
arguments：这个是数组，它将作为参数传给Function（args-->arguments）

apply 示例：

    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    function Boy(name, age, job) {
        Person.apply(this, arguments);
        this.job = job;
    }

    const boy = new Boy("Phoenix", 27, "programmer");

    console.log(boy.name, boy.age, boy.job);   // Phoenix 27 programmer

上面代码中 Boy 构造函数中，我们并没有构造 name 和 age 参数；
但是实例化对象 boy 中还是有完整的三个参数，这就是 apply 的魅理。

call 示例：

    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    function Boy(name, age, job) {
        Person.call(this, name, age);
        this.job = job;
    }

    const boy = new Boy("Phoenix", 27, "programmer");

    console.log(boy.name, boy.age, boy.job);   // Phoenix 27 programmer

上面的 Boy 中的name 和 age 参数指向的都是 Person 中的 name 和 age 参数；
由上面两个示例可以发现 call 和 apply 的区别仅仅在于参数形式不同；
apply方法的第二个参数是由参数组成的数组；
而call方法的第二个参数则是被展开的数据，在ES6中也可以是 Function.call(this, ...arguments)，效果一样;

那么 apply 方法都有哪些方便的功能呢；
（1）Math.max() 这个方法会在所有的参数中查找到最大的一个；

Math.max(1, 2, 3)   // 3

如果这个方法如果这可以这样使用那真是太鸡肋了；
如果他能传递一个数组，我们在数组中查找到最大的数字那不是很好用吗？

const arr = [1, 2, 3];
Math.max.apply(null, arr)    // 3
// 当然 ES6 出现以后 有了展开运算符 ... 可以获得一样的结果
Math.max(...arr);    // 3

当然apply方法不只是这一个地方用的到
加入我们想把两个数组整合到一起；
（2）Array.prototype.push.apply(arr1, arr2);

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);    // [1, 2, 3, 4, 5, 6]
// ES6 以后 
// arr1.push(...arr2)   效果一样

其实在 ES6 出现以后，好多以往被 apply 可以展开运算的功能基本都被 ...展开运算符代替了；

总结：

大家从上面可以学习到 apply 和 call 的用法，也尝到了ES6中的甜，但也不要忘记以前但知识哦，语法糖但实现原理也都是源于老版本的JS，基础尤为重要！

云服务器 GPU云服务器 js中的call和apply JS中bind、call和apply的作 apply与call的区别 apply()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109831.html

apply 与 call 详细深入理解

apply 与 call 介绍 function f1(x, y) { console.log(结果是： + (x + y) + this); } f1(10, 20); //函数的调用 // 结果是：30[object Window] // 此时的 f1 实际上是当作对象来使用的，对象可以调用方法 f1.apply(); // 结果是：NaN[object Window] f1.ca...

Hegel_Gu 2019-08-23 17:12 评论0 收藏0
理解JavaScript中的call,apply和bind方法

摘要：输出的作用与和一样，都是可以改变函数运行时上下文，区别是和在调用函数之后会立即执行，而方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。这几个方法...

chaosx110 2019-08-26 12:23 评论0 收藏0
前端基础:call,apply,bind的的理解

摘要：和区别其实他们的作用是一样的，只是传递的参数不一样而已。接受个参数，第一个参数指定了函数体内对象的指向，第二个参数为数组或者一个类数组。看个栗子一个有意思的事在中，多次是无效的。而则会立即执行函数。背景前两天在做小程序的需求的时候用到bind的时候才想起自己对这三的东西的了解比较浅薄，这个时候用的时候就有点怕。时候还是要好好学习下，理解下怎么玩。正文先说call 和 apply...

netmou 2019-08-20 17:01 评论0 收藏0
call和apply的区别和用法

摘要：和的区别和作用都是把绑定到的作用，即改变的指向，然而唯一的区别就是传递的参数必须得是数组的形式传递，而则直接连续参数传递和在什么地方可以用到呢当一个对象需要调用另外一个对象里面的方法的时候就可以用到和，和可以理解成是继承另外一个对象的方法， call和apply的区别 obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1...

ideaa 2019-08-21 17:44 评论0 收藏0
call和apply的区别和用法

摘要：和的区别和作用都是把绑定到的作用，即改变的指向，然而唯一的区别就是传递的参数必须得是数组的形式传递，而则直接连续参数传递和在什么地方可以用到呢当一个对象需要调用另外一个对象里面的方法的时候就可以用到和，和可以理解成是继承另外一个对象的方法， call和apply的区别 obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1...

animabear 2019-08-01 18:02 评论0 收藏0