脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → JavaScript 函数上下文规则

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

 更新时间：2021年10月19日 14:31:40   作者：daixiangcn  
上下文是从英文context翻译过来，指的是一种环境。在软件工程中，上下文是一种属性的有序序列，它们为驻留在环境内的对象定义环境。在对象的激活过程中创建上下文，对象被配置为要求某些自动服务。又比如计算机技术中，相对于进程而言，上下文就是进程执行时的环境

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

您可能感兴趣的文章:

相关文章

  • innerText 使用示例

    innerText 使用示例

    在元素间的文本就是通过对象.innerText，下面有个不错的示例，感兴趣的朋友可以参考下
    2014-01-01
  • js oncontextmenu事件使用详解

    js oncontextmenu事件使用详解

    这篇文章主要介绍了js oncontextmenu事件使用详解,需要的朋友可以参考下
    2017-03-03
  • 转换字符串为json对象的方法详解

    转换字符串为json对象的方法详解

    这篇文章主要介绍了转换字符串为json对象的方法。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 关于前端要知道的 AST知识

    关于前端要知道的 AST知识

    这篇文章主要介绍了关于前端要知道的 AST知识,在计算机科学中，抽象语法树是源代码语法结构的一种抽象表示,需要的朋友可以参考下
    2023-04-04
  • JavaScript的事件流你了解吗

    JavaScript的事件流你了解吗

    这篇文章主要为大家介绍了JavaScript的事件流，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>
    2022-01-01
  • JavaScript中几个重要的属性(this、constructor、prototype)介绍

    JavaScript中几个重要的属性(this、constructor、prototype)介绍

    this表示当前对象，如果在全局作用范围内使用this，则指代当前页面对象window，prototype本质上还是一个JavaScript对象，constructor始终指向创建当前对象的构造函数
    2013-05-05
  • scrollTop 用法说明

    scrollTop 用法说明

    scrollTop属性是什么? 有些情况下,“元素中内容”的高度会超过“元素本身”的高度,
    2009-06-06
  • JS排序方法（sort，bubble，select，insert）代码汇总

    JS排序方法（sort，bubble，select，insert）代码汇总

    新技术一直在不断变化，掌握一些基础是未来学习不断更新的技术的坚实基础。近来闲来无事,为了温习一下从前学的数据结构，将数据结构中的排序算法用JS实现了一遍，
    2016-01-01
  • 什么是JavaScript

    什么是JavaScript

    JavaScript是一种基于对象和事件驱动的客户端脚本语言。JavaScript最初的设计是为了检验HTML表单输入的正确性。javaScript起源于Netscape公司的LiveScript语言。
    2009-08-08
  • ECMAScript6快速入手攻略

    ECMAScript6快速入手攻略

    本文译自 Github 上的一篇文章，目的是对还不太熟悉 ES6语法的同学做一个简单的扫盲。下面一起来学习。
    2016-07-07

最新评论