前端沙箱 bind(window.proxy)()

沙箱：sandbox
沙箱是一种安全机制，为运行中的程序提供独立运行的环境，内部程序的执行不会影响外部程序的运行
常见的沙箱使用场景：
在线代码编辑器、vue服务端渲染、微前端、jsonp等
单实例模式：全局只存在一个实例，直接代理原生的window对象，记录每个沙箱内window对象上的增删改等操作，激活某个沙箱时恢复上一次失活时的状态，失活时恢复原来window的状态。
多实例模式：代理一个全新的window对象，所有的更改基于这个全新的对象，多个实例之间互不影响。
qiankun里的沙箱主要有三种

LegacySandbox：单实例代理沙箱，简单来讲就是只存在一个window实例，所有的操作都是对这一个实例的操作
ProxySandbox：多实例代理沙箱，通过对window的拷贝建立多个副本，在沙箱中对建立的副本进行操作
SnapshotSandbox：快照沙箱，基于 diff 方式实现的沙箱，用于不支持 Proxy 的低版本浏览器

JS沙箱的常见解决方案
1、with

with语句将改变作用域，会让内部的访问优先从传入的对象上查找。怎么理解呢，我们来看一下这一段代码：

const obj = {
  a: 1
}
const obj2 = {
  b: 2
}
const a = 9

const fun = (obj) => {
  with(obj) { // 相当于{}内访问的变量都会从obj上查找
    console.log(a)
    a = 3
  }
}

fun(obj) // 1
console.log(obj) // { a: 3 }

2、ES6 proxy
为了解决with存在的问题，我们来了解下proxy方法。proxy用于创建一个对象的代理，从而实现对基本操作的拦截以及自定义。

/**
* @param {*} target - 使用Proxy包装的目标对象
* @param {*} handler - 通常为一个函数，函数的各个属性分别定义了执行各个操作时的代理行为
*/
const p = new Proxy(target, handler)