带着如下几个问题:
一、call 和 apply 的区别在哪?
二、call 在什么状况下使用? apply 在什么状况下使用?
三、apply 有哪些妙用?数组
apply 和 call 均可以劫持另一个对象的方法,继承另一个对象的属性,下面咱们看一些他们的不一样在哪里;
下面看代码是如何体现的:app
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 示例:this
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),效果同样;prototype
那么 apply 方法都有哪些方便的功能呢;
(1)Math.max() 这个方法会在全部的参数中查找到最大的一个;code
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 能够展开运算的功能基本都被 ...展开运算符代替了;io
总结:
你们从上面能够学习到 apply 和 call 的用法,也尝到了ES6中的甜,但也不要忘记之前但知识哦,语法糖但实现原理也都是源于老版本的JS,基础尤其重要!