Proxy和defineProperty

ProxydefineProperty 都是 JavaScript 中用于拦截和自定义对象行为的工具,但它们在功能、使用场景和实现方式上有显著的区别。

defineProperty的用法

js 复制代码
const obj = {};

Object.defineProperty(obj, 'name', {
  get() {
    console.log('读取属性: name');
    return this._name;
  },
  set(value) {
    console.log(`设置属性: name = ${value}`);
    this._name = value;
  }
});

obj.name = 'Alice'; 
console.log(obj.name);

这里定义了一个空对象obj,Object.defineProperty()可以用于数据劫持,所以这里劫持了obj的name属性,并给予它额外的能力(当他被赋予值时触发set,被读取值的时候触发get)

注意:当对象里的属性被劫持了的话,就无法通过log访问到了,要通过get方法

js 复制代码
const obj = {
  name: 'John',
};

Object.defineProperty(obj, 'name', {
  get() {
    console.log('读取属性: name');
    return  'John';
  },
  set(value) {
    console.log(`设置属性: name = ${value}`);
    this._name = value;
  }
});
console.log(obj.name);

还有一点数据劫持只能劫持第一层的属性,如果对象里套对象是不行的

js 复制代码
const obj = {
  name: 'John',
  age:{
    n:18
  }
};

function hello() {
  console.log('Hello');
}

Object.defineProperty(obj, 'name', {
  get() {
    hello();
    return  this._age;
  },
  set(value) {
    hello();
    this._age = value;
  }
});
obj.age.n = 19;
console.log(obj.age);

并没有打印hello

proxy的用法

Proxy 是一个构造函数,用于创建一个代理对象。它可以拦截对象的多种操作。

Proxy 可以理解成,在目标对象之前架设一层"拦截",外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

js 复制代码
const target = {
    name: 'Alice',
    age: 25
  };
  
  function hello() {
    console.log('Hello');
  }
  

  const handler = {
    get(target, prop) {
      hello();
      console.log(`读取属性: ${prop}`);
      return target[prop];
    },
    set(target, prop, value) {
      hello();
      console.log(`设置属性: ${prop} = ${value}`);
      target[prop] = value;
      return true; // 表示设置成功
    }
  };
  
  const proxy = new Proxy(target, handler);
  
  console.log(proxy.name); // 读取属性: name → Alice
  proxy.age = 30; // 设置属性: age = 30

和Object.defineProperty不同的是,proxy是代理整个对象而不是前者中对象里的某一个属性

代理行为有13种,可以去官网查看:es6.ruanyifeng.com/#docs/proxy

总结

相关推荐
Nan_Shu_6148 分钟前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止40 分钟前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军1 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安1 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js
秋田君1 小时前
Vue3 + WebSocket网页接入弹窗客服功能的完整实现
前端·javascript·websocket·网络协议·学习
浪里行舟2 小时前
一网打尽 Promise 组合技:race vs any, all vs allSettled,再也不迷糊!
前端·javascript·vue.js
Antonio9152 小时前
【网络编程】WebSocket 实现简易Web多人聊天室
前端·网络·c++·websocket
德育处主任Pro3 小时前
p5.js 用 beginGeometry () 和 endGeometry () 打造自定义 3D 模型
开发语言·javascript·3d
tianzhiyi1989sq3 小时前
Vue3 Composition API
前端·javascript·vue.js
今禾3 小时前
Zustand状态管理(上):现代React应用的轻量级状态解决方案
前端·react.js·前端框架