大家好，我是IT修真院深圳分院第01期学员，一枚正直纯洁善良的web程序员。
今天给大家分享一下，修真院官网JS任务5，深度思考中的知识点——如何理解JS中的call和apply？
一、背景介绍
call和apply都是为了改变某个函数运行时的context即上下文而存在的，换句话说，就是为了改变函数体内部this的指向。因为JavaScript的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。
二、知识剖析
2.1 apply:
方法能劫持另外一个对象的方法，继承另外一个对象的属性.
Function.apply(obj,args)方法能接收两个参数
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args-->arguments）
2.2 call
和apply的意思一样,只不过是参数列表不一样
Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj：这个对象将代替Function类里this对象
params：这个是一个参数列表
三、常见问题
如何使用call和apply？
四、解决方案
demo1：
/*定义一个人类*/
function Person(name,age)
{
this.name=name;
this.age=age;
}
/*定义一个学生类*/
function Student(name,age,grade)
{
Person.apply(this,arguments);
//Person.call(this,name,age);
this.grade=grade;
}
//创建一个学生类
var student=new Student("zhangsan",21,"一年级");
//测试
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
//大家可以看到测试结果name:zhangsan age:21 grade:一年级
//学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.
Person.apply(this,arguments);
this:在创建对象在这个时候代表的是student；
arguments:是一个数组,也就是[“zhangsan”,”21”,”一年级”];
也就是通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面
demo2:
function Animal(){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
}
function Cat(){
this.name = "Cat";
}
var animal = new Animal();
var cat = new Cat();
//通过call或apply方法，将原本属于Animal对象的showName()方法交给对象cat来使用了。
//输入结果为"Cat"
animal.showName.call(cat,",");
//animal.showName.apply(cat,[]);
call的意思是把animal的方法放到cat上执行，原来cat是没有showName()方法，现在是把animal的showName()方法放到cat上来执行，所以this.name应该是Cat
5.编码实战
详见视频
如何理解JS中的call和apply_腾讯视频
六、扩展思考
call()和apply()两种方法的区别？
相同点：两个方法产生的作用是完全一样的
不同点：方法传递的参数不同
call()接受的是一个参数列表，而apply()接受一个参数数组
func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])
其中this是你想指定的上下文，他可以是任何一个JavaScript对象(JavaScript中一切皆对象)，call需要把参数按顺序传递进去，而apply则是把参数放在数组里。因此要说适用条件的话，当你的参数是明确知道数量时用call。 而不确定的时候用apply，然后把参数push进数组传递进去。
举个小栗子来区别call和apply
获取数组中的最大值和最小值
var numbers = [5, 458 , 120 , -215 ];
Math.max.apply(Math, numbers);
Math.max.call(Math,5, 458 , 120 , -215);
七、参考文献
参考二：Js apply 方法 详解
八、更多讨论
1.什么情况下用apply,什么情况下用call？
2.还有哪些和call，apply类似的方法？
3.js里函数调用除了apply/call调用还有哪些？
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
你可以直接点击此链接与我一起学习：邀请码
网友评论