Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
typer<br />サイ本読書会4章 変数<br />
今日はこれだけ覚えて帰りましょう<br />
スコープ=関数<br />
大事なことなので(ry<br />
スコープ=関数<br />
別の言い方をすると<br />
スコープ!=ブロックif(hoge){var hoge;}スコープ!=ファイル<script src=‘hoge.js’ /><br />
スコープ=関数<br />
<ul><li>変数の宣言
変数のスコープ
GC(ガベージコレクション)
スコープチェーン</li></ul>今日は変数の話<br />
<script type=‘text/javascript’><br />var scope = ‘global’;<br />function checkscope() {<br />var scope = ‘local’;<br /> al...
<script type=‘text/javascript’><br />var scope = ‘global’;<br />function checkscope() {<br /> scope = ‘local’;<br /> alert...
varがないと<br />どこで参照/代入しても<br />グローバル変数扱い<br />
varの省略<br />ダメ!ゼッタイ!<br />
そもそもグローバル変数は(ry<br />
<script type='text/javascript'><br />function checkscope() {<br />  for(vari=0; i<2; i++){ alert(i); }<br />  alert(i);<br...
<script type='text/javascript'><br />function checkscope(i) {<br /> ...<br />  for(vari=0; i<2; i++){ alert(i); }<br />  a...
スコープ=関数<br />
<script type='text/javascript'><br />function checkscope1() {<br />  alert(hoge);<br />varhoge = 1;<br />  alert(hoge);<br...
function文とvar文は<br />実行する前に<br />スコープに登録<br />
<script type='text/javascript'><br />checkscope1(); // ここで関数を呼べる<br />function checkscope1() {<br /> alert(hoge); // ここで変数...
<script type='text/javascript'><br />checkscope1(); // ここで関数を呼べ”ない”!<br />var checkscope1 = function() {alert(‘hoge’);}<br...
alert(hoge);<br />hoge = 10;<br />未定義の変数を参照すると実行時エラー<br />代入するとグローバル変数を作成<br />var fuga;<br />alert(fuga);<br />未代入の変数を参照す...
スコープチェーン<br />
・globalオブジェクト(全体で一つ)<br />global変数やglobalな関数は<br />globalオブジェクトのプロパティ/メソッド<br />・callオブジェクト(関数が呼び出されるごと)<br />関数内の変数や関数内関数...
globalオブジェクト(ブラウザの場合)<br />// globalスコープの変数代入は<br />var g_hoge = 1;<br />// 以下の代入と等価<br />window.g_hoge = 1;<br />windowオブ...
callオブジェクト<br />実行時に暗黙的に作成されるオブジェクト<br />直接参照/編集不可<br />function hoge() {<br />  var fuga = 100;<br />}<br />callオブジェクト<br...
変数参照順序<br />globalオブジェクト<br />window.g_hoge = 1<br />window.outer<br />global<br />var g_hoge = 1;<br />outer();<br />func...
スコープチェーン<br />がわかると<br />クロージャが<br />わかる!!<br />
詳しくは8章で<br />
Upcoming SlideShare
Loading in …5
×

サイ本読書会4章変数

1,213 views

Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

サイ本読書会4章変数

  1. 1. typer<br />サイ本読書会4章 変数<br />
  2. 2. 今日はこれだけ覚えて帰りましょう<br />
  3. 3. スコープ=関数<br />
  4. 4. 大事なことなので(ry<br />
  5. 5. スコープ=関数<br />
  6. 6. 別の言い方をすると<br />
  7. 7. スコープ!=ブロックif(hoge){var hoge;}スコープ!=ファイル<script src=‘hoge.js’ /><br />
  8. 8. スコープ=関数<br />
  9. 9. <ul><li>変数の宣言
  10. 10. 変数のスコープ
  11. 11. GC(ガベージコレクション)
  12. 12. スコープチェーン</li></ul>今日は変数の話<br />
  13. 13. <script type=‘text/javascript’><br />var scope = ‘global’;<br />function checkscope() {<br />var scope = ‘local’;<br /> alert(scope);<br />}<br />checkscope(); // => local<br />alert(scope); // => global<br /></script><br />変数の宣言 - var<br />
  14. 14. <script type=‘text/javascript’><br />var scope = ‘global’;<br />function checkscope() {<br /> scope = ‘local’;<br /> alert(scope);<br />}<br />checkscope(); // => local<br />alert(scope); // => local<br /></script><br />変数の宣言 - varの省略<br />
  15. 15. varがないと<br />どこで参照/代入しても<br />グローバル変数扱い<br />
  16. 16. varの省略<br />ダメ!ゼッタイ!<br />
  17. 17. そもそもグローバル変数は(ry<br />
  18. 18. <script type='text/javascript'><br />function checkscope() {<br /> for(vari=0; i<2; i++){ alert(i); }<br /> alert(i);<br />}<br />checkscope(); // => 0, 1, 2<br /></script><br />変数宣言の慣用句<br />
  19. 19. <script type='text/javascript'><br />function checkscope(i) {<br /> ...<br /> for(vari=0; i<2; i++){ alert(i); }<br /> alert(i);<br />}<br />checkscope(10);// => 0, 1, 2<br /></script><br />変数宣言の慣用句 – やりがち?<br />
  20. 20. スコープ=関数<br />
  21. 21. <script type='text/javascript'><br />function checkscope1() {<br /> alert(hoge);<br />varhoge = 1;<br /> alert(hoge);<br />}<br />function checkscope2() {alert(hoge);}<br />checkscope1(); // => undefined, 1<br />checkscope2(); // => 未定義エラー<br /></script><br />変数宣言のわな?<br />
  22. 22. function文とvar文は<br />実行する前に<br />スコープに登録<br />
  23. 23. <script type='text/javascript'><br />checkscope1(); // ここで関数を呼べる<br />function checkscope1() {<br /> alert(hoge); // ここで変数を参照できる<br /> var hoge;<br />}<br /></script><br />functionとvar<br />
  24. 24. <script type='text/javascript'><br />checkscope1(); // ここで関数を呼べ”ない”!<br />var checkscope1 = function() {alert(‘hoge’);}<br /></script><br />// varを付ける付けないでエラーメッセージが違うよ<br /><script type='text/javascript'><br />checkscope2(); // ここで関数を呼べ”ない”!<br />checkscope2 = function() {alert(‘hoge’);}<br /></script><br />ちなみにfunctionリテラル<br />
  25. 25. alert(hoge);<br />hoge = 10;<br />未定義の変数を参照すると実行時エラー<br />代入するとグローバル変数を作成<br />var fuga;<br />alert(fuga);<br />未代入の変数を参照するとundefined<br />未定義と未代入<br />
  26. 26. スコープチェーン<br />
  27. 27.
  28. 28. ・globalオブジェクト(全体で一つ)<br />global変数やglobalな関数は<br />globalオブジェクトのプロパティ/メソッド<br />・callオブジェクト(関数が呼び出されるごと)<br />関数内の変数や関数内関数は<br />callオブジェクトのプロパティ/メソッド<br />スコープを管理するオブジェクト<br />
  29. 29. globalオブジェクト(ブラウザの場合)<br />// globalスコープの変数代入は<br />var g_hoge = 1;<br />// 以下の代入と等価<br />window.g_hoge = 1;<br />windowオブジェクト<br />g_hoge = 1<br />// よく利用されるglobalプロパティ<br />document.write(“hoge”);<br />// 以下の呼び出しと等価<br />window.document.write(“hoge”);<br />windowオブジェクト<br />document<br />
  30. 30. callオブジェクト<br />実行時に暗黙的に作成されるオブジェクト<br />直接参照/編集不可<br />function hoge() {<br /> var fuga = 100;<br />}<br />callオブジェクト<br />fuga = 100<br />
  31. 31. 変数参照順序<br />globalオブジェクト<br />window.g_hoge = 1<br />window.outer<br />global<br />var g_hoge = 1;<br />outer();<br />function outer() {<br /> var fuga = 10;<br />}<br />callオブジェクト<br />outerCall.fuga = 10<br />outerCall.inner<br />function inner() {<br /> var hoge = 100;<br /> alert(fuga);<br />}<br />callオブジェクト<br />innerCall.hoge = 100<br />
  32. 32. スコープチェーン<br />がわかると<br />クロージャが<br />わかる!!<br />
  33. 33. 詳しくは8章で<br />
  34. 34. スコープに関する<br />クイズ<br />
  35. 35. <body><br /><script type='text/javascript'><br />function hoge(){ ... }<br /></script><br /><!-– ボタンクリック時にほげほげ処理をさせたい --><br /><button onclick=‘hoge()’></button><br /><!-- 処理に応じて任意のテンプレートが呼ばれる --><br />{include ...}<br /></body><br />include先のscriptと関数名が絶対に<br />衝突しないようにするにはどうすれば良い?<br />スコープにまつわるクイズ<br />
  36. 36. ・javascript lint<br />変数の多重定義とか if(x = y)とかいろいろチェックしてくれます<br />・”use strict”;<br />ECMAScript5版で導入された仕様今のところFirefox4限定だけど変数宣言などを厳しくチェック<br />便利ツール<br />

×