狠狠撸

狠狠撸Share a Scribd company logo

そして箩蝉の基础へ戻る#4

?
?
Shingo Inoue
Shingo Inoue

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

1 of 14
Download to read offline
+ ? そして基礎に戻るjs#4 2012/11/19 ?れこ
+ ? 今回の品目 ?? またもやjsです ? ?? 基本的にオライリー?ジャパン「JavaScript: ?the ?good ?parts」をもと に書いてます。 ? ?? 関数の４つの呼び出しパターン＋１ ? ?? thisについて ?
+ ? 関数の呼び出しパターン ?? 関数は引数以外にもパラメータを受け取っている！！ ? ?? thisとargments ? ?? ４つの呼び出しパターン＋１ ? ?? メソッド呼び出し ? ?? 関数呼び出し ? ?? コンストラクタ呼び出し ? ?? apply,call呼び出し ?
+ ? １,メソッド呼び出し ?? 関数がオブジェクトのプロパティとして格納されている場合 ? ?? this ?= ?呼び出し元のオブジェクト ?
+ ? ２,関数呼び出し ?? 関数がオブジェクトのプロパティではない場合 ? ?? this ?= ?グローバルオブジェクト（ブラウザならwindow） ? ?? これを使うときは要注意。
+ ? 関数呼び出しの悲劇 ?? うまくいかない例（伝わりにくくてすいみません。）
+ ? thisがglobalになるのを回避 ?? var ?that ?= ?this; ? ?? thisは遅延束縛（ 実行時に値が決定）が用いられるので、都度変化 する ? ?? 変数に入れてしまえばそのときのthisを保存しておける ? ?? thisの退避に使う変数名はthatとするのが通例（らしい）
+ ? ３,コンストラクタ呼び出し ?? new ?Hoge()と呼び出すやつ ? ?? this ?= ?生成された新しいオブジェクト ? ?? この呼び出し方も要注意、そして非推奨。
+ ? コンストラクタ呼び出しの注意点 ?? new演算子を付けないと大惨事 ? ?? thisが返却されないので、戻り値はunde?ned ? ?? thisにはグローバルオブジェクトが入る ? ?? 文法上の誤りはないのでSyntaxエラーは出ない ? ?? グローバルオブジェクトを上書きした上、戻り値は空
+ ? ４,apply,call呼び出し ?? 初見だと恐ろしくトリッキー。 ? ?? Functionsオブジェクトのメソッドの２つ ? ?? this ?= ?引数で指定できる
+ ? どういうこと！？ ?? callとapplyはほぼ同じ ? ?? 関数への引数の与え方と動作速度（後述）が異なる ? ?? call ?: ?第２引数以降を順に引数として渡す ? ?? apply ?: ?第２引数の配列を展開して引数として渡す ? ?? 第１引数 ? ?? thisに指定したいオブジェクト ? ?? 呼び出された関数内のthisにこれが格納される ? ?? 第２引数（以降） ? ?? 関数に与えたい引数 ?
+ ? どちらを使う？どう使う？ ?? applyより、callの方が動作が高速 ? ?? 個人的に意味がストレートなcallの方が良い ? ?? call ?= ?呼ぶ と自然な理解が出来るし。高速なら尚更。 ? ?? 使い道 例：auguments ? ?? 関数に自動的に与えられている値（引数が全て入っている） ? ?? 可変長引数とかに用いる。 ? ?? Arrayのようで、ArrayじゃないのでArrayのメソッドは使えない ? ?? augumentsに便利なArrayのメソッドを使いたい ? ?? Array.prototype.slice.call(auguments,1,2); ?
+ ? まとめ ?? 今回までの内容を使えるようになることでオブジェクトの定義 の仕方がだいぶ綺麗になりそう。 ? ?? 文法的にも、構造的にも、可読性的にもスマートなコードを。 ? ?? まだまだ尽きないけど、細かいjsについてはこれで一区切り ? ?? 次回予告 ? ?? canvasでベジェ曲線を理解しつつ、書いてみる（未定） ?
+ ? 出典 ?? オライリー?ジャパン「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 ?

More Related Content

そして箩蝉の基础へ戻る#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が返却されないので、戻り値はunde?ned ? ?? 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 ?