またもやjsです。今回の内容は ・関数呼び出しの４つのパターン ・thisについて です。オライリー・ジャパン「JavaScript: the good parts」をもとに資料を作成しています。

1. +
そして基礎に戻るjs#4
2012/11/19
れこ

2. +
今回の品目
 またもやjsです
 基本的にオライリー・ジャパン「JavaScript:
the
good
parts」をもと
に書いてます。
 関数の４つの呼び出しパターン＋１
 thisについて

3. +
関数の呼び出しパターン
 関数は引数以外にもパラメータを受け取っている！！
 thisとargments
 ４つの呼び出しパターン＋１
 メソッド呼び出し
 関数呼び出し
 コンストラクタ呼び出し
 apply,call呼び出し

4. +
１,メソッド呼び出し
 関数がオブジェクトのプロパティとして格納されている場合
 this
=
呼び出し元のオブジェクト

5. +
２,関数呼び出し
 関数がオブジェクトのプロパティではない場合
 this
=
グローバルオブジェクト（ブラウザならwindow）
 これを使うときは要注意。

6. +
関数呼び出しの悲劇
 うまくいかない例（伝わりにくくてすいみません。）

7. +
thisがglobalになるのを回避
 var
that
=
this;
 thisは遅延束縛（ 実行時に値が決定）が用いられるので、都度変化
する
 変数に入れてしまえばそのときのthisを保存しておける
 thisの退避に使う変数名はthatとするのが通例（らしい）

8. +
３,コンストラクタ呼び出し
 new
Hoge()と呼び出すやつ
 this
=
生成された新しいオブジェクト
 この呼び出し方も要注意、そして非推奨。

9. +
コンストラクタ呼び出しの注意点
 new演算子を付けないと大惨事
 thisが返却されないので、戻り値はundefined
 thisにはグローバルオブジェクトが入る
 文法上の誤りはないのでSyntaxエラーは出ない
 グローバルオブジェクトを上書きした上、戻り値は空

10. +
４,apply,call呼び出し
 初見だと恐ろしくトリッキー。
 Functionsオブジェクトのメソッドの２つ
 this
=
引数で指定できる

11. +
どういうこと！？
 callとapplyはほぼ同じ
 関数への引数の与え方と動作速度（後述）が異なる
 call
:
第２引数以降を順に引数として渡す
 apply
:
第２引数の配列を展開して引数として渡す
 第１引数
 thisに指定したいオブジェクト
 呼び出された関数内のthisにこれが格納される
 第２引数（以降）
 関数に与えたい引数

12. +
どちらを使う？どう使う？
 applyより、callの方が動作が高速
 個人的に意味がストレートなcallの方が良い
 call
=
呼ぶ と自然な理解が出来るし。高速なら尚更。
 使い道 例：auguments
 関数に自動的に与えられている値（引数が全て入っている）
 可変長引数とかに用いる。
 Arrayのようで、ArrayじゃないのでArrayのメソッドは使えない
 augumentsに便利なArrayのメソッドを使いたい
 Array.prototype.slice.call(auguments,1,2);

13. +
まとめ
 今回までの内容を使えるようになることでオブジェクトの定義
の仕方がだいぶ綺麗になりそう。
 文法的にも、構造的にも、可読性的にもスマートなコードを。
 まだまだ尽きないけど、細かいjsについてはこれで一区切り
 次回予告
 canvasでベジェ曲線を理解しつつ、書いてみる（未定）

14. +
出典
 オライリー・ジャパン「Javascript:
the
good
parts」
 applyとcallの使い方を丁寧に説明してみる -­‐
あと味
http://taiju.hatenablog.com/entry/20100515/1273903873
 callとapplyの使い方の違いについて教えてください -­‐
jsdo.it
-­‐
Share
JavaScript,
HTML5
and
CSS
http://jsdo.it/qa/11