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

总结

相关推荐
胡gh3 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
胡gh4 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试
言兴4 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_4 小时前
TailWind CSS
前端·css·postcss
烛阴5 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧5 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment6 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点6 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile7 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年7 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel