es6中proxy如何使用

简介: es6中proxy如何使用

ES6中的Proxy是一个强大的对象拦截器,它可以拦截对象的各种操作,比如属性访问、函数调用等。你可以使用Proxy来控制对象的访问和修改行为,从而实现一些高级特性。下面是使用Proxy的一些例子:

  1. 属性访问拦截
const obj = {
  name: 'Tom',
  age: 18
};
const proxy = new Proxy(obj, {
  get(target, property) {
    console.log(`get ${property}`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`set ${property}=${value}`);
    target[property] = value;
  }
});
proxy.name; // 访问name属性,会输出 "get name"
proxy.age = 20; // 修改age属性,会输出 "set age=20"
  1. 函数调用拦截
const obj = {
  add(a, b) {
    return a + b;
  }
};
const proxy = new Proxy(obj, {
  apply(target, thisArg, argumentsList) {
    console.log(`call add(${argumentsList.join(', ')})`);
    return target.apply(thisArg, argumentsList);
  }
});
proxy.add(1, 2); // 调用add方法,会输出 "call add(1, 2)"
  1. 属性删除拦截
const obj = {
  name: 'Tom'
};
const proxy = new Proxy(obj, {
  deleteProperty(target, property) {
    console.log(`delete ${property}`);
    delete target[property];
  }
});
delete proxy.name; // 删除name属性,会输出 "delete name"
  1. 非严格模式下的属性不存在拦截
const obj = {
相关文章
|
3月前
ES6的Proxy到底是什么?
ES6的Proxy到底是什么?
45 2
|
6月前
|
JavaScript 前端开发
ES6新特性: Proxy
ES6新特性: Proxy
|
8月前
es6 proxy的作用和用法
es6 proxy的作用和用法
43 5
|
前端开发
前端学习笔记202306学习笔记第四十一天-Es6-proxy得使用2
前端学习笔记202306学习笔记第四十一天-Es6-proxy得使用2
45 0
ES6 什么是proxy
ES6 什么是proxy
87 2
ES6: Proxy概念及用法
ES6: Proxy概念及用法
76 0
es6如何使用padStart()和padEnd()方法
es6如何使用padStart()和padEnd()方法
110 0
|
前端开发
前端学习笔记202306学习笔记第四十一天-Es6-proxy得使用1
前端学习笔记202306学习笔记第四十一天-Es6-proxy得使用1
62 0
|
前端开发
前端学习案例2-ES6中的proxy和Reflect2
前端学习案例2-ES6中的proxy和Reflect2
94 0
前端学习案例2-ES6中的proxy和Reflect2
|
前端开发
前端学习案例1-ES6中的proxy和Reflect
前端学习案例1-ES6中的proxy和Reflect
88 0
前端学习案例1-ES6中的proxy和Reflect