JavaScript函数中上下文有哪些规则

Jewel ·

更新时间:2024-09-20

· 1407 次阅读

1.规则1：对象.方法()

1.1 案例1

1.2 案例2

1.3 案例3

1.4 案例4

2.规则2：函数()

2.1 案例1

2.2 案例2

3.规则3：数组下标

3.1 案例1

3.2 案例2

4.规则4：IIFE

4.1 案例1

5.规则5：定时器、延时器

5.1 案例1

5.2 案例2

6.规则6：事件处理函数

6.1 案例1

6.2 案例2

1.规则1：对象.方法()

对象.方法()
对象打点调用它的方法函数，则函数的上下文是这个打点的对象。

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.规则2：函数()

函数()
圆括号直接调用函数，则函数的上下文是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(),  // 适用规则2
     fun: fun
}
var result = obj.fun(); // 适用规则1
console.log(result);

输出结果：

6

3.规则3：数组下标

数组下标
数组（类数组对象）枚举出函数进行调用，上下文是这个数组（类数组对象）。

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.规则4：IIFE

(function(){})();
IIFE（立即可执行函数）中的函数，上下文是window对象。

4.1 案例1


var a = 1;
var obj = {
    a: 2,
    fun: (function () {
        var a = this.a;       // 适用规则1
        return function () {  // 适用规则4
            console.log(a + this.a);  // 2+1
        }
    })()
};
obj.fun();

输出结果：

3

5.规则5：定时器、延时器

setInterval(函数,时间);
setTimeout(函数,时间);
定时器、延时器调用函数，上下文是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);  // 适用规则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();          // 适用规则1
}, 2000);

输出结果：

3

6.规则6：事件处理函数

DOM元素.onclick = function(){};
事件处理函数的上下文是绑定事件的DOM元素。

6.1 案例1

请实现效果：点击哪个盒子，哪个盒子就变红，要求使用同一个事件处理函数实现。


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>规则6：事件处理函数</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>

实现效果：

6.2 案例2

请实现效果：点击哪个盒子，哪个盒子在2000毫秒之后就变红，要求使用同一个事件处理函数实现。

与案例1的区别：需要备份上下文。


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函数中上下文有哪些规则的文章就介绍到这了,更多相关JavaScript 函数上下文规则内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

上下文 JavaScript

1024 个赞