在Proxy处理器中处理property.subproperty属性的实现方案问询

嘿，我懂你想搞一个类似jQuery的选择器工具，而且之前用Proxy的方案掉链子了，还特意说明不是那俩常见问题——没问题，咱们来唠唠怎么把它搞正常！

方案1：优化Proxy实现（解决失效问题） #

如果之前的Proxy方案失效，大概率是没处理好方法的this绑定、链式调用的返回值，或者混淆了属性访问和方法调用的拦截逻辑。下面这个优化后的Proxy方案能搞定这些：

首先定义核心的选择器类，封装DOM操作：

class QuerySelector {
  constructor(selector) {
    // 存储选中的元素集合
    this.elements = document.querySelectorAll(selector);
    // 记录原始选择器
    this.selector = selector;
  }

  // 示例：给元素添加类名（支持链式调用）
  addClass(className) {
    this.elements.forEach(el => el.classList.add(className));
    return this;
  }

  // 示例：设置/获取文本内容
  text(content) {
    // 无参数时返回第一个元素的文本
    if (typeof content === 'undefined') {
      return this.elements[0]?.textContent || '';
    }
    // 有参数时给所有元素设置文本
    this.elements.forEach(el => el.textContent = content);
    return this;
  }

  // 获取选中元素的数量（用getter模拟属性）
  get length() {
    return this.elements.length;
  }
}

然后用Proxy包装，同时处理$('.class')函数调用和$.xxx属性访问的场景：

const $ = new Proxy(function(selector) {
  return new QuerySelector(selector);
}, {
  // 处理类似$.addClass的直接属性访问（可选，用于扩展方法）
  get(target, prop) {
    const instance = target(prop);
    return new Proxy(instance, {
      get(obj, key) {
        // 如果访问的是方法，绑定this并处理链式返回
        if (typeof obj[key] === 'function') {
          return function(...args) {
            const result = obj[key].apply(obj, args);
            // 方法返回this时，返回当前Proxy实例（保证链式调用）
            return result === obj ? this : result;
          };
        }
        // 普通属性直接返回
        return obj[key];
      }
    });
  },
  // 处理类似$('.class')的函数调用
  apply(target, thisArg, args) {
    const instance = new QuerySelector(args[0]);
    return new Proxy(instance, {
      get(obj, key) {
        if (typeof obj[key] === 'function') {
          return function(...args) {
            const result = obj[key].apply(obj, args);
            return result === obj ? this : result;
          };
        }
        return obj[key];
      }
    });
  }
});

用法示例 #

// 链式调用方法
$('.test').addClass('blue').text('Hello World');
// 获取属性
console.log($('.test').length); // 输出选中元素的数量
// 获取文本内容
console.log($('.test').text()); // 输出第一个元素的文本

方案2：无Proxy的传统链式实现 #

其实很多时候不需要Proxy也能实现类似jQuery的效果，直接用类实例的方式更直观，也不容易出问题：

// 核心类和上面一致，直接用$函数返回实例
function $(selector) {
  return new QuerySelector(selector);
}

// 用法完全一样
$('.test').addClass('red').text('Hi there');
console.log($('.test').length);

这个方案没有Proxy的拦截逻辑，代码更简洁，维护起来也更简单，适合大多数场景。

为啥之前的Proxy方案可能失效？ #

大概率是这几个原因：

• 方法调用时this没有绑定到实例，导致this.elements找不到
• 链式调用时返回的是原始实例，没有被Proxy重新包装，后续调用无法被拦截
• 拦截逻辑混淆了“获取属性”和“调用方法”的场景，比如把方法当成属性返回了

上面的优化方案已经针对性解决了这些问题，你可以根据自己的需求选择用Proxy还是传统方案~

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