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

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

on

  • 862 views

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

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

Statistics

Views

Total Views
862
Views on SlideShare
801
Embed Views
61

Actions

Likes
2
Downloads
3
Comments
0

1 Embed 61

http://espa-lt.blogspot.jp 61

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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