そしてjsの基礎へ戻る#4
2 likes1,079 views
またもやjsです。今回の内容は ・関数呼び出しの４つのパターン ・thisについて です。オライリー・ジャパン「JavaScript: the good parts」をもとに資料を作成しています。
More Related Content
What's hot (20)
Viewers also liked (20)
Similar to そしてjsの基礎へ戻る#4 (20)
そしてjsの基礎へ戻る#4
- 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