当前位置：首页 > news >正文

JavaScript中Reflect对象指南：更智能的对象操作

news 来源：原创 2025/6/17 19:24:21

Reflect 是 ES6 (ECMAScript 2015) 引入的一个内置对象，它提供了一系列静态方法来操作对象，这些方法与 JavaScript 的元编程特性密切相关。

1.Reflect 的基本概念 ★ 了解

Reflect 不是一个函数对象，而是一个普通对象（不可构造），它提供的方法与 Proxy 处理器方法一一对应，主要用于：

将一些明显属于语言内部的方法（如 Object.defineProperty）放到 Reflect 对象上
修改某些方法的返回结果，使其更合理
让对象操作都变成函数行为
与 Proxy 方法一一对应，方便代理默认行为

2.Reflect 的主要方法 ★ 重要

1. Reflect.get(target, propertyKey[, receiver])

获取对象某个属性的值：

const obj = { x: 1, y: 2 };
console.log(Reflect.get(obj, 'x')); // 1

2. Reflect.set(target, propertyKey, value[, receiver])

设置对象某个属性的值：

const obj = {};
Reflect.set(obj, 'name', 'John');
console.log(obj.name); // 'John'

3. Reflect.has(target, propertyKey)

判断对象是否有某个属性（相当于 in 操作符）：

const obj = { name: 'Alice' };
console.log(Reflect.has(obj, 'name')); // true
console.log(Reflect.has(obj, 'age'));  // false

4. Reflect.deleteProperty(target, propertyKey)

删除对象的属性（相当于 delete 操作符）：

const obj = { name: 'Bob', age: 30 };
Reflect.deleteProperty(obj, 'age');
console.log(obj); // { name: 'Bob' }

5. Reflect.construct(target, argumentsList[, newTarget])

相当于 new target(...args)：

class Person {
  constructor(name) {
    this.name = name;
  }
}

const p = Reflect.construct(Person, ['Alice']);
console.log(p.name); // 'Alice'

6. Reflect.apply(func, thisArg, args)

调用函数（相当于 Function.prototype.apply()）：

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(Reflect.apply(greet, null, ['Alice'])); // "Hello, Alice!"

7. Reflect.defineProperty(target, propertyKey, attributes)

定义对象的属性（类似于 Object.defineProperty()）：

const obj = {};
Reflect.defineProperty(obj, 'name', {
  value: 'John',
  writable: true,
  enumerable: true
});
console.log(obj.name); // 'John'

8. Reflect.getOwnPropertyDescriptor(target, propertyKey)

获取对象属性的描述符：

const obj = { name: 'Alice' };
const desc = Reflect.getOwnPropertyDescriptor(obj, 'name');
console.log(desc.value); // 'Alice'

9. Reflect.getPrototypeOf(target)

获取对象的原型（类似于 Object.getPrototypeOf()）：

const obj = {};
console.log(Reflect.getPrototypeOf(obj) === Object.prototype); // true

10. Reflect.setPrototypeOf(target, prototype)

设置对象的原型（类似于 Object.setPrototypeOf()）：

const obj = {};
const proto = { greet() { return 'Hello'; } };
Reflect.setPrototypeOf(obj, proto);
console.log(obj.greet()); // 'Hello'

11. Reflect.isExtensible(target)

判断对象是否可扩展：

const obj = {};
console.log(Reflect.isExtensible(obj)); // true
Reflect.preventExtensions(obj);
console.log(Reflect.isExtensible(obj)); // false

12. Reflect.preventExtensions(target)

使对象不可扩展：

const obj = { name: 'Alice' };
Reflect.preventExtensions(obj);
obj.age = 30; // 静默失败或在严格模式下报错
console.log(obj.age); // undefined

13. Reflect.ownKeys(target)

获取对象的所有自身属性键（包括不可枚举属性和Symbol属性）：

const obj = {
  [Symbol('id')]: 123,
  name: 'Alice',
  age: 25
};

Object.defineProperty(obj, 'hidden', {
  value: true,
  enumerable: false
});

console.log(Reflect.ownKeys(obj)); 
// ["name", "age", "hidden", Symbol(id)]

3.Reflect 与 Proxy 的关系 ★ 重要

Reflect 方法与 Proxy 处理器方法一一对应，这使得 Proxy 可以方便地调用默认行为：

const handler = {
  get(target, prop) {
    console.log(`Getting property ${prop}`);
    return Reflect.get(...arguments); // 调用默认行为
  }
};

const proxy = new Proxy({ name: 'Alice' }, handler);
console.log(proxy.name); 
// "Getting property name"
// "Alice"

4.Reflect 的优势 ★ 了解

更一致的API：所有操作都是函数调用形式
更好的返回值：许多方法返回布尔值表示操作是否成功
与Proxy更好的配合：可以直接转发操作
替代一些操作符：如 in、delete 等

5.使用示例

数据验证 ★ 了解

const validator = {
  set(target, prop, value) {
    if (prop === 'age') {
      if (typeof value !== 'number' || value <= 0) {
        throw new TypeError('Age must be a positive number');
      }
    }
    return Reflect.set(target, prop, value);
  }
};

const person = new Proxy({}, validator);
person.age = 25; // 成功
person.age = 'old'; // 抛出 TypeError

日志记录 ★ 了解

const logger = {
  get(target, prop) {
    console.log(`Getting ${prop}`);
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
    console.log(`Setting ${prop} to ${value}`);
    return Reflect.set(target, prop, value);
  }
};

const obj = new Proxy({}, logger);
obj.name = 'Alice'; // 日志: Setting name to Alice
console.log(obj.name); // 日志: Getting name → 输出: Alice

Reflect 对象为 JavaScript 提供了更强大的元编程能力，特别是在与 Proxy 结合使用时，可以实现各种高级模式，如拦截、验证、日志记录等。

6.JavaScript Reflect 对象的兼容性分析 ★ 了解

Reflect 对象作为 ES6 (ECMAScript 2015) 的一部分，在现代 JavaScript 环境中得到了广泛支持，但在旧环境中可能存在兼容性问题。

主要环境支持情况

浏览器支持

浏览器/引擎	版本支持
Chrome	49+
Firefox	42+
Safari	10+
Edge	12+
Internet Explorer	不支持
Opera	36+

服务器端/运行时支持

环境	版本支持
Node.js	6.0.0+
Deno	所有版本
Bun	所有版本

移动端支持

平台	版本支持
iOS Safari	10+
Android Browser	49+
Chrome for Android	49+
Firefox for Android	42+

兼容性解决方案

1. 特性检测

在使用前可以先检测 Reflect 是否存在：

if (typeof Reflect === 'object' && Reflect !== null) {
  // 安全使用 Reflect
} else {
  // 回退方案
}

2. Polyfill 方案

对于不支持的环境，可以使用 core-js 等 polyfill：

// 安装
npm install core-js

// 引入

import 'core-js/features/reflect';

// 或者部分引入
import 'core-js/features/reflect/construct';
import 'core-js/features/reflect/get';

3. Babel 转译

使用 Babel 时，@babel/preset-env 会根据配置的 targets 自动决定是否需要转换 Reflect 相关代码。

7.JavaScript Reflect API 测试工具

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Reflect API 测试工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .test-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .method-name {
            color: #2c3e50;
            font-weight: bold;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        button:hover {
            background-color: #2980b9;
        }
        pre {
            background: #f8f8f8;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background: #e8f4fc;
            border-radius: 4px;
            display: none;
        }
        .success {
            color: #27ae60;
        }
        .error {
            color: #e74c3c;
        }
        .compatibility {
            background: #fff3cd;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>JavaScript Reflect API 测试工具</h1>
    
    <div class="compatibility">
        <h3>兼容性检测</h3>
        <p id="reflect-support">检测中...</p>
        <p id="proxy-support">检测中...</p>
    </div>

    <div class="test-container">
        <div class="method-name">1. Reflect.get(target, propertyKey[, receiver])</div>
        <p>获取对象某个属性的值</p>
        <button onclick="testReflectGet()">测试 Reflect.get</button>
        <div id="reflect-get-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">2. Reflect.set(target, propertyKey, value[, receiver])</div>
        <p>设置对象某个属性的值</p>
        <button onclick="testReflectSet()">测试 Reflect.set</button>
        <div id="reflect-set-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">3. Reflect.has(target, propertyKey)</div>
        <p>判断对象是否有某个属性</p>
        <button onclick="testReflectHas()">测试 Reflect.has</button>
        <div id="reflect-has-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">4. Reflect.deleteProperty(target, propertyKey)</div>
        <p>删除对象的属性</p>
        <button onclick="testReflectDeleteProperty()">测试 Reflect.deleteProperty</button>
        <div id="reflect-delete-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">5. Reflect.construct(target, argumentsList[, newTarget])</div>
        <p>相当于 new target(...args)</p>
        <button onclick="testReflectConstruct()">测试 Reflect.construct</button>
        <div id="reflect-construct-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">6. Reflect.apply(func, thisArg, args)</div>
        <p>调用函数</p>
        <button onclick="testReflectApply()">测试 Reflect.apply</button>
        <div id="reflect-apply-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">7. Reflect.defineProperty(target, propertyKey, attributes)</div>
        <p>定义对象的属性</p>
        <button onclick="testReflectDefineProperty()">测试 Reflect.defineProperty</button>
        <div id="reflect-define-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">8. Reflect.getOwnPropertyDescriptor(target, propertyKey)</div>
        <p>获取对象属性的描述符</p>
        <button onclick="testReflectGetOwnPropertyDescriptor()">测试 Reflect.getOwnPropertyDescriptor</button>
        <div id="reflect-getown-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">9. Reflect.getPrototypeOf(target)</div>
        <p>获取对象的原型</p>
        <button onclick="testReflectGetPrototypeOf()">测试 Reflect.getPrototypeOf</button>
        <div id="reflect-getproto-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">10. Reflect.setPrototypeOf(target, prototype)</div>
        <p>设置对象的原型</p>
        <button onclick="testReflectSetPrototypeOf()">测试 Reflect.setPrototypeOf</button>
        <div id="reflect-setproto-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">11. Reflect.isExtensible(target)</div>
        <p>判断对象是否可扩展</p>
        <button onclick="testReflectIsExtensible()">测试 Reflect.isExtensible</button>
        <div id="reflect-isextensible-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">12. Reflect.preventExtensions(target)</div>
        <p>使对象不可扩展</p>
        <button onclick="testReflectPreventExtensions()">测试 Reflect.preventExtensions</button>
        <div id="reflect-prevent-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">13. Reflect.ownKeys(target)</div>
        <p>获取对象的所有自身属性键</p>
        <button onclick="testReflectOwnKeys()">测试 Reflect.ownKeys</button>
        <div id="reflect-ownkeys-result" class="result"></div>
    </div>

    <div class="test-container">
        <div class="method-name">Reflect 与 Proxy 配合使用</div>
        <p>测试 Reflect 与 Proxy 的交互</p>
        <button onclick="testReflectWithProxy()">测试 Reflect + Proxy</button>
        <div id="reflect-proxy-result" class="result"></div>
    </div>

    <script>
        // 兼容性检测
        document.getElementById('reflect-support').textContent = 
            typeof Reflect === 'object' && Reflect !== null 
                ? '✅ 当前环境支持 Reflect API' 
                : '❌ 当前环境不支持 Reflect API';
        
        document.getElementById('proxy-support').textContent = 
            typeof Proxy === 'function' 
                ? '✅ 当前环境支持 Proxy' 
                : '❌ 当前环境不支持 Proxy';

        // 显示测试结果
        function showResult(elementId, success, message) {
            const resultEl = document.getElementById(elementId);
            resultEl.innerHTML = message;
            resultEl.className = success ? 'result success' : 'result error';
            resultEl.style.display = 'block';
        }

        // 1. Reflect.get
        function testReflectGet() {
            try {
                const obj = { x: 1, y: 2 };
                const value = Reflect.get(obj, 'x');
                showResult('reflect-get-result', true, 
                    `测试对象: <pre>${JSON.stringify(obj, null, 2)}</pre>
                    执行: <code>Reflect.get(obj, 'x')</code>
                    结果: <strong>${value}</strong>`);
            } catch (e) {
                showResult('reflect-get-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 2. Reflect.set
        function testReflectSet() {
            try {
                const obj = {};
                const success = Reflect.set(obj, 'name', 'Alice');
                showResult('reflect-set-result', true, 
                    `初始对象: <pre>{}</pre>
                    执行: <code>Reflect.set(obj, 'name', 'Alice')</code>
                    操作是否成功: <strong>${success}</strong>
                    设置后对象: <pre>${JSON.stringify(obj, null, 2)}</pre>`);
            } catch (e) {
                showResult('reflect-set-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 3. Reflect.has
        function testReflectHas() {
            try {
                const obj = { name: 'Bob', age: 30 };
                const hasName = Reflect.has(obj, 'name');
                const hasEmail = Reflect.has(obj, 'email');
                showResult('reflect-has-result', true, 
                    `测试对象: <pre>${JSON.stringify(obj, null, 2)}</pre>
                    执行: <code>Reflect.has(obj, 'name')</code> → <strong>${hasName}</strong>
                    执行: <code>Reflect.has(obj, 'email')</code> → <strong>${hasEmail}</strong>`);
            } catch (e) {
                showResult('reflect-has-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 4. Reflect.deleteProperty
        function testReflectDeleteProperty() {
            try {
                const obj = { name: 'Charlie', age: 25 };
                const success = Reflect.deleteProperty(obj, 'age');
                showResult('reflect-delete-result', true, 
                    `初始对象: <pre>${JSON.stringify(obj, null, 2)}</pre>
                    执行: <code>Reflect.deleteProperty(obj, 'age')</code>
                    操作是否成功: <strong>${success}</strong>
                    删除后对象: <pre>${JSON.stringify(obj, null, 2)}</pre>`);
            } catch (e) {
                showResult('reflect-delete-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 5. Reflect.construct
        function testReflectConstruct() {
            try {
                class Person {
                    constructor(name) {
                        this.name = name;
                    }
                }
                const p = Reflect.construct(Person, ['David']);
                showResult('reflect-construct-result', true, 
                    `类定义: <pre>class Person {
  constructor(name) {
    this.name = name;
  }
}</pre>
                    执行: <code>Reflect.construct(Person, ['David'])</code>
                    创建的对象: <pre>${JSON.stringify(p, null, 2)}</pre>
                    p instanceof Person: <strong>${p instanceof Person}</strong>`);
            } catch (e) {
                showResult('reflect-construct-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 6. Reflect.apply
        function testReflectApply() {
            try {
                function greet(name, age) {
                    return `Hello, ${name}! You are ${age} years old.`;
                }
                const result = Reflect.apply(greet, null, ['Eve', 28]);
                showResult('reflect-apply-result', true, 
                    `函数定义: <pre>function greet(name, age) {
  return \`Hello, \${name}! You are \${age} years old.\`;
}</pre>
                    执行: <code>Reflect.apply(greet, null, ['Eve', 28])</code>
                    结果: <strong>${result}</strong>`);
            } catch (e) {
                showResult('reflect-apply-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 7. Reflect.defineProperty
        function testReflectDefineProperty() {
            try {
                const obj = {};
                const success = Reflect.defineProperty(obj, 'id', {
                    value: 123,
                    writable: false,
                    enumerable: true
                });
                showResult('reflect-define-result', true, 
                    `初始对象: <pre>{}</pre>
                    执行: <code>Reflect.defineProperty(obj, 'id', {
  value: 123,
  writable: false,
  enumerable: true
})</code>
                    操作是否成功: <strong>${success}</strong>
                    定义后对象: <pre>${JSON.stringify(obj, null, 2)}</pre>
                    属性描述符: <pre>${JSON.stringify(Object.getOwnPropertyDescriptor(obj, 'id'), null, 2)}</pre>`);
            } catch (e) {
                showResult('reflect-define-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 8. Reflect.getOwnPropertyDescriptor
        function testReflectGetOwnPropertyDescriptor() {
            try {
                const obj = { name: 'Frank' };
                Object.defineProperty(obj, 'hidden', {
                    value: true,
                    enumerable: false
                });
                const descName = Reflect.getOwnPropertyDescriptor(obj, 'name');
                const descHidden = Reflect.getOwnPropertyDescriptor(obj, 'hidden');
                showResult('reflect-getown-result', true, 
                    `测试对象: <pre>${JSON.stringify(Object.getOwnPropertyDescriptors(obj), null, 2)}</pre>
                    执行: <code>Reflect.getOwnPropertyDescriptor(obj, 'name')</code>
                    结果: <pre>${JSON.stringify(descName, null, 2)}</pre>
                    执行: <code>Reflect.getOwnPropertyDescriptor(obj, 'hidden')</code>
                    结果: <pre>${JSON.stringify(descHidden, null, 2)}</pre>`);
            } catch (e) {
                showResult('reflect-getown-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 9. Reflect.getPrototypeOf
        function testReflectGetPrototypeOf() {
            try {
                const obj = {};
                const proto = { greet() { return 'Hello'; } };
                Object.setPrototypeOf(obj, proto);
                const result = Reflect.getPrototypeOf(obj);
                showResult('reflect-getproto-result', true, 
                    `测试对象: <pre>const obj = {};
const proto = { greet() { return 'Hello'; } };
Object.setPrototypeOf(obj, proto);</pre>
                    执行: <code>Reflect.getPrototypeOf(obj)</code>
                    结果: <pre>${JSON.stringify(result, null, 2)}</pre>
                    obj.greet(): <strong>${obj.greet()}</strong>`);
            } catch (e) {
                showResult('reflect-getproto-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 10. Reflect.setPrototypeOf
        function testReflectSetPrototypeOf() {
            try {
                const obj = {};
                const proto = { greet() { return 'Hi'; } };
                const success = Reflect.setPrototypeOf(obj, proto);
                showResult('reflect-setproto-result', true, 
                    `初始对象: <pre>{}</pre>
                    执行: <code>Reflect.setPrototypeOf(obj, { greet() { return 'Hi'; } })</code>
                    操作是否成功: <strong>${success}</strong>
                    设置后 obj.greet(): <strong>${obj.greet()}</strong>`);
            } catch (e) {
                showResult('reflect-setproto-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 11. Reflect.isExtensible
        function testReflectIsExtensible() {
            try {
                const obj = {};
                const initiallyExtensible = Reflect.isExtensible(obj);
                Reflect.preventExtensions(obj);
                const afterPreventExtensible = Reflect.isExtensible(obj);
                showResult('reflect-isextensible-result', true, 
                    `测试对象: <pre>{}</pre>
                    初始状态: <code>Reflect.isExtensible(obj)</code> → <strong>${initiallyExtensible}</strong>
                    执行: <code>Reflect.preventExtensions(obj)</code>
                    之后状态: <code>Reflect.isExtensible(obj)</code> → <strong>${afterPreventExtensible}</strong>`);
            } catch (e) {
                showResult('reflect-isextensible-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 12. Reflect.preventExtensions
        function testReflectPreventExtensions() {
            try {
                const obj = { name: 'Grace' };
                const success = Reflect.preventExtensions(obj);
                let addPropResult = '属性添加成功';
                try {
                    obj.age = 30;
                    addPropResult = '属性添加成功 (但对象应该不可扩展!)';
                } catch (e) {
                    addPropResult = '属性添加失败 (符合预期)';
                }
                showResult('reflect-prevent-result', true, 
                    `初始对象: <pre>${JSON.stringify(obj, null, 2)}</pre>
                    执行: <code>Reflect.preventExtensions(obj)</code>
                    操作是否成功: <strong>${success}</strong>
                    尝试添加新属性: <strong>${addPropResult}</strong>
                    最终对象: <pre>${JSON.stringify(obj, null, 2)}</pre>`);
            } catch (e) {
                showResult('reflect-prevent-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // 13. Reflect.ownKeys
        function testReflectOwnKeys() {
            try {
                const obj = {
                    [Symbol('id')]: 123,
                    name: 'Henry',
                    age: 35
                };
                Object.defineProperty(obj, 'hidden', {
                    value: true,
                    enumerable: false
                });
                const keys = Reflect.ownKeys(obj);
                showResult('reflect-ownkeys-result', true, 
                    `测试对象: <pre>{
  [Symbol('id')]: 123,
  name: 'Henry',
  age: 35,
  hidden: true (不可枚举)
}</pre>
                    执行: <code>Reflect.ownKeys(obj)</code>
                    结果: <pre>${JSON.stringify(keys, null, 2)}</pre>
                    注意: 包含所有自身属性键，包括Symbol和不可枚举属性`);
            } catch (e) {
                showResult('reflect-ownkeys-result', false, 
                    `错误: ${e.toString()}`);
            }
        }

        // Reflect 与 Proxy 配合使用
        function testReflectWithProxy() {
            try {
                const target = { name: 'Ivy', age: 40 };
                const handler = {
                    get(t, prop) {
                        console.log(`Getting ${prop}`);
                        return Reflect.get(...arguments);
                    },
                    set(t, prop, value) {
                        console.log(`Setting ${prop} to ${value}`);
                        return Reflect.set(...arguments);
                    }
                };
                const proxy = new Proxy(target, handler);
                
                let log = '';
                const originalConsoleLog = console.log;
                console.log = (msg) => { log += msg + '\n'; };
                
                proxy.name; // 触发 get
                proxy.age = 41; // 触发 set
                
                console.log = originalConsoleLog;
                
                showResult('reflect-proxy-result', true, 
                    `目标对象: <pre>${JSON.stringify(target, null, 2)}</pre>
                    Proxy处理器: <pre>{
  get(t, prop) {
    console.log(\`Getting \${prop}\`);
    return Reflect.get(...arguments);
  },
  set(t, prop, value) {
    console.log(\`Setting \${prop} to \${value}\`);
    return Reflect.set(...arguments);
  }
}</pre>
                    执行: <code>proxy.name</code> 和 <code>proxy.age = 41</code>
                    代理日志: <pre>${log}</pre>
                    最终目标对象: <pre>${JSON.stringify(target, null, 2)}</pre>`);
            } catch (e) {
                showResult('reflect-proxy-result', false, 
                    `错误: ${e.toString()}`);
            }
        }
    </script>
</body>
</html>