Javascriptのcallとapplyの違いをシンプルにまとめた

どうもユーキです。
最近他の人が書いたJavascriptのソースを見る機会があって、callとapplyをちょくちょく見かけるなぁと思い、ふと調べてかんたんにまとめてみました。

call()

call(thisArg[, arg1[, arg2[, …]]])

  • thisが指してるオブジェクトを変更することが出来る。
  • これのおかげで、定義してないメソッドや変数を使うことができるようになる。
  • つまり、共通のオブジェクトを作っておき、それを継承して別のオブジェクトを作ることができるようになる。
  • Aさんが、Bさんを呼び出し、俺の一部(method)をお前に使わしちゃる!気にしないでええんやで!っていうイメージ(余計わかりづらいか)
  • A.method.call(B);

一応例を載せておきます。

function Animals(name) {
  this.name = name;
  this.running = function () {
    return console.log('走る');
  }
}

function Dogs(name, voice) {
  Animals.call(this, name); // ここでcall()をつかってthisを変更,2つ目以降の引数はAnimalsの引数になる
  this.voice = voice;
  this.sing = function () {
    return console.log(voice);
  }
}

var corgi = new Dogs('コーギー', 'わんわんわーん!');

corgi.sing(); // わんわんわーん!
corgi.running(); // 走る

apply()

apply(thisArg[, argsArray])

  • callの第2引数が配列1つになっただけで基本的な使い方は一緒

function Animals(name) {
  this.name = name;
  this.running = function () {
    return console.log('走る');
  }
}

function Dogs(name, voice) {
  Animals.apply(this, [name]); // ここが変わっただけ!!
  this.voice = voice;
  this.sing = function () {
    return console.log(voice);
  }
}

var corgi = new Dogs('コーギー', 'わんわんわーん!');

corgi.sing(); // わんわんわーん!
corgi.running(); // 走る

結局のところ

オブジェクト指向っぽい書き方ができるようになりました。
thisを渡せるってのは結構大きいような気はしますが、thisを渡さないと行けないっていう設計に問題があるような…?
内部的によばれてるかもだけど、prototype継承でいいような気がするし、最近ならECMAScriptでClass使えばいいので、あんまり使うことはなさそうだなという印象でした。
別の使い方わかったら追記します。

About Me

プロフィール画像

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。

お問い合わせはこちら

ツイッターはこちら

ポートフォリオはこちら

Latest Posts

Popular Posts

TOP