サイ本読書会4章変数
Upcoming SlideShare
Loading in...5
×
 

サイ本読書会4章変数

on

  • 1,236 views

 

Statistics

Views

Total Views
1,236
Views on SlideShare
1,236
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

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

サイ本読書会4章変数 サイ本読書会4章変数 Presentation Transcript

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