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

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

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

专栏分享：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 }