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

news/2025/2/12 0:59:35/
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加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.a和this.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.a和this.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.ppmy.cn/news/1266276.html

相关文章

docker-compose的介绍与使用

docker-compose的介绍与使用

一、docker-compose 常用命令和指令 1. 概要 默认的模板文件是 docker-compose.yml&#xff0c;其中定义的每个服务可以通过 image 指令指定镜像或 build 指令&#xff08;需要 Dockerfile&#xff09;来自动构建。 注意如果使用 build 指令&#xff0c;在 Dockerfile 中设置…
阅读更多...
读程序员的README笔记08_依赖管理

读程序员的README笔记08_依赖管理

1. 行为准则 2. 依赖管理 2.1. 在现有的代码上增加一个依赖似乎是一个简单的决定 2.2. 不要重复自己”(Don’t repeat yourself&#xff0c;DRY)是一个通常被教导的原则 2.3. 依赖关系带来了风险 2.3.1. 不兼容的变化 2.3.2. 循环依赖 2.3.3. 版本冲突 2.3.4. 缺乏控制 …
阅读更多...
YOLOv8改进 | 2023主干篇 | EfficientViT替换Backbone（高效的视觉变换网络）

YOLOv8改进 | 2023主干篇 | EfficientViT替换Backbone（高效的视觉变换网络）

一、本文介绍 本文给大家带来的改进机制是EfficientViT&#xff08;高效的视觉变换网络&#xff09;&#xff0c;EfficientViT的核心是一种轻量级的多尺度线性注意力模块&#xff0c;能够在只使用硬件高效操作的情况下实现全局感受野和多尺度学习。本文带来是2023年的最新版本…
阅读更多...
Swagger快速上手

Swagger快速上手

快速开始&#xff1a; 导入maven包 <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.7.0</version> </dependency><dependency><groupId>io.springfox<…
阅读更多...
【Docker】进阶之路：（十一）Docker存储

【Docker】进阶之路：（十一）Docker存储

【Docker】进阶之路&#xff1a;&#xff08;十一&#xff09;Docker存储 Docker存储简介storage driverdata volumevolumebind mounttmpfs mount Docker提供了4种存储方式&#xff1a;默认存储、volume(数据卷)、bind mounts(绑定挂载)、tmpfsmount(仅在Linux环境中提供)。其中…
阅读更多...
到底什么是DevOps

到底什么是DevOps

DevOps不是一组工具&#xff0c;也不是一个特定的岗位。在我看来DevOps更像是一种软件开发文化&#xff0c;一种实现快速交付能力的手段。 DevOps 强调的是高效组织团队之间如何通过自动化的工具协作和沟通来完成软件的生命周期管理&#xff0c;从而更快、更频繁地交付更稳定的…
阅读更多...
Word插件-好用的插件-批量插入图片-大珩助手

Word插件-好用的插件-批量插入图片-大珩助手

现有100张图片&#xff0c;需要批量插入word中&#xff0c;并在word中以每页6张图片的形式呈现&#xff0c;请问怎样做&#xff1f; 使用word大珩助手&#xff0c;多媒体-插入图片&#xff0c;根据图片的长宽&#xff0c;选择连续图片、一行2个图或一行3个图&#xff0c;可一次…
阅读更多...
解决HTTP 429错误的Scrapy中间件配置

解决HTTP 429错误的Scrapy中间件配置

引言 在进行网络数据抓取时&#xff0c;经常会遇到HTTP 429错误&#xff0c;表示请求速率已超出API限制。为避免封禁或限制访问&#xff0c;需要调整Scrapy的请求速率&#xff0c;以在不触发HTTP 429错误的情况下完成数据抓取。针对这一问题&#xff0c;可使用Scrapy的AutoThr…
阅读更多...
最新文章

Copyright @ 2022~2023