创建一个禁止修改的对象， 只能通过指定方法去修改属性【热度: 410】

[yanlele]

具体描述如下

// 实现 createObject 函数， 用例如下；

// 比如：
const obj = createObject({ name: "name" });

obj.name = "name2"; // 错误， 禁止修改；
obj.set("name", "name2"); // 正确方式， 允许修改；
obj.set("address.info", "chongqing"); // 正确方式， 允许添加属性。

实现

以下是使用 JavaScript 实现的createObject函数：

function createObject(initialData) {
  const data = initialData;
  return new Proxy(data, {
    set(target, property, value, receiver) {
      if (property === 'set') {
        const keys = property.split('.');
        let obj = target;
        for (let i = 0; i < keys.length - 1; i++) {
          obj = obj[keys[i]] || (obj[keys[i]] = {});
        }
        obj[keys[keys.length - 1]] = value;
        return true;
      } else {
        return false;
      }
    },
    get(target, property, receiver) {
      if (property === 'set') {
        return function (key, value) {
          const keys = key.split('.');
          let obj = target;
          for (let i = 0; i < keys.length - 1; i++) {
            obj = obj[keys[i]] || (obj[keys[i]] = {});
          }
          obj[keys[keys.length - 1]] = value;
        };
      } else {
        return target[property];
      }
    },
  });
}

你可以使用以下方式测试这个函数：

const obj = createObject({ name: 'name' });

obj.name = 'name2'; // 不会生效，禁止直接修改属性
console.log(obj.name); // 'name'

obj.set('name', 'name2');
console.log(obj.name); // 'name2'

obj.set('address.info', 'chongqing');
console.log(obj.address.info); // 'chongqing'