前端 js中对apply与call的理解

看书的时候总是看到apply和call的使用,自己也查了好多文档,总是感觉说的很深自己理解不了。最近看到一篇文章再加上请教别人总算懂了点,
所以做个笔记以后和大家分享,也方便自己查阅…如果有表述不清楚的或是不明确的地方希望各位大神能够提点~
此文是借鉴其他文章加自己的一些练习

主要解决以下几个问题:
1、apply和call的区别在哪里
2、什么情况下用apply,什么情况下用call
3、apply的其他巧妙用法(一般在什么情况下可以使用apply)

首先apply的定义如下:
apply方法能劫持另外一个对象的方法,继承另外一个对象的属性
Function.apply(obj,args)方法能接收两个参数

obj:这个对象将代替Function类里this对象

args:这个是数组,它将作为参数传给Function(args-->arguments)
1.apply示例

javascript 代码

//定义一个人类
function Person(name, age) {
    this.name = name
    this.age = age
}
//定义一个学生类
function Student(name, age, grade) {
    Person.apply(this, arguments)
    this.grade = grade
}
//创建一个学生类
var student = new Student(‘谜’, ’10’, ‘一年级’)
//测试
console.log(
    ‘name:’ + student.name + ‘age:’ + student.age + ‘grade:’ + student.grade,
)

结果如下:
name:谜age:10grade:一年级

学生类里没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处。
分析:Person.apply(this,arguments);
this:代表的是student,表示将Person中的this指向student。
arguments:是一个数组,在例子中表示[‘谜’,’10’,’一年级’];
通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的
语句,这样就讲属性创建到了student对象里面

2.call示例

在Student函数里面可以将apply中修改成如下:
Person.call(this,name,age);####
这样就可以了。
所以call和apply的区别是传参的格式
apply是arguments对象作为参数,而call则是要把需要传的参数一一列出。

3.什么情况下用apply,什么情况下用call

在给对象参数的情况下,如果参数的形式是数组时候,并且参数列表相同则使用apply

例:apply示例里面传递了参数arguments这个参数是数组类型,并且在调用Person的
时候参数的列表是对应一致的,也就是Person和Student的参数列表前两位是一致的,就可以采用apply。
如果我的Person的参数列表是这样的(age,name)而Student的参数列表是(name,age,grade),
这样的就可以用call来实现了Person.call(this,age,name,grade);

4.apply的一些其他巧妙用法

在调用apply方法的时候第一个参数是对象(this),第二个参数是一个数组集合,
在调用Person的时候,他需要的不是一个数组,但是为什么我给他一个数组他仍然可以将数组解析为一个一个的参数?
这就是apply的一个巧妙的用处,可以将一个数组默认的转换为一个参数列表。如果用程序实现将数组的每一项来转换为
参数的列表可能得费一会时间,而借助apply的这点特性就有了高效的方法,见下方例子

a)Math.max可以实现得到数组中的最大的一项

因为Math.max参数里不支持数组,只支持类似于Math.max(param1,param2,param3)这种,所以可以利用apply来实现
见证奇迹的时刻~~~

javascript 代码

var a = [1, 21, 3, 12, 2]
console.log(Math.max.apply(Math, a))

原理就是apply()方法将数组a转换为一个一个的参数进行比较最后返回最大值

最大值可以做到最小值当然也可以

javascript 代码

var a = [1, 21, 3, 12, 2]
console.log(Math.min.apply(Math, a))

b)Array.prototype.push可以实现两个数组合并

因为push方法没有提供push一个数组,但是提供了push(param1,param2…)所以也可以通过apply来转换一下数组:

javascript 代码

var arr1 = new Array(‘1’, ‘3’, ‘4’)
var arr2 = new Array(‘6’, ‘7’, ‘8’)
Array.prototype.push.apply(arr1, arr2)
console.log(arr1)

原理:arr1调用了push方法参数是通过apply将数组装换为参数列表的集合。

看到这里大家是不是心里想说:有必要这么麻烦吗(嫌弃的表情)js明明就有concat 这个强大的方法,
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。,如下

javascript 代码

var arr1 = new Array(‘1′,’3′,’4’);
var arr2 = new Array(‘6′,’7′,’8’);
console.log(arr1.concat(arr2));
console.log(arr1);
console.log(arr2);

如果真的需要数组链接的话当然要用concat啊,使用apply只是介绍一下可以这么用并不是只能这么用

无经验的前端开发简历|前端开发人员的自我评价范本|前端开发常用的字符集

» 本文来自:前端开发者 » 《前端 js中对apply与call的理解》
» 本文链接地址:https://www.rokub.com/5204.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!