JavaScript 関数のコンテキストのルールは何ですか?

1. ルール 1: Object.Method()

對象.方法()
オブジェクトがドット化され、そのメソッド関数が呼び出されると、関数のコンテキストはドット化されたオブジェクトになります。

1.1 ケース1

関数fn() {
    コンソールにログ出力します。
}
var obj = {
    66,
    b: 33,
    注釈: 注釈
}
obj.fn();

出力：

99

1.2 ケース2

var obj1 = {
    66,
    b: 33,
    fn:関数(){
        コンソールにログ出力します。
    }
}
var obj2 = {
    66,
    b: 33,
    引数: obj1.fn
}
obj2.fn();

出力：

7

1.3 ケース3

関数outer() {
    var a = 11;
    var b = 22;
    戻る {
        33,
        b: 44,
        fn:関数(){
            コンソールにログ出力します。
        }
    }
}
外側のfn();

出力：

77

1.4 ケース4

関数fun() {
    コンソールにログ出力します。
}
var obj = {
    a: 1、b: 2、c: [{ a: 3、b: 4、c: 楽しい }]
};
var a = 5;
obj.c[0].c();

出力：

7

2. ルール 2: Function()

函數()
括弧は関数を直接呼び出し、関数のコンテキストはウィンドウオブジェクトです。

2.1 ケース1

var obj1 = {
    a: 1、b: 2、fn: 関数 () {
        コンソールにログ出力します。
    }
}
var a = 3;
var b = 4;
var fn = obj1.fn;
関数fn();

出力：

7

2.2 ケース2

関数fun() {
    this.a + this.b を返します。
}
var a = 1;
var b = 2;
var obj = {
    a: 3, 
    b: fun(), // ルール2を適用
     楽しい：楽しい
}
var result = obj.fun(); // ルール1が適用される
console.log(結果);

出力：

6

3. ルール3: 配列の添え字

數組下標
配列（配列のようなオブジェクト）は呼び出しのための関数を列挙し、コンテキストはこの配列（配列のようなオブジェクト）です。

3.1 ケース1

var arr = ['A', 'B', 'C', 関数() {
    コンソールにログ出力します。
}];
ar[3]();

出力：

あ

3.2 ケース2

関数fun() {
    引数[3]();
}
fun('A', 'B', 'C', 関数() {
    コンソールにログ出力します。
});

出力：

B

4. ルール4: IIFE

(function(){})();
IIFE (即時実行可能関数) 内の関数のコンテキストは、ウィンドウオブジェクトです。

4.1 ケース1

var a = 1;
var obj = {
    a: 2、
    楽しい: (関数() {
        var a = this.a; // ルール1が適用される
        return function () { // ルール4が適用される
            console.log(a + this.a); // 2+1
        }
    })()
};
obj.fun();

出力：

3

5. ルール5: タイマーと遅延

setInterval(函數,時間);
setTimeout(函數,時間);
タイマーおよび遅延呼び出し関数は、ウィンドウオブジェクトをコンテキストとして使用します。

5.1 ケース1

var obj = {
    a: 1、b: 2、関数() {
        コンソールにログ出力します。
    }
}
var a = 3;
var b = 4;
setTimeout(obj.fun, 2000); // ルール5が適用される

出力：

7

5.2 ケース2

var obj = {
    a: 1、b: 2、関数() {
        コンソールにログ出力します。
    }
}
var a = 3;
var b = 4;
setTimeout(関数() {
	obj.fun(); //ルール1を適用
}, 2000);

出力：

3

6. ルール6: イベント処理関数

DOM元素.onclick = function(){};
イベントハンドラーのコンテキストは、イベントがアタッチされた DOM 要素です。

6.1 ケース1

次の効果を実現してください: クリックされたボックスはどれも赤に変わります。これを実現するには、同じイベント処理関数を使用する必要があります。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <title>ルール 6: イベント処理関数</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }

        本体div{
            フロート: 左;
            幅: 100ピクセル;
            高さ: 100px;
            右マージン: 10px;
            境界線: 1px実線 #000;
        }
    </スタイル>
</head>

<本文>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <スクリプト>
        関数 changeColor() {
            this.style.backgroundColor = '赤';
        }
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');
        box1.onclick = 色を変更します。
        box2.onclick = 色を変更します。
        box3.onclick = 色を変更します。
    </スクリプト>
</本文>

</html>

結果：

ここに画像の説明を挿入

6.2 ケース2

次の効果を実現してください: ボックスをクリックすると、2000 ミリ秒後にボックスが赤くなります。これを実現するには、同じイベント処理関数が必要です。

ケース 1 との違い: バックアップコンテキストが必要です。

関数 changeColor() {
    var self = this; // バックアップコンテキスト setTimeout(function () {
        self.style.backgroundColor = '赤';
    }, 2000);
}
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
box1.onclick = 色を変更します。
box2.onclick = 色を変更します。
box3.onclick = 色を変更します。

JavaScript 関数のコンテキストルールに関するこの記事はこれで終わりです。JavaScript 関数のコンテキストルールの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: