TIL. NO7. JAVASSCRIPT(6)関数


1.有効範囲


-領域変数(Local Variable):領域変数の有効範囲が関数内でない
-グローバル変数(Global Variable):グローバル変数の有効範囲はアプリケーショングローバル
グローバル変数は使用しないほうがいいです.様々な理由で値が変更される場合があります.
変数を宣言するときはvarを加えることに慣れなければならない.グローバル変数を使用する必要がある場合は、その理由を明確にするときに使用してください.
グローバル変数を使用しない場合は、次の匿名関数を呼び出してこの目的を達成できます.
(function(){
    var MYAPP = {}
    MYAPP.calculator = {
        'left' : null,
        'right' : null
    }
    MYAPP.coordinate = {
        'left' : null,
        'right' : null
    }
    MYAPP.calculator.left = 10;
    MYAPP.calculator.right = 20;
    function sum(){
        return MYAPP.calculator.left + MYAPP.calculator.right;
    }
    document.write(sum());
}())

  • 有効範囲の目標
    :JSの領域変数は関数でのみ有効です.

  • 静的有効範囲(用語範囲)せいてきゆうこうはんい(ようごはんい)
    :JSには、関数宣言時の有効範囲があります.
  • 2.値としての関数とコールバック


    JSでは、関数もオブジェクト(値)
    function a(){}
    =
    var a = function(){}
  • メソッド(メソッド)=オブジェクト属性値としての関数
  • a ={
    b : function(){
    }
    };
    {b:function(){}}はオブジェクト
    bはキー/変数/属性(property)
    function(){}はvalue/メソッド(method)

  • first-class citizer(object)=多様な用途に使用可能なデータ(JSでの関数適用)

  • コールバック(callback)=値伝達関数を呼び出すことができるため、関数の動作方法を完全に変更することができる.
  • ≪同期処理|Synchronize Process|oem_src≫:リクエストを送信すると、応答(=結果)を受信する必要がありますが、次の手順に従います.
    非同期処理:応答(=結果)に関係なく、要求を送信します.
  • 非同期JavaScriptとXML(非同期制御)
  • AJAXの強力な機能は「非同期」で、ページ全体をリフレッシュする必要はありません.この非同期性を使用すると、ページ全体のイベントではなく、一部だけを更新できます.
    リファレンス

    3.キャビネット(クローズ)

  • 内部関数:
  • 内部関数
  • 外部関数:関数outter
  • 内部関数から外部関数の領域変数にアクセスできます.
    function outter(){
        function inner(){
            var title = 'coding everybody'; 
            alert(title);
        }
        inner();
    }
    outter();

  • Closer:内部関数は外部関数の領域変数にアクセスでき、外部関数の実行が完了して外部関数が消えても内部関数は外部関数の変数にアクセスできます.

  • private variable:オブジェクトの外部にアクセスできない外部非表示のプロパティまたはメソッドを表します.
    利点:データを安全に格納および変更できます.
  • モジュールに関する例)
    // 잘못된 예제
    var arr = []
    for(var i = 0; i < 5; i++){
        arr[i] = function(){
            return i;
        }
    }
    for(var index in arr) {
        console.log(arr[index]());
    }
    
    // 수정된 예제
    var arr = []
    for(var i = 0; i < 5; i++){
        arr[i] = function(id) {
            return function(){
                return id;
            }
        }(i);
    }
    for(var index in arr) {
        console.log(arr[index]());
    }
    (生活コードJunbyeコメント参照)

    4. arguments


    a=0;
    a+=1;//a=a+1

  • パラメータ(類似の配列オブジェクト)オブジェクトを使用して、呼び出し時に提供される各引数のエントリを含む関数内のすべての引数を参照できます.

  • パラメータ数
  • function one(arg1){
        console.log(
            'one.length', one.length,
            'arguments', arguments.length
        );
    }
    one('val1', 'val2');  
    // one.length 1 arguments 2 
    関数の名前.length:関数をパラメータとして定義するパラメータ数
    arguments.length:関数を呼び出すときに渡されるパラメータの数

    5.関数の呼び出し

    o1 = {val1:1, val2:2, val3:3}
    o2 = {v1:10, v2:50, v3:100, v4:25}
    function sum(){
        var _sum = 0;
        for(name in this){
            _sum += this[name];
        }
        return _sum;
    }
    alert(sum.apply(o1)) // 6
    alert(sum.apply(o2)) // 185
    sumのo 1が属する方法はこう言える.関数sumでは、この値はグローバルオブジェクトではなくo 1であることを意味します.JavaScriptでは、関数は独立したオブジェクトとして存在し、他のオブジェクトの所有者のようにapplyまたはcallメソッドで実行できます.
    nullをapplyの最初のパラメータとして渡すと、applyを実行する関数インスタンスはグローバルオブジェクト(ブラウザではwindow)をコンテキストとして実行されます.