博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【JavaScript】call与apply兄弟列传
阅读量:7006 次
发布时间:2019-06-27

本文共 2542 字,大约阅读时间需要 8 分钟。

在JavaScript中,有这么俩货,一个叫call,一个叫apply,它们俩工作几乎一毛一样,但是也有所区别,曾经对这个知识点非常困惑,看过几篇博客也没搞清楚这哥俩到底打算要干个啥,直到某天仔细研究过this关键词的相关知识点后,才恍然大悟,

恍然大悟
这篇文章主要就是为callapply兄弟俩写“人物传记”,希望能帮助到其他对这个问题有困惑的童鞋。

家族世系

在正式介绍这哥俩之前,首先我们得知道兄弟二人到底是谁家的熊孩子,所以有必要熟悉一下哥俩的“家族世系”,刨根问底,以便日后开心地与兄弟二人愉快地玩耍交朋友。

callapply是被定义到Function.prototype上的两个方法,也就是Function类型中的原生方法,早在ECMAScript标准的第一个版本中就已经被初步定义,历史悠久,所以现代浏览器几乎都支持,完全不必担心兼容性。

基本用法

call方法与apply方法要实现的功能几乎一致,就是使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。 两者只有一个区别,call方法接受的是若干个参数的列表,参数之间以逗号分隔apply方法接受的是一个包含多个参数的数组或者伪数组(比如arguments)

思考以下代码:

var objA = {  x:"value is A",  getX:function () {    console.log(this.x);  }};var objB={  x:"value is B",  getX:function () {    console.log(this.x);  }};objA.getX(); //"value is A"objA.getX.call(objB);//"value is B",this被重新绑定到了objB上

上面的代码很简单,当objA.getX()被直接调用执行的时候,this理所应当地指向了objA对象,但是当objA.getX.call(objB)被调用执行时,objA.getX中的this被改变,指向了objB。此时因为没有其他参数要传入,所以本例中使用callapply的输出结果是没有区别的。

他们区别在于传递参数的方式:

var objA = {  x: 'A',  getX: function (val1, val2) {    console.log(val1 + val2 + this.x);  }};var objB = {  x: 'B',  getX: function (val1, val2) {    console.log(val1 + val2 + this.x);  }};objA.getX.call(objB, 'value', 'is'); //"value is B"objA.getX.apply(objB, ['value','is']); //"value is B"

PS:若想了解更多关于this关键词的知识,请阅读

用作类的继承

callapply方法使用的一个最常见的场景就是在js类的继承中使用,废话不多说,直接上代码:

var Person = function (name, age) {  this.name = name;  this.age = age;  this.sayAge = function () {    console.log('Age:' + this.age);  };}var Worker = function (name, age, workerId) {  this.workerId = workerId;  Person.apply(this, arguments); //apply的第二个参数也可以是伪数组  this.showId = function () {    console.log(this.workerId);  }}var worker = new Worker('张三', 22, '521608');worker.sayAge();

需要注意的一点是,使用callapply方法不能继承原型链,如果要实现原型链继承,则需要混合使用子类原型对象指向父类的实例的方式实现继承。具体可参考下面代码

var Person = function (name,age) {  this.name = name;  this.age = age;  this.sayAge = function () {      console.log("Age:"+this.age);  };}//定义到原型链上的方法Person.prototype.sayName = function () {    console.log("Name:"+this.name);};var Worker = function (name,age,workerId) {  this.workerId= workerId;  Person.apply(this,arguments);//这里没有继承父类prototype中的方法}Worker.prototype = new Person(this.name,this.age);Worker.prototype.showId = function () {    console.log("ID:",this.workerId);};var worker = new Worker("张三",22,"521608");worker.sayAge(); //"Age:22"worker.sayName();//"Name:张三"worker.showId();//"ID: 521608"

太史公曰

总结一下callapply

  • 兄弟俩的任务:

    使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。

  • 区别:

    call方法接受的是若干个参数的列表,参数之间以逗号分隔apply方法接受的是一个包含多个参数的数组或者伪数组(比如arguments)

本篇人物小传自此结束。

转载地址:http://zxytl.baihongyu.com/

你可能感兴趣的文章
git常用命令速查表【转】
查看>>
[转]Python yield 使用浅析
查看>>
Wpf Binding.Path设置
查看>>
jfinal控制器添加多个拦截器
查看>>
跟着百度学PHP[14]-初识PDO数据库抽象层
查看>>
小豆包的学习之旅:机器人定位
查看>>
好程序猿训练营,让你成为名副事实上的好程序猿
查看>>
有关一道printf 的面试题
查看>>
#AOS应用基础平台# 实现了在用户权限范围内自己定义的快捷菜单的导航展示
查看>>
[转]ssh中如何实现定时任务(spring对quartz的支持)
查看>>
mysql查询表的字符集
查看>>
读研以来的一些感想:名校好在哪里?
查看>>
大数据中心的业务研发路线
查看>>
rtmp推流开源代码备注一下
查看>>
SQLServer 日期函数大全 SQLServer 时间函数大全
查看>>
program与module
查看>>
软件架构师应该知道的97件事
查看>>
jquery操作"元素属性"
查看>>
用Python写一个本地Sogou代理服务器程序
查看>>
ASP.NET内置票据认证
查看>>