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

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(),// 适用规则2fun: fun}var result = obj.fun(); // 适用规则1console.log(result);

输出结果：

6

3.规则3：数组下标 数组下标
数组（类数组对象）枚举出函数进行调用，上下文是这个数组（类数组对象）。
【JavaScript函数中上下文有哪些规则】
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; // 适用规则1return function () {// 适用规则4console.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
请实现效果：点击哪个盒子，哪个盒子就变红，要求使用同一个事件处理函数实现。

规则6：事件处理函数 - 锐客网* {margin: 0; padding: 0; }body div {float: left; width: 100px; height: 100px; margin-right: 10px; border: 1px solid #000; }123

实现效果：

文章图片

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 函数上下文规则内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！