首页 > 资讯 > 前端开发 > JavaScript >JavaScript函数中上下文有哪些规则

704

分享到

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

2024-04-02 19:04:59 704人浏览八月长安

摘要

目录1.规则1：对象.方法()1.1 案例11.2 案例21.3 案例31.4 案例42.规则2：函数()2.1 案例12.2 案例23.规则3：数组下标3.1 案例13.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 函数上下文规则内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript函数中上下文有哪些规则

本文链接: https://www.lsjlt.com/news/154839.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

目录1.规则1：对象.方法()1.1 案例11.2 案例21.3 案例31.4 案例42.规则2：函数()2.1 案例12.2 案例23.规则3：数组下标3.1 案例13.2 案例2...

99+

2024-04-02
JavaScript函数调用规则有哪些

本篇文章给大家分享的是有关JavaScript函数调用规则有哪些，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。JavaScript函数调用规则...

99+

2024-04-02
JavaScript中原型有哪些规则

今天就跟大家聊聊有关JavaScript中原型有哪些规则，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。javascript是一种什么语言javascript是一种动态类型、弱类型的语...

99+

2023-06-14
JavaScript中常用at规则有哪些

本篇内容主要讲解“JavaScript中常用at规则有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript中常用at规则有哪些”吧! 常用a...

99+

2024-04-02
Python定义函数的规则有哪些

Python函数定义规则：1.函数代码块以def关键词开头，后接函数名称和小括号()，小括号后的冒号“:”表示函数体的开始；2.函数以return语句结束，用于返回结果，不带表达式的return相当于返回None；3.函数体应遵循缩进语法；...

99+

2024-04-02
Java函数的编码规则有哪些

小编给大家分享一下Java函数的编码规则有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！内部函数参数尽量使用基础类型案例一：内部函数参数尽量使用基础类型现象描...

99+

2023-06-02
PHP函数的命名规则有哪些？

php 函数命名规则：1. 驼峰命名法，首字母小写，后续单词首字母大写；2. 使用动词或形容词作为函数名，清晰说明函数作用；3. 避免使用下划线或连字符；4. 使用描述性的函数名。实战示...

99+

2024-04-18

php 命名规则
javascript正则函数都有哪些

javascript中的正则函数有：1.test，检测一个字符串是否匹配某个模式；2.match，在字符串内检索指定的值；3.replace，在字符串中替换字符；4.search，检索字符串中指定的子字符串；javascript中的正则函数...

99+

2024-04-02
css中@规则有哪些

小编给大家分享一下css中@规则有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一个at-rule就是一个CSS语句，...

99+

2024-04-02
Python中有哪些下划线的潜规则

本篇内容主要讲解“Python中有哪些下划线的潜规则”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Python中有哪些下划线的潜规则”吧!1. 单前导下划线 _var当涉及到变量和方...

99+

2023-06-16
C++头文件有哪些规则

C++头文件有哪些规则，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。C++中的C++头文件是用户应用程序和函数库之间的桥梁和纽带，在整个软件中，头文件不是最重要...

99+

2023-06-17
C++ 友元函数的声明规则有哪些？

友元函数声明规则如下：声明必须位于类的外部。可以声明为成员函数或全局函数。可通过指针或引用传递类的对象。 C++ 友元函数的声明规则友元函数声明友元函数是一种特殊的函数，可以访问类...

99+

2024-04-16

c++ 友元函数作用域
JavaScript正则表达式函数有哪些

这篇文章主要为大家展示了“JavaScript正则表达式函数有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript正则表达式函数有哪些”这篇文...

99+

2024-04-02
数据库中加锁规则有哪些

这篇文章主要介绍数据库中加锁规则有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！间隙锁再加上行锁，很容易在判断是否会出现锁等待的问题上犯错。因为间隙锁在可重复读隔离级别下才有效，...

99+

2024-04-02
PHP 函数命名中的下划线和连字符的使用规则有哪些？

php 函数命名规则：下划线：用于分隔单词，提高可读性；适用于私有方法或变量。连字符：不应用于函数命名。最佳实践：避免连字符；使用下划线分隔单词；私有或受保护的方法或变量名前加下划线。 ...

99+

2024-04-20

php 命名规则
Python中有哪些关联规则

这期内容当中小编将会给大家带来有关Python中有哪些关联规则，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。1.1 基本概念项集：item的集合，如集合{牛奶、麦片、糖}是一个3项集，可以认为...

99+

2023-06-15
SQLserver中有哪些排序规则

这篇文章将为大家详细讲解有关SQLserver中有哪些排序规则，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。ASCII编码在计算机发明后不久，计算机只在美国...

99+

2024-04-02
java中有哪些规则引擎

这期内容当中小编将会给大家带来有关java中有哪些规则引擎，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。Java的特点有哪些Java的特点有哪些1.Java语言作为静态面向对象编程语言的代表，实现了面向对...

99+

2023-06-14
SQLServer数据库中有哪些排序规则

这期内容当中小编将会给大家带来有关SQLServer数据库中有哪些排序规则，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。　　SQLServer2005数据库的排序规则有哪...

99+

2024-04-02
MySQL 中有哪些排序规则

本篇文章为大家展示了MySQL 中有哪些排序规则，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。简述说起排序规则就离不开字符集，严格来说，排序规则是依赖于字符集的。字...

99+

2024-04-02