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