ES6代理能否捕获null对象的方法调用？表单验证链式调用求助

Let's break down your two questions with practical, actionable solutions:

问题1：能否利用ES6 Proxies在调用null对象的方法之前捕获该调用？ #

Great question! You can't directly create a Proxy for null (since Proxy requires an object or function as its target), but you can build a wrapper proxy that safely handles null/undefined values, catching method calls before they throw a TypeError.

Here's a robust implementation that supports deep safe access too:

function createSafeWrapper(target) {
  return new Proxy({}, {
    // Intercept property or method access
    get(_, prop) {
      // If the original target is null/undefined, return another safe wrapper
      if (target == null) {
        return createSafeWrapper(null);
      }
      const value = target[prop];
      // Wrap nested objects to maintain safe access deeper in the chain
      return typeof value === 'object' ? createSafeWrapper(value) : value;
    },
    // Intercept function calls on null/undefined targets
    apply(_, __, args) {
      // Return a safe default (adjust this to your needs: empty array, null, etc.)
      return [];
    }
  });
}

// Usage example
const maybeNull = null;
// No TypeError thrown when calling a method on null
createSafeWrapper(maybeNull).someMethod(); // Returns empty array
// Works for nested properties/methods too
createSafeWrapper(maybeNull).nested.property.doSomething(); // Also safe

How this works: #

• We proxy an empty object instead of null (which isn't allowed).
• The interceptor checks if the original target is null or undefined on every property access.
• For method calls on null targets, we return a safe default (you can tweak this to throw a custom error or return null if that fits your use case better).

问题2：安全链式调用getEmailErrors()的返回值 #

This is a super common scenario—dealing with methods that return either a valid array or null. Here are three solid solutions, from simplest to most flexible:

1. Simplest: Nullish Coalescing Operator (ES2020+) #

This is my go-to for one-off cases. Just convert null to an empty array before chaining:

const emailErrors = User.validators.getEmailErrors() ?? [];
// Now you can safely chain any array method:
const errorElements = emailErrors.map(err => `<div class="error-message">${err}</div>`);

The ?? operator only replaces null or undefined with the fallback value (empty array here), so valid error arrays stay completely intact.

2. Proxy-Based Universal Safe Access #

If you need this safety across multiple methods or nested properties, reuse the createSafeWrapper from question 1:

const safeValidators = createSafeWrapper(User.validators);
// Even if getEmailErrors() returns null, map() won't throw an error
const errorElements = safeValidators.getEmailErrors().map(err => `<div class="error-message">${err}</div>`);

This wrapper ensures every property access and method call on null/undefined returns a safe value, eliminating TypeErrors entirely across your validation logic.

3. Optional Chaining + Nullish Coalescing #

For cases where you also need to guard against User.validators being null or undefined:

const errorElements = (User.validators?.getEmailErrors() ?? []).map(err => `<div class="error-message">${err}</div>`);

The ?. operator safely accesses getEmailErrors() only if validators exists, and ?? handles the null return value from the method.

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