【JavaScript】call与apply兄弟传记

在JavaScript中,有这么俩货,一个叫call,一个叫apply,它们俩事情险些一毛一样,然则也有所区分,曾对这个学问点异常疑心,看过几篇博客也没搞清楚这哥俩究竟盘算要干个啥,直到某天细致研讨过this关键词的相干学问点后,才豁然开朗,
《【JavaScript】call与apply兄弟传记》
这篇文章重要就是为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)

本篇人物小传自此完毕。

    原文作者:司楠
    原文地址: https://segmentfault.com/a/1190000006878213
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞