如何在子类中扩展父类pagination属性并解决this.item调用报错

你遇到的报错本质是first访问器中的this.item为undefined，核心原因是使用扩展运算符...展开父类pagination返回的对象时，会直接执行对象上所有可枚举访问器的get方法，将求值结果作为新对象的普通属性存储，不会保留原有的访问器定义。如果此时item访问器依赖的上下文未就绪、或者动态返回了undefined，就会触发这个报错；即使本次求值正常，后续item访问器的动态逻辑也会失效，变成固定的静态值。

方案1：原型继承轻量扩展（无需额外封装类） #

这是成本最低的解决方案，不需要定义新的类，直接通过Object.create继承父类返回的pagination对象，完整保留原有所有访问器的动态逻辑：

class TableWithFirst extends Table {
    get pagination () {
        // 以父类pagination对象为原型创建新对象
        return Object.create(super.pagination, {
            first: {
                get() {
                    this.item.log("first");
                    return "first";
                },
                enumerable: true
            }
        })
    }
}

该方案下，新的pagination对象会继承父类pagination的所有属性和方法，访问this.item时会顺着原型链触发父类定义的item getter，不会提前对访问器求值，完全保留原有动态特性。

方案2：全属性描述符合并 #

如果需要完整复制父类pagination的所有自有属性（包括不可枚举属性、特殊配置的访问器），可以配合Object.getOwnPropertyDescriptors实现：

class TableWithFirst extends Table {
    get pagination () {
        const parentPagination = super.pagination;
        return Object.create(
            Object.getPrototypeOf(parentPagination),
            {
                // 复制父类pagination的所有属性描述符，完整保留原有逻辑
                ...Object.getOwnPropertyDescriptors(parentPagination),
                first: {
                    get() {
                        this.item.log("first");
                        return "first";
                    },
                    enumerable: true,
                    configurable: true
                }
            }
        )
    }
}

方案3：封装为独立类（复杂场景推荐） #

如果pagination的逻辑比较复杂，后续还有大量扩展需求，封装为独立类是可维护性最高的方案：

// 基础pagination类
class Pagination {
    get item () {
        return {
            log (s: string) {
                console.log(s);
            }
        }
    }
}

// 扩展first能力的pagination类
class PaginationWithFirst extends Pagination {
    get first () {
        this.item.log("first");
        return "first";
    }
}

class Table {
    get pagination () {
        return new Pagination();
    }
}

class TableWithFirst extends Table {
    get pagination () {
        return new PaginationWithFirst();
    }
}

将逻辑封装到类不是唯一的解决方案，上述方案1和方案2都不需要额外定义新的类，就能实现扩展first getter的需求。只有当业务逻辑复杂度较高、需要频繁扩展pagination能力时，才推荐使用封装类的方案。

内容的提问来源于stack exchange，提问作者A. L