call 和 apply

带着以下几个问题:
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,基本尤为重要!
    原文作者:Milo
    原文地址: https://segmentfault.com/a/1190000019297393
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞