DOTLOG

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使えばいいので、あんまり使うことはなさそうだなという印象でした。
別の使い方わかったら追記します。

COMMENTS

About Me

プロフィール画像

ユーキと申します。27歳の道産子です。犬、ゲーム、お酒、食べること、旅行大好きです。飲み友募集中です。

元フリーランス。現在は、札幌のWeb制作会社にフロントエンドエンジニアとして勤務してます。

当サイトでは、Web制作全般(バックエンドも)、フリーランスなどいろいろなノウハウだったり知識だったりを書いてます。

お問い合わせはこちら

Latest Posts

Popular Posts

TOP