上下文是從英文context翻譯過來，指的是一種環(huán)境。在軟件工程中，上下文是一種屬性的有序序列，它們?yōu)轳v留在環(huán)境內的對象定義環(huán)境。在對象的激活過程中創(chuàng)建上下文，對象被配置為要求某些自動服務。又比如計算機技術中，相對于進程而言，上下文就是進程執(zhí)行時的環(huán)境

1.規(guī)則1：對象.方法()

對象.方法()
對象打點調用它的方法函數(shù)，則函數(shù)的上下文是這個打點的對象。

1.1 案例1

function fn() {
    console.log(this.a + this.b);
}
var obj = {
    a: 66,
    b: 33,
    fn: fn
}
obj.fn();

輸出結果：

99

1.2 案例2

var obj1 = {
    a: 66,
    b: 33,
    fn: function () {
        console.log(this.a + this.b);
    }
}
var obj2 = {
    a: 66,
    b: 33,
    fn: obj1.fn
}
obj2.fn();

輸出結果：

7

1.3 案例3

function outer() {
    var a = 11;
    var b = 22;
    return {
        a: 33,
        b: 44,
        fn: function () {
            console.log(this.a + this.b);
        }
    }
}
outer.fn();

輸出結果：

77

1.4 案例4

function fun() {
    console.log(this.a + this.b);
}
var obj = {
    a: 1, b: 2, c: [{ a: 3, b: 4, c: fun }]
};
var a = 5;
obj.c[0].c();

輸出結果：

7

2.規(guī)則2：函數(shù)()

函數(shù)()
圓括號直接調用函數(shù)，則函數(shù)的上下文是window對象。

2.1 案例1

var obj1 = {
    a: 1, b: 2, fn: function () {
        console.log(this.a + this.b);
    }
}
var a = 3;
var b = 4;
var fn = obj1.fn;
fn();

輸出結果：

7

2.2 案例2

function fun() {
    return this.a + this.b;
}
var a = 1;
var b = 2;
var obj = {
    a: 3, 
    b: fun(),  // 適用規(guī)則2
     fun: fun
}
var result = obj.fun(); // 適用規(guī)則1
console.log(result);

輸出結果：

6

3.規(guī)則3：數(shù)組下標

數(shù)組下標
數(shù)組（類數(shù)組對象）枚舉出函數(shù)進行調用，上下文是這個數(shù)組（類數(shù)組對象）。

3.1 案例1

var arr = ['A', 'B', 'C', function () {
    console.log(this[0]);
}];
arr[3]();

輸出結果：

A

3.2 案例2

function fun() {
    arguments[3]();
}
fun('A', 'B', 'C', function () {
    console.log(this[1]);
});

輸出結果：

B

4.規(guī)則4：IIFE

(function(){})();
IIFE（立即可執(zhí)行函數(shù)）中的函數(shù)，上下文是window對象。

4.1 案例1

var a = 1;
var obj = {
    a: 2,
    fun: (function () {
        var a = this.a;       // 適用規(guī)則1
        return function () {  // 適用規(guī)則4
            console.log(a + this.a);  // 2+1
        }
    })()
};
obj.fun();

輸出結果：

3

5.規(guī)則5：定時器、延時器

setInterval(函數(shù),時間);
setTimeout(函數(shù),時間);
定時器、延時器調用函數(shù)，上下文是window對象。

5.1 案例1

var obj = {
    a: 1, b: 2, fun: function () {
        console.log(this.a + this.b);
    }
}
var a = 3;
var b = 4;
setTimeout(obj.fun, 2000);  // 適用規(guī)則5

輸出結果：

7

5.2 案例2

var obj = {
    a: 1, b: 2, fun: function () {
        console.log(this.a + this.b);
    }
}
var a = 3;
var b = 4;
setTimeout(function () {
	obj.fun();          // 適用規(guī)則1
}, 2000);

輸出結果：

3

6.規(guī)則6：事件處理函數(shù)

DOM元素.onclick = function(){};
事件處理函數(shù)的上下文是綁定事件的DOM元素。

6.1 案例1

請實現(xiàn)效果：點擊哪個盒子，哪個盒子就變紅，要求使用同一個事件處理函數(shù)實現(xiàn)。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>規(guī)則6：事件處理函數(shù)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body div {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 10px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <script>
        function changeColor() {
            this.style.backgroundColor = 'red';
        }
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');
        box1.onclick = changeColor;
        box2.onclick = changeColor;
        box3.onclick = changeColor;
    </script>
</body>

</html>

實現(xiàn)效果：

在這里插入圖片描述

6.2 案例2

請實現(xiàn)效果：點擊哪個盒子，哪個盒子在2000毫秒之后就變紅，要求使用同一個事件處理函數(shù)實現(xiàn)。

與案例1的區(qū)別：需要備份上下文。

function changeColor() {
    var self = this;         // 備份上下文
    setTimeout(function () {
        self.style.backgroundColor = 'red';
    }, 2000);
}
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
box1.onclick = changeColor;
box2.onclick = changeColor;
box3.onclick = changeColor;

到此這篇關于JavaScript函數(shù)中上下文有哪些規(guī)則的文章就介紹到這了,更多相關JavaScript 函數(shù)上下文規(guī)則內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: