〖大前端 - 基础入门三大核心之JS篇(51)〗- 面向对象之认识上下文与上下文规则

news2024/11/17 11:40:49
  • 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费如需要项目实战或者是体系化资源,文末名片加V!
  • 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。
  • 荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker全栈领域优质创作者

  • 🏆 白宝书系列
    • 🏅 启示录 - 攻城狮的自我修养
    • 🏅 Python全栈白宝书
    • 🏅 ChatGPT实践指南白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书


文章目录

  • ⭐认识上下文
  • ⭐上下文规则
    • 🌟上下文规则1
    • 🌟上下文规则2
    • 🌟上下文规则3
    • 🌟上下文规则4
    • 🌟上下文规则5
    • 🌟上下文规则6

⭐认识上下文

小时候学习做阅读理解时,老师经常会强调,注意上下文。比如有一个句子:这是一个好习惯,我们应该坚持。如果不结合上文的意思,根本不知道“这”指的是什么。如果结合上文,比如,随手关灯,这是一个好习惯,我们应该坚持。我们就知道此时的“这”指的是“随手关灯”,那么整个句子的语义就好理解了。

在函数中,也经常需要结合上下文来编写和理解代码。

函数中可以使用this,表示函数的上下文

与中文中的“这”类似,函数中的this具体指代什么必须通过调用函数时的“前言后语”来判断

下面看一个例子:

  • 第一种调用方式:对象打点调用自己的方法:
var xiaomumu = {
    name: '小沐沐',
    age: 2,
    sex: '男',
    hobbies: ['秋千', '滑梯'],
    sayHello: function () {
        console.log('Hello, 我是' + this.name + ',我今年' + this.age + '岁了');
    }
};
xiaomumu.sayHello();   // Hello, 我是小沐沐,我今年2岁了
  • 第二种调用方式:对象的方法被赋值给一个全局变量,全局变量加圆括号调用:
var xiaomumu = {
    name: '小沐沐',
    age: 2,
    sex: '男',
    hobbies: ['秋千', '滑梯'],
    sayHello: function () {
        console.log('Hello, 我是' + this.name + '我今年' + this.age + '岁了');
    }
};

var sayHello = xiaomumu.sayHello;   // 将这个属性存入了一个全局变量(变量的名称可以和属性名相同,方便理解)
sayHello();   //Hello, 我是undefined我今年undefined岁了

这两种调用方式,this指代的对象分别是:

  • 第一种,对象打点调用方式,函数中的this指代这个打点的对象
  • 第二种,圆括号直接调用函数,函数中的this指代window对象

其实可以这么理解,第二种中,因为全局变量都是window的属性,相当于用window.sayHello()的方式调用了这个函数。所以this指代的就是window对象。

所以我们一定要记住:只有函数被调用时,我们才能知道this指代的是什么函数的上下文由函数的调用方式决定,同一个函数,用不同的形式调用它,则函数的上下文不同

⭐上下文规则

我们知道,不同的调用方式,函数的上下文就不同,那么我们怎么去判断函数的上下文呢?这就要学习各种不同的函数调用规则。

🌟上下文规则1

规则1:对象打点调用它的方法函数,则函数的上下文是这个打点的对象

下面看几个案例,练习一下:

题目一: 下面代码的运行结果是什么?

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

obj.fn();

运行结果:33

题目二: 下面代码的运行结果是什么?

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

var obj2 = {
    a: 3,
    b: 4,
    fn: obj1.fn
};

obj2.fn();

运行结果: 7

一定要记住,谁打点调用函数,函数中的this指代的就是谁

题目三: 下面代码的运行结果是什么?

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

outer().fn();

运行结果:77

上面的代码中,outer()返回了一个对象,相当于还是一个对象打点调用了函数,所以适用于对象打点调用函数,函数的上下文就是这个对象的规则。

题目四: 下面代码的运行结果是什么?

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

上面的代码中,最终调用函数的是obj.c[0]这个对象,所以函数中的this指代的就是obj.c[0]

🌟上下文规则2

规则2:圆括号直接调用函数,则函数的上下文是window对象

题目一: 下面代码的运行结果是什么?

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

题目二: 下面代码的运行结果是什么?

function fun() {
    return this.a + this.b;
}
var a = 1;
var b = 2;
var obj = {
    a: 3,
    b: fun(),
    fun: fun
};
var result = obj.fun();
console.log(result);

运行结果:6,题目分析如下:

image-20230509165256380

这是一道非常正规的面试题,大家一定要学会分析其中的代码逻辑

🌟上下文规则3

规则3:数组(类数组对象)枚举出函数进行调用,上下文是这个数组(类数组对象)

数组[下标]()

类数组对象:所有键名为自然数序列(从0开始),且有length属性的对象

arguments对象是最常见的类数组对象,它是函数的实参列表

题目一: 下面代码的运行结果是什么?

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

arr[3]();

运行结果: “A”

上面的代码适用规则3,this指代的就是arr这个数组

题目二: 下面代码的运行结果是什么?

function fun() {
    arguments[3]();
}

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

运行结果:“B”。我们可以打印一下arguments,可以看到arguments是一个类数组对象,里面其实就是fun()函数被调用时,传入的实参:

image-20230509164048474

🌟上下文规则4

规则4:IIFE中的函数,上下文是window对象。(IIFE在以前的文中提到过,是立即可执行函数。)

(function (){

​ //立即可执行函数

})()

题目一: 下面代码的运行结果是什么?

var a = 1;
var obj = {
    a: 2,
    fun: (function () {
        var a = this.a;
        return function () {
            console.log(a + this.a);
        }
    })()
};
obj.fun();

运行结果:3。这是一个大厂的面试题,题目分析如下:

image-20230509165927143

🌟上下文规则5

规则5:定时器、延时器调用函数,上下文是window对象

setInterval(函数,时间);

setTimeout(函数,时间);

题目一: 下面代码的运行结果是什么?

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

setTimeout(obj.fun, 2000);

运行结果:7。因为用延时器调用的函数,适用规则5,this指代的就是window对象,即this.athis.b的值分别是3,4

题目二: 下面代码的运行结果是什么?

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。这里要注意,延时器不是直接调用obj里的fun函数,而是一个匿名函数,这个匿名函数里又调用了obj.fun(),所以此时的this应指代的是obj这个对象,即this.athis.b的值分别是1,2

🌟上下文规则6

规则6:事件处理函数的上下文是绑定事件的DOM元素

DOM元素.onclick = function() {

};

题目一: 点击哪个盒子,哪个盒子就变红,要求使用同一个事件处理函数实现(不能用事件委托)

<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid #000;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <script>
        function setColorToRed(o) {
            this.style.backgroundColor = 'red';
        }
        
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');

        box1.onclick = function () {
            setColorToRed(box1);
        }
        box1.onclick = setColorToRed;
        box2.onclick = setColorToRed;
        box3.onclick = setColorToRed;
    </script>
</body>
</html>

运行结果:点击哪个盒子,哪个盒子就变红。这里的this指代的就是绑定事件的DOM元素;注意区分this和e.target的不同

题目二: 点击哪个盒子,哪个盒子在2000毫秒后就变红,要求使用同一个事件处理函数实现(不能用事件委托)

题目分析:这个题目其实就是上个题目+一个延时器,但是需要注意的是加上延时器后,this指代的可能会不一样,所以需要使用一个程序猿非常常用的技术:备份上下文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid #000;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <script>
        function setColorToRed(o) {
            //备份上下文
            var self = this;  // 通常使用self来备份上下文,也有使用that或_this的,这个技术非常的常用!

            setTimeout(() => {
                self.style.backgroundColor = 'red';
            }, 2000);
        }
        
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');

        box1.onclick = function () {
            setColorToRed(box1);
        }
        box1.onclick = setColorToRed;
        box2.onclick = setColorToRed;
        box3.onclick = setColorToRed;
    </script>
</body>
</html>

注意:程序员在书写this的时候通常会看一下这个this到底指代什么,需不需要备份

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1303298.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

UnoCSS 原子化开发初体验

UnoCSS 是一个即时的原子化 CSS 引擎&#xff0c;旨在灵活和可扩展。核心是不拘一格的&#xff0c;所有的 CSS 工具类都是通过预设提供的。再也不用为了取一个 classname 类名而烦恼了。 一、UnoCSS 特点 完全可定制&#xff1a;无核心工具&#xff0c;所有功能都通过预设提供…

DevEco Studio IDE 创建项目时候配置环境

DevEco Studio IDE 创建项目时候配置环境 一、安装环境 操作系统: Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、在配置向导的时候意外关闭配置界面该如何二次配置IDE环境。 打开IDE的界面是这样的。 点击Create Project进行环境配置。 点击OK后出现如…

(企业 / 公司项目) 企业项目如何使用jwt?

按照企业的项目然后写的小demo&#xff0c; 自己搞一个登录接口然后调用jwtUtil工具类 后端实现 创建一个通用模块common来实现jwt生成token 登录注册的基本实现逻辑思路 面试| ProcessOn免费在线作图,在线流程图,在线思维导图 注释挺详细的jwtUtil工具类&#xff0c; 封装的…

基于OpenCV+CNN+IOT+微信小程序智能果实采摘指导系统——深度学习算法应用(含python、JS工程源码)+数据集+模型(五)

目录 前言总体设计系统整体结构图系统流程图 运行环境Python环境TensorFlow 环境Jupyter Notebook环境Pycharm 环境微信开发者工具OneNET云平台 模块实现1. 数据预处理2. 创建模型并编译3. 模型训练及保存4. 上传结果5. 小程序开发1&#xff09;查询图片2&#xff09;查询识别结…

文献速递:多模态影像组学文献分享多模态放射组学预测直肠癌患者放疗引发的早期直肠炎和膀胱炎:一项机器学习研究

文献速递&#xff1a;多模态影像组学文献分享:多模态放射组学预测直肠癌患者放疗引发的早期直肠炎和膀胱炎&#xff1a;一项机器学习研究 01 文献速递介绍 Rectal cancer is the second most prevalent form of cancer in the large intestine, and its primary treatment …

Android---Kotlin 学习002

声明变量 在 Kotlin 中定义一个变量&#xff0c;通过关键字 var 开始。然后是变量名&#xff0c;在“:”后紧跟变量类型。 示例1&#xff1a;声明一个 int 类型的变量 var num:Int 1 示例2&#xff1a;声明一个 String 类型的变量 var str:String "Hello world&quo…

C# OpenCvSharp DNN 部署FastestDet

目录 效果 模型信息 项目 代码 下载 C# OpenCvSharp DNN 部署FastestDet 效果 模型信息 Inputs ------------------------- name&#xff1a;input.1 tensor&#xff1a;Float[1, 3, 512, 512] --------------------------------------------------------------- Outpu…

QT----第二天QMainWindow,各种控件

目录 第二天1 QMainWindow1.1 菜单栏1.2工具栏1.3 状态栏1.4 铆接&#xff08;浮动窗口&#xff09;和中心部件&#xff08;只能由一个&#xff09;2 资源文件添加 3、对话框Qdialog3.2 模态和非模态对话框3.2 消息对话框3.3 其他对话框 4 登陆界面5 按钮组控件5.1QToolButton5…

机器学习中的 Transformation Pipelines(Machine Learning 研习之十)

Transformation Pipelines 有许多数据转换步骤需要以正确的顺序执行。幸运的是&#xff0c;Scikit-Learn提供了Pipeline类来帮助处理这样的转换序列。下面是一个用于数值属性的小管道&#xff0c;它首先对输入特性进行归并&#xff0c;然后对输入特性进行缩放: from sklearn.…

Nginx访问FTP服务器文件的时效性/安全校验

背景 FTP文件服务器在我们日常开发中经常使用&#xff0c;在项目中我们经常把FTP文件下载到内存中&#xff0c;然后转为base64给前端进行展示。如果excel中也需要导出图片&#xff0c;数据量大的情况下会直接返回一个后端的开放接口地址&#xff0c;然后在项目中对接口的参数进…

微信小程序 ios 手机底部安全区适配

在开发微信小程序中&#xff0c;遇到 IOS 全面屏手机&#xff0c;底部小黑条会遮挡页面按钮或内容&#xff0c;因此需要做适配处理。 解决方案 通过 wx.getSystemInfo() 获取手机系统信息&#xff0c;需要拿到&#xff1a;screenHeight&#xff08;屏幕高度&#xff09;&#…

持续集成交付CICD:GitLabCI上传Nexus制品

目录 一、实验 1.GitLabCI上传Nexus制品 2.优化GitLabCI&#xff08;引用系统变量&#xff09; 3.添加if条件判断项目类型 4.优化GitLabCI&#xff08;模板类&#xff09; 二、问题 1.GitLabCI获取jar文件失败 2. GitLabCI获取流水线项目命名空间失败 3.GItLab Packag…

学习pytorch19 pytorch使用GPU训练2

pytorch使用GPU训练2 第二种使用gpu方式核心代码代码 macbook pro m1/m2 用mps &#xff0c; 是苹果arm芯片的gpu 第二种使用gpu方式核心代码 # 设置设备 device torch.device(cpu) # 使用cpu device torch.device(cuda) # 单台gpu device torch.device(cuda:0) # 使…

基于大语言模型的复杂任务认知推理算法CogTree

近日&#xff0c;阿里云人工智能平台PAI与华东师范大学张伟教授团队合作在自然语言处理顶级会议EMNLP2023上发表了基于认知理论所衍生的CogTree认知树生成式语言模型。通过两个系统&#xff1a;直觉系统和反思系统来模仿人类产生认知的过程。直觉系统负责产生原始问题的多个分解…

打包CSS

接上一个打包HTML继续进行CSS的打包 1.在之前的文件夹里的src文件夹创建一个css文件 2.在浏览器打开webpack——>中文文档——>指南——>管理资源——>加载CSS 3.复制第一句代码到终端 4.复制下图代码到webpack.config.js脚本的plugins&#xff1a;[.....]内容下…

计算机循环神经网络(RNN)

计算机循环神经网络&#xff08;RNN&#xff09; 一、引言 循环神经网络&#xff08;RNN&#xff09;是一种常见的深度学习模型&#xff0c;适用于处理序列数据&#xff0c;如文本、语音、时间序列等。RNN通过捕捉序列数据中的时间依赖关系和上下文信息&#xff0c;能够解决很…

网络编程_网络编程三要素,TCP协议,UDP协议

网络编程 文章目录 网络编程1 网络编程三要素1.1 IP地址1.1.1 IP地址分为两大类1.1.2 DOS常用命令1.1.3 特殊IP地址 1.2 InetAddress类_表示IP地址的类1.2.1 相关方法1.2.2 示例 1.3 端口和协议1.3.1 端口与端口号1.3.2 协议1.3.3 UDP协议1.3.4 TCP协议 2 UDP通信程序2.1 UDP发…

Leetcode 1631. 最小体力消耗路径

一、题目 1、题目描述 你准备参加一场远足活动。给你一个二维 rows x columns 的地图 heights &#xff0c;其中 heights[row][col] 表示格子 (row, col) 的高度。一开始你在最左上角的格子 (0, 0) &#xff0c;且你希望去最右下角的格子 (rows-1, columns-1) &#xff08;注意…

启动cad显示丢失mfc140u.dll怎么办?mfc140u.dll丢失有效解决方法分享

在CAD软件或其他软件中&#xff0c;有时候会出现由于找不到mfc140u.dll文件而无法执行代码的错误提示。这个问题可能是由于多种原因引起的&#xff0c;例如文件损坏、缺失或被病毒感染等。下面将介绍五个常见的解决方法&#xff0c;并解释mfc140u.dll丢失的原因以及该文件对CAD…

【BI】FineBI功能学习路径-20231211

FineBI功能学习路径 https://help.fanruan.com/finebi/doc-view-1757.html 编辑数据概述 1.1 调整数据结构 1.2 简化数据 2.1上下合并 2.2其他表添加列 2.3左右合并 新增分析指标 函数参考 https://help.fanruan.com/finereport/doc-view-1897.html 数值函数 日期函数 文…