【JS面试题】如何通过闭包漏洞在外部修改函数中的变量

csdn动态图标

✍️ 作者简介: 前端新手学习中。

💂 作者主页: 作者主页查看更多前端教学

🎓 专栏分享:css重难点教学   Node.js教学 从头开始学习   ajax学习
前端面试题

文章目录

  • 什么是闭包
  • 如何在函数外部修改闭包中变量

什么是闭包

闭包这个东西对新人来说确实挺头疼的,MDN官方表述是这样的。

闭包(closure)是一个函数以及其捆绑的周边环境状态(lexical environment,词法环境)
的引用的组合。换而言之,
闭包让开发者可以从内部函数访问外部函数的作用域。
在 JavaScript 中,闭包会随着函数的创建而被同时创建

确实不是很好理解,那么我来通俗讲一下。

闭包其实就是指在函数内部定义一个函数,
内部定义的函数可以访问外部函数作用域中的变量,
这样就形成了一个封闭的作用域,被称作闭包。
即使外部函数已经执行完毕,闭包仍然可以访问这些变量。
这样我们就可以在函数外部 使用一个函数内的变量。
闭包还可以用来创建“私有”变量和方法,提高代码的封装性和安全性。


function outerFunction() {
//在函数内定义一个变量(函数作用域)const outerVariable = 0;
//函数内部再定义一个函数,并在这个函数中使用外层函数内定义的变量function innerFunction() {outerVariable++console.log(outerVariable);}return innerFunction;
}
//在函数执行完毕后用过一遍的变量一般都会被垃圾回收机制中的标记清除算法销毁掉。
//但是由于内部函数的引用所以没被销毁,通过内部函数我们可以访问到原本是函数作用域的变量,这样的弊端有时会引起内存泄漏,内存泄漏意思就是不需要使用的变量没有被垃圾回收机制回收。
const innerFunc = outerFunction();
innerFunc(); 1
innerFunc(); 2
//由于没被销毁回收,所以每次调用都会累加数量,除非再调用一次外部函数重新定义。
const innerFunc2 = outerFunction();
innerFunc()2; 1
innerFunc()2; 2
`` 

如何在函数外部修改闭包中变量

我们这里来看一道很nice的面试题。
题目

let o =(function () {var obj = {a:1,b:2,
};
return {
get:function(k){return obj[k]
}
}
})()

要求在不改变原代码的情况下,修改obj对象中的值。


我们使用这种闭包的原因就是为了使用函数值,并且保护函数值不被修改,就算要修改函数值也要定义一个修改函数,通过修改函数修改值。
但是这里面也没有修改函数 只有一个获取函数,它可以返回对象内属性的值。
我们通过这个函数可以得到对象内属性的值。

console.log(o.get('a')); 可以获取到1 obj中a属性的值。

我们想要修改这个对象,首先要获取对象,如何获取对象呢,从这个函数入手,
上面说了这个函数获取对象的属性没有做限制,除了这些基础方法之外,我们是不是还可以获取到对象原型上的方法。
可以尝试通过valueOf这个方法来获取到原对象的内容,Object 实例的 valueOf() 方法将 this 值转换成对象。在所有类型中都有这个方法 一般都会被隐式调用,比如

let a = 1;
console.log(a)   实际上就是a.valueOf()

我们可以通过这个方法,通过this指向来获取原对象。

像这样

console.log(o.get('valueOf')());
//不过结果报错了  并没有获取到,能看出是什么原因嘛,如果不能看出。
//修改试题中的获取函数,就能获取到结果,现在能看出什么原因了嘛。
let o =(function () {var obj = {a:1,b:2,
};
return {
get:(k)=>{return obj[k]()
}
}
})()console.log(o.get('valueOf')); { a: 1, b: 2 }
//没错原因就是this指向问题,修改试题后的执行是这样的 obj[valueOf]()  this指向就是obj,可以拿到obj对象的内容,  没修改的话,return obj[valueOf] 返回来的函数,就是在全局环境执行的,this指向就是window所以报错 就跟Object.prototype.valueOf()一样。
//由于要求不能修改试题,所以我们只能找别的方法,但是这个思路是没有问题的。

最终的解决方法就是自己写方法
我们的目标还是想办法通过给的get函数获取原对象,我们可以这里在对象原型上自定义一个方法。

Object.defineProperty(Object.prototype,'getThis',{get(){return this;},
})
//我们直接在对象的原型上定义一个方法,只要调用getThis就会执行get函数  返回this。//我们只需要执行就能得到原对象, 也就是return obj['getThis'] 函数内返回的this就是obj,这样就得到了对象。
console.log(o.get('getThis')); //{ a: 1, b: 2 }
//这时候就可以通过对象的引用特性,对原对象进行随意修改了obj2=o.get('getThis')
obj2.a=3
obj2.b=1
console.log(o.get('getThis')); //{ a: 3, b: 1 }

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

animate.css与vue中的v-if/v-show如何一起使用

第一步:在已有的vue项目中安装animate.css npm install animate.css --save第二步:在 main.js 引入 import animate.css第三步:如果在vue中使用了v-if 或者v-show 的话就不能直接在元素上加入animate的class。我们应该在v-if/v-show的元素外层添加tran…

一个新工具 nolyfill

名字的意思, 我自己的理解 no(po)lyfill 正如它的名字, 不要再用补丁了, 当然这里说的是过时的补丁。 polyfill 是补丁的意思 为什么要用这个插件 文档原文: 当您通过安装最新的 Node.js LTS 来接受最新的功能和安全修复时,像eslint-plugin-import、…

基于Java+SpringBoot+Vue前后端分离高校专业实习管理系统设计和实现

博主介绍:✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专…

项目实战:ES的增加数据和查询数据

文章目录 背景在ES中增加数据新建索引删除索引 在ES中查询数据查询数据总数量 项目具体使用(实战)引入依赖方式一:使用配置类连接对应的es服务器创建配置类编写业务逻辑----根据关键字查询相关的聊天内容在ES中插入数据 总结提升 背景 最近需…

如何建设一个安全运营中心(SOC)?

然信息安全管理问题主要是个从上而下的问题,不能指望通过某一种工具来解决,但良好的安全技术基础架构能有效的推动和保障信息安全管理。随着国内行业IT应用度和信息安全管理水平的不断提高,企业对于安全管理的配套设施如安全运营中心&#xf…

51单片机的简易篮球计分器倒计时仿真设计( proteus仿真+程序+原理图+报告+讲解视频)

51单片机的简易篮球计分器倒计时仿真设计( proteus仿真程序原理图报告讲解视频) 1.主要功能:2.仿真3. 程序代码4. 原理图5. 设计报告6. 设计资料内容清单&&下载链接 51单片机的简易篮球计分器倒计时仿真设计( proteus仿真程序原理图报告讲解视频…

Go语言中的数组、切片和映射解析

目录 数组数组的声明数组循环 切片切片声明切片元素循环 映射Map的声明及初始化Map的遍历 数组 数组存放的是固定长度、相同类型的数据,而且这些存放的元素是连续的。 数组的声明 例如声明一个整形数组: array : [3]int{1, 2, 3}在类型名前加 [] 中括…

Java序列化与反序列化

Java开发时,有时需要实现序列化和反序列化操作。这里记录下序列化与反序列化的使用总结。 定义 序列化是将Java对象转换为字节序列的过程。在序列化过程中,Java对象被转换为一个字节流。 反序列化是将字节序列转换回Java对象的过程。在反序列化过程中&…

OpenCV(二十九):图像腐蚀

1.图像腐蚀原理 腐蚀操作的原理是将一个结构元素(也称为核或模板)在图像上滑动,并将其与图像中对应位置的像素进行比较。如果结构元素的所有像素与图像中对应位置的像素都匹配,那么该位置的像素值保持不变。如果结构元素的任何一个…

freemarker模板引擎详解以及使用方法

哈喽!大家好,我是旷世奇才李先生 文章持续更新,可以微信搜索【小奇JAVA面试】第一时间阅读,回复【资料】更有我为大家准备的福利哟,回复【项目】获取我为大家准备的项目 文章目录 一、freemarker 介绍1、简介 二、free…

Llama 2 论文《Llama 2: Open Foundation and Fine-Tuned Chat Models》阅读笔记

文章目录 Llama 2: Open Foundation and Fine-Tuned Chat Models1.简介2.预训练2.1 预训练数据2.2 训练详情2.3 LLAMA 2 预训练模型评估 3. 微调3.1 supervised Fine-Tuning(SFT)3.2 Reinforcement Learning with Human Feedback (RLHF)3.2.1 人类偏好数据收集3.2.2 奖励模型训…

Excel VSTO开发11-自定义菜单项

版权声明:本文为博主原创文章,转载请在显著位置标明本文出处以及作者网名,未经作者允许不得用于商业目的。 11 自定义菜单项 自定义菜单项可以在插件启动时候添加,即增加到ThisAddIn_Startup() 内。 下面以具体代码说明&#x…

Mysql锁

文章目录 1. 概述2. 分类3. 全局锁4. 表级锁5. 行级锁 1. 概述 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中,除传统的计算资源(CPU、RAM、I/O)的争用以外,数据也是一种供许多用户共享的资源。如何保证数据并…

Leetcode:349. 两个数组的交集【题解超详细】

题目 给定两个数组 nums1 和 nums2 ,返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 难度:简单 题目链接:349.两个数组的交集 示例 1: 输入:nums1 [1,2,2,1], nums2 [2,…

2023国赛 C题论文 蔬菜类商品自动定价与补货策略

因为一些不可抗力,下面仅展示小部分论文,其余看文末 一、问题重述 在生鲜超市管理领域,涉及一系列复杂问题,包括供应链管理、定价策略以及市场需求分析等方面。以蔬菜类商品为案例,这些商品在生鲜商超中具有较短的保…

开源电商项目 Mall:构建高效电商系统的终极选择

文章目录 Mall 项目概览前台商城系统后台管理系统系统架构图业务架构图 模块介绍后台管理系统 mall-admin商品管理:功能结构图-商品订单管理:功能结构图-订单促销管理:功能结构图-促销内容管理:功能结构图-内容用户管理&#xff1…

python串口采集数据绘制波形图

这个示例使用 matplotlib 绘制图形,它能够从串口实时读取数据并绘制成波形图。确保你已经替换了 ‘COM11’ 和 9600 为正确的串口号和波特率。 import serial import matplotlib.pyplot as plt from collections import deque import struct# 配置串口参数 ser s…

SQL SERVER 如何实现UNDO REDO 和PostgreSQL 有近亲关系吗

开头还是介绍一下群,如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,SQL Server,Redis ,Oracle ,Oceanbase 等有问题,有需求都可以加群群内有各大数据库行业大咖,CTO,可以解决你的问题。加群请加微信号 l…

【C++入门】C语言的不足之处

概要 C入门主要讲的是C语言的一些不足,C作为补充,来补充C的不足之处 C的关键字有63个,C语言有32个(作为了解,不需要专门记) 变量的命名规则: 变量名必须以字母或下划线开头。变量名只能包含字…

【C#项目实战】控制台游戏勇士斗恶龙(1)——游戏初始设置以及开始界面

君兮_的个人主页 即使走的再远,也勿忘启程时的初心 C/C 游戏开发 Hello,米娜桑们,这里是君兮_,最近开始正式的步入学习游戏开发的正轨,想要通过写博客的方式来分享自己学到的知识和经验,这就是开设本专栏的目的。希望…