Your SlideShare is downloading. ×
0
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

663

Published on

またもやjsです。今回の内容は …

またもや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
663
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×