首页 > 编程语言 >[Javascript] Using Proxy to observe the object

[Javascript] Using Proxy to observe the object

时间:2024-10-09 15:00:09浏览次数:7  
标签:target val get Javascript observe key Using pobj

const obj = {
  a: 1,
  b: 2,
  c: {
    d: 1,
    e: 2,
  },
};

function isObject(val) {
  return val !== null && typeof val === "object";
}

function observe(obj) {
  const proxy = new Proxy(obj, {
    get(target, key) {
      const val = Reflect.get(target, key);
      console.log(key, "get", val);
      if (isObject(val)) {
        return observe(val);
      }
      return val;
    },
    set(target, key, newVal) {
      const oldVal = target[key];
      if (isObject(oldVal)) {
        observe(oldVal);
      }
      console.log(key, "set", newVal);
      return Reflect.set(target, key, newVal);
    },
    deleteProperty(target, key) {
      console.log(key, "delete");
      return Reflect.deleteProperty(target, key);
    },
  });
  return proxy;
}

const pobj = observe(obj);
pobj.a;
pobj.a = 3;
pobj.c.d;
pobj.c.d = 3;

delete pobj.b;

pobj.f = 123;

/*
a get 1
a set 3
c get { d: 1, e: 2 }
d get 1
c get { d: 1, e: 2 }
d set 3
b delete
f set 123
*/

 

Refer to previous blog for defineProperty.

Compare with definePropertyvs Proxy, we can clearly see that Proxy is more flexible and better perforemance.

For defineProperty, we have to deep loop over the object props, but Proxy we don't need to.

And proxy can observe not only existing props, but also for new props and delete props.

标签:target,val,get,Javascript,observe,key,Using,pobj
From: https://www.cnblogs.com/Answer1215/p/18454240

相关文章

  • 解决ERROR ResizeObserver loop completed with undelivered notifications.
    https://www.cnblogs.com/luo9tian/p/18116299该报错虽然不影响项目运行,但是影响开发效率,总是弹出报错的黑框很烦人该报错原因:newResizeObserver包裹的方法,在布局发生变化时,不支持每帧都调用解决方法:用window.requestAnimationFrame包裹回调函数在App.vue/main.js中加......
  • 从混乱到整洁:JavaScript学习中的代码演变之旅
    学习中的代码演变在JavaScript的学习之旅中,初学者常产出略显混乱的代码,这实属正常。每个错误与不易理解的代码段都是成长的一部分,随着时间推移,你将逐渐掌握编写整洁代码的技巧。混乱中的创新追求完美并非初学者的首要任务,这样反而能激发你尝试多样化的解决方案。比如,在构建待办......
  • javascript学习——CSS 操作总结
    CSS操作CSS与JavaScript是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。本章介绍如何通过JavaScript操作CSS。HTML元素的style属性操作CSS样式最简单的方法,就是......
  • javascript学习——DOM 概述
    DOM概述DOMDOM是JavaScript操作网页的接口,全称为“文档对象模型”(DocumentObjectModel)。它的作用是将网页转为一个JavaScript对象,从而可以用脚本进行各种操作(比如增删内容)。浏览器会根据DOM模型,将结构化文档(比如HTML和XML)解析成一系列的节点,再由这些节点组......
  • JavaScript数组合并方法(concat()函数)
    在JavaScript中,concat方法用于连接两个或多个数组,并返回一个新数组。这不会改变现有的数组,而是返回一个包含了连接元素的新数组。解法1:基本的concat使用方法letarray1=[1,2,3];letarray2=[4,5];letarray3=array1.concat(array2);console.log(array3);//输......
  • 表单验证:FormValidation JavaScript 1.7
    FormValidation表单验证:JavaScript的最佳验证库::用ES6编写使用TypeScript进行类型安全零依赖没有jQuery可用作AMD、ES6模块和全局脚本灵活的:自定义图标自定义错误消息动态字段自定义有效和无效颜色动态启用、禁用验证器自定义错误信息位置Playnicewithformlibra......
  • [Javascript] How javascript read the property?
    Asweknowwecanreadpropertyvaluefromanobjectasso:constobj={}obj.xxxx;obj[xxxx]; Sowhat'sthedifferencebetweenthosetwo? obj.xECMAScriptwilldoatransforminternallyassuch[[GET]](obj/*objectitself*/,'x'/*pr......
  • [Javascript] Check whether a function is call with new
    The new.target meta-propertyletsyoudetectwhetherafunctionorconstructorwascalledusingthe new operator.Inconstructorsandfunctionsinvokedusingthe new operator, new.target returnsareferencetotheconstructororfunctionthat new wa......
  • 白骑士的JavaScript教学JavaScript语法基础篇之运算符与表达式 2.2.4 逻辑运算符
            逻辑运算符是用于布尔逻辑运算的符号,它们常用于控制流程和条件判断,帮助程序员编写更复杂和更动态的条件语句。在JavaScript中,主要的逻辑运算符包括逻辑与(‘&&‘)、逻辑或(‘||‘)、逻辑非(‘!‘)以及一些其他特定场景的运算符。逻辑运算符用于将多个布尔值或表达式......
  • 白骑士的JavaScript教学JavaScript语法基础篇之运算符与表达式 2.2.5 条件运算符(三元
            条件运算符,也称为三元运算符,是JavaScript中唯一的三目运算符,它提供了一种简洁的方式来编写条件判断和赋值语句。通过使用条件运算符,你可以在一行代码中实现简单的条件判断,从而让代码更加紧凑和易读。条件运算符        条件运算符由三个部分组成:条件......