JavaScript Academy · 课时

创建 Proxy

Q: 「创建 Proxy」这节课中我会学到什么？

包装对象以拦截操作。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

包装对象以拦截操作。

创建 Proxy 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

什么是代理对象

代理对象会包装一个对象，让您能够拦截读取、写入和删除属性等基本操作。

您可以使用 new Proxy(target, handler) 创建代理，其中处理程序定义了用于自定义行为的拦截器。

空处理程序

使用空处理程序时，代理的行为与 target 完全相同。每个操作都会直接传递过去。

const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});

console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);

target 与 proxy 共享 state

proxy 不会复制 target。它们引用同一个底层对象，因此通过任意一方进行的更改都能在双方看到。

const target = { count: 0 };
const proxy = new Proxy(target, {});

proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);

添加 get 拦截器

get 拦截器会拦截属性读取。这里会在返回值之前记录每次读取。

const proxy = new Proxy({ name: 'Ada' }, {
  get(target, prop) {
    console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.name);

拦截器参数

get 拦截器会接收 target、property 名称和 receiver（即代理）。返回什么值由您决定。

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 'missing';
  }
});

console.log(proxy.a);
console.log(proxy.b);

读取时计算属性

get 拦截器可以返回 target 实际没有存储的值，并在读取时即时计算这些值。

const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
  get(target, prop) {
    if (prop === 'full') return target.first + ' ' + target.last;
    return target[prop];
  }
});

console.log(proxy.full);

添加 set 拦截器

set 拦截器会拦截写入。您必须返回 true 来表示成功，否则赋值会被视为失败。

const proxy = new Proxy({}, {
  set(target, prop, value) {
    console.log('setting ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.score = 42;
console.log(proxy.score);

has 拦截器

has 拦截器会拦截 in 运算符，让您能够自定义成员检查。

const proxy = new Proxy({ a: 1 }, {
  has(target, prop) {
    console.log('checking ' + prop);
    return prop in target;
  }
});

console.log('a' in proxy);
console.log('b' in proxy);

deleteProperty 拦截器

deleteProperty 拦截器会拦截 delete 操作。成功时请返回 true。

const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
  deleteProperty(target, prop) {
    console.log('deleting ' + prop);
    delete target[prop];
    return true;
  }
});

delete proxy.secret;
console.log(Object.keys(proxy));

可用的拦截器很多

除了 get 和 set，代理还支持 has、deleteProperty、ownKeys、apply（用于函数）、construct 等拦截器。您只需实现需要的部分。

const proxy = new Proxy({ x: 1, y: 2 }, {
  ownKeys(target) {
    console.log('listing keys');
    return Object.keys(target);
  }
});

console.log(Object.keys(proxy));

代理对象为何重要

代理对象可以在不修改 target 对象的情况下添加验证、日志记录、默认值和响应式行为。Vue 等框架的响应式系统就以此为基础。接下来您将深入了解 get 和 set 拦截器。

const logged = new Proxy({ v: 0 }, {
  get: (t, p) => { console.log('get ' + p); return t[p]; },
  set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);

快速检查

new Proxy(target, handler) 会创建什么？

回顾：创建代理对象

您学会了拦截对象操作：

new Proxy(target, handler) 会使用拦截器包装对象。
空处理程序会让所有操作直接通过；proxy 与 target 共享 state。
常见拦截器包括：get、set、has、deleteProperty 和 ownKeys。
set 和 delete 拦截器成功时必须返回 true。

常见问题解答

「创建 Proxy」课时是免费的吗？

是的 — 「创建 Proxy」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「创建 Proxy」这节课中我会学到什么？

包装对象以拦截操作。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「创建 Proxy」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy