call()与apply()的区别-阿里云开发者社区

开发者社区> 前端王睿> 正文

call()与apply()的区别

简介: JavaScript函数,事实上是对象,他们均有两个非继承而来的方法,它们就是call()和apply(),它们在函数中扮演着什么样的角色呢? 它们俩其实功能是一样一样的,都是在特定的作用域中调用函数,就等于设置函数体中this对象的值。
+关注继续查看

JavaScript函数,事实上是对象,他们均有两个非继承而来的方法,它们就是call()apply(),它们在函数中扮演着什么样的角色呢?

它们俩其实功能是一样一样的,都是在特定的作用域中调用函数,就等于设置函数体中this对象的值。但是,它们也有各自的特点。

call()可以传多个参数,第一个参数是一个对象,后面的参数就是该函数的参数。
apply()最多只能传两个参数,第一个参数是一个对象,第二个参数是该函数参数组成的数组,也可以是arguments对象。

说了这么多文绉绉的东西,举个栗子吧~~~

var name = "李四";
var zhangsan = {
    name: "张三",
    age: 18
};
function getName(){
    return this.name; 
}
function add(a,b){
    return this.age+a+b;
}
console.log(getName());    //  "李四"
console.log(getName.call(zhangsan));    //  "张三"
console.log(add.apply(zhangsan,[2,3]));    //  23

第一个输出"李四",这个很好理解,因为getName()如果直接执行的话,其this指针指向的是window,因为getName()属于全局函数;

第二个输出"张三",根据上面讲的call()的作用可知,此时getName()中的this指针指向不再是window,而改成了zhangsan,所以自然getName()执行后返回的是zhangsan.name;

第三个输出 23,根据上面讲的apply()作用与call()作用一致可知,此时add()中的this指针指向zhangsan,而add参数中的ab则一 一对应数组[2,3] 中的每一项,所以add()执行后返回的是zhangsan.age+2+3,计算结果为23

等等,上面提到的arguments是什么鬼?在例子中怎么没有出现?

其实嘛,arguments是个一种长得很像数组的类数组对象,它也具有length属性,却不具有数组的其他方法,所以它并不是数组,可以看做是由函数实参组成的一个集合。

说了这么多,call()apply()到底在实际项目中有什么用呢?

我个人觉得,这两者最大作用莫过于实现对象间的继承了。比如上面提到的那个arguments,它不是数组,但是如果想将它变为数组,这该如何实现?

这时call()就可以派上用场了。通过Array.prototype.slice.call(arguments)就可以将arguments这样的类数组转成真正的数组。

再比如,通过Math.max.apply(null,arr)这样的方式可以取得一个arr数组中的最大值。这是因为Math.max()如果直接调用的话是不能够直接传入数组的,必须要一个个参数传进去,所以通过apply()可以很方便的实现取数组最大值的功能。

本文重点总结

① call() 与 apply() 功能基本一致,都是用于改变函数作用域
② call() 可以传多个参数,第一个参数后的所有参数为该函数的参数;apply() 只能传两个参数, 且第二个参数是该函数的参数所组成的数组或arguments对象

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9488 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13168 0
白话 uni-app,细说 uni-app 和传统 H5 的区别
白话uni-app 本文适合对象: 已经通过uni-app官网对产品概念有了了解,看过uni-app的官方视频介绍 熟悉h5,但对小程序、vue不了解 传统的h5只有1端,即浏览器。而uni-app可跨7端,虽仍属前端,与传统h5有不同。
6604 0
js之apply call bind 区别
js之apply call bind 区别
4826 0
+关注
前端王睿
3年Web前端开发工程师,目前就职于上海知名媒体——新闻晨报,个人公众号:前端微站
65
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载