JavaScript：如何让Array.prototype.test的方法绑定数组实例？

这个问题的核心在于函数调用时的this绑定规则：当你调用[].test.func()时，func是作为test对象的方法被调用的，所以this自然会指向它的直接所属对象Array.prototype.test，而不是数组实例。要在不把test改成函数的前提下实现需求，我们可以借助JavaScript的getter特性来巧妙保留数组实例的上下文——这也是Chai等库实现链式语法的常用思路之一。

具体实现代码 #

// 用Object.defineProperty定义getter
Object.defineProperty(Array.prototype, 'test', {
  get() {
    // 这里的this就是当前的数组实例
    const arrayInstance = this;
    
    // 返回包含func方法的对象，通过闭包确保this指向数组实例
    return {
      // 用箭头函数捕获外层的this（即数组实例）
      func: () => {
        console.log(arrayInstance);
        return arrayInstance;
      },
      
      // 也可以用bind显式绑定this到数组实例
      // func: function() {
      //   console.log(this);
      //   return this;
      // }.bind(arrayInstance)
    };
  },
  // 可选：设置为不可枚举，避免遍历数组时出现test属性
  enumerable: false
});

原理说明 #

1. 当你访问[].test时，JavaScript会触发我们定义的getter函数，此时getter内部的this自动指向当前的数组实例（因为是在数组实例上访问test属性）。
2. 我们把这个数组实例保存到变量arrayInstance中，然后返回一个包含func方法的对象。
3. 箭头函数会捕获外层作用域的this，或者用bind显式绑定，都能让func内部的上下文指向数组实例，而不是test对象。

验证效果 #

调用[1,2,3].test.func()时，控制台会输出数组[1,2,3]，并且返回该数组实例，完全符合你的需求。

补充：Proxy进阶方案（支持更多动态方法） #

如果你需要扩展更多链式方法，用Proxy可以更灵活地拦截属性访问，自动绑定上下文：

Object.defineProperty(Array.prototype, 'test', {
  get() {
    return new Proxy({}, {
      get(target, prop) {
        // 可以根据属性名动态返回绑定好上下文的方法
        if (prop === 'func') {
          return () => {
            console.log(this);
            return this;
          };
        }
        // 扩展其他方法示例
        if (prop === 'logLength') {
          return () => {
            console.log('长度:', this.length);
            return this;
          };
        }
      }
    });
  }
});

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