そしてjsの基礎へ戻る#4

922 views
833 views

Published on

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

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
922
On SlideShare
0
From Embeds
0
Number of Embeds
118
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

そしてjsの基礎へ戻る#4

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

×