10_实现readonly

在某些时候，我们希望定义一些数据是只读的，不允许被修改，从而实现对数据的保护，即为 readonly

只读本质上也是对数据对象的代理，我们同样可以基于之前实现的 createReactiveObject 函数来实现，可以为此函数添加第三个参数 isReadonly，如下：

function createReactiveObject(value, isShallow = false, isReadonly = false){}

而有了这个参数之后，我们还需要对拦截器进行其他操作，修改或者删除一个对象的属性，都是改变此对象，因此我们需要针对这两个进行拦截，如下：

const noWarnKey = [RAW_KEY, IS_REACTIVE, ITERATE_KEY]// set
function baseSet(isReadonly) {return function set(target, key, newVal, receiver) {// isReadonly 为 true 时，禁止修改，而一些内部属性则忽略if (isReadonly && !noWarnKey.includes(key)) {// 并弹出警告console.warn('只读属性 ', key, ' 禁止修改')return true}const oldVal = target[key]const type = Object.prototype.hasOwnProperty.call(target, key) ? TrggerType.SET : TrggerType.ADDconst result = Reflect.set(target, key, newVal, receiver)if (!result) returnif (receiver[RAW_KEY] === target) {if (!Object.is(oldVal, newVal)) {trigger(target, key, type)}}return result}
}// delete
function baseDeleteProperty(isReadonly) {return function deleteProperty(target, key) {if (isReadonly && !noWarnKey.includes(key)) {console.warn('只读属性 ', key, ' 禁止删除')return true}const hadKey = Object.prototype.hasOwnProperty.call(target, key)const result = Reflect.deleteProperty(target, key)if (hadKey && result) {trigger(target, key, TrggerType.DELETE)}return result}
}// get
function baseGet(isShallow, isReadonly) {return function get(target, key, receiver) {if (key === RAW_KEY) {return target}// 只有当前的对象是一个非只读数据时，才需要收集依赖if (!isReadonly) {track(target, key)}const result = Reflect.get(target, key, receiver)if (isShallow) return resultif (typeof result === 'object' && result !== null) {return reactive(result)}return result}
}function createReactiveObject(value, isShallow = false) {if (typeof value !== 'object' || value === null) {console.warn('value 必须是一个对象')return value}if (reactiveMap.has(value)) {return reactiveMap.get(value)}if (isReactive(value)) return valueconst proxy = new Proxy(value, {get: baseGet(isShallow),set: baseSet(isReadonly),has,ownKeys,deleteProperty: baseDeleteProperty(isReadonly)})proxy[IS_REACTIVE] = truereactiveMap.set(value, proxy)return proxy
}function readonly(value) {return createReactiveObject(value, false, true)
}

现在我们写一段代码进行一下测试：

const obj = { a: 1 }
const r1 = readonly(obj)
r1.a++console.log(r1)

结果如图：

在这里插入图片描述

不过目前还存在一个问题，目前的只读只能处理成浅响应，案例如下：

const obj = {a: 1,b: {c: 3}
}
const r1 = readonly(obj)
r1.b.c++console.log(r1)

测试结果如图：

在这里插入图片描述

我们虽然在创建 readonly 函数时，给 createReactiveObject 的第二个参数是 false，表示是深响应的，但从结果可以看到，没有被拦截，而且依然被修改了。

所以按照之前的经验，如果要深处理，就直接进行递归处理即可，所以我们可以进行如下修改：

function baseGet(isShallow, isReadonly) {return function get(target, key, receiver) {if (key === RAW_KEY) {return target}// 只有当前的对象是一个非只读数据时，才需要收集依赖if (!isReadonly) {track(target, key)}const result = Reflect.get(target, key, receiver)if (isShallow) return result// 在此处进行递归处理if (typeof result === 'object' && result !== null) {// 若开启了只读，则使用 readonly 函数包装结果，实现递归处理每一层return isReadonly ? readonly(result) : reactive(result)}return result}
}

我们在使用之前的测试案例，执行 r1.b.c++ ，来查看一下结果，如图：

在这里插入图片描述

而如果要实现浅响应，那就更加简单了，如下：

function shallowReadonly(value) {// 只需要将 isShallow 设置为 true 即可，表示只处理第一层// - 设置 isShallow 为 true 后，在 get 中，就会直接返回这个属性的原有的值，不做代理、只读或者其他处理return createReactiveObject(value, true, true)
}