如何使用JS Proxy拦截不存在的属性与方法？

问题核心 #

使用Proxy的get陷阱无法区分属性是被读取还是被调用，导致访问不存在的方法时，get返回undefined，后续调用会抛出is not a function错误。我们需要兼顾三个需求：

• 读取不存在的属性返回undefined
• 调用不存在的方法不报错，返回undefined
• 可重写第三方对象的指定方法

方案一：折中实现（优先满足调用容错） #

当属性不存在时，返回一个空函数（调用时返回undefined），读取时会得到函数而非undefined，但核心的调用容错需求可以满足，同时支持方法重写。

// 模拟第三方不可变对象
class Target {
    bar = "bar";
    foo() {
        return "foo";
    }
}

const target = new Target();

const handler = {
    get(target, prop) {
        // 重写指定方法示例：覆盖原foo方法
        if (prop === 'foo') {
            return () => '重写后的foo返回值';
        }

        // 处理不存在的属性/方法
        if (!(prop in target)) {
            // 返回空函数，调用时返回undefined
            return () => undefined;
        }

        // 存在的属性/方法正常返回
        return Reflect.get(target, prop);
    }
};

const proxy = new Proxy(target, handler);

// 测试结果
console.log(proxy.foo()); // 输出：重写后的foo返回值
console.log(proxy.bar); // 输出：bar
console.log(proxy.nonExistingProperty); // 输出：[Function (anonymous)]
console.log(proxy.nonExistingMethod()); // 输出：undefined

方案二：伪装空函数（优化读取体验） #

通过给空函数添加valueOf和toString方法，让它在隐式转换时表现为undefined，接近标准对象的读取体验，但严格类型检查（如typeof）仍会显示为function。

// 模拟第三方不可变对象
class Target {
    bar = "bar";
    foo() {
        return "foo";
    }
}

const target = new Target();

// 创建伪装成undefined的空函数
function createNoop() {
    const noop = () => undefined;
    // 隐式转换时返回undefined
    noop.valueOf = () => undefined;
    noop.toString = () => 'undefined';
    return noop;
}

const handler = {
    get(target, prop) {
        // 重写指定方法示例
        if (prop === 'foo') {
            return () => '重写后的foo返回值';
        }

        if (!(prop in target)) {
            return createNoop();
        }

        return Reflect.get(target, prop);
    }
};

const proxy = new Proxy(target, handler);

// 测试结果
console.log(proxy.foo()); // 输出：重写后的foo返回值
console.log(proxy.bar); // 输出：bar
console.log(proxy.nonExistingProperty); // 输出：undefined（隐式转换）
console.log(typeof proxy.nonExistingProperty); // 输出：function（严格类型检查）
console.log(proxy.nonExistingMethod()); // 输出：undefined

说明 #

由于JavaScript的特性，无法完全同时满足「读取不存在属性返回undefined」和「调用不存在方法不报错」——调用操作的前提是先获取属性，此时必须返回一个可调用的值（函数）。上述方案是基于需求优先级的折中实现，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者droptix