如何在 JS 中获取所有祖先的方法（原型继承）？

Question

我需要在 JS 中创建一个函数，从整个继承树中获取所有方法，以便为每个方法插入一个 <button>。我有这个代码

function A () {
}

A.prototype.a = function () {
    console.log('a');
}

function B () {
    this.super = A;
    this.super();
}

B.prototype = new A;
B.prototype.constructor = B;

B.prototype.b = function () {
    console.log('b');
}

function C () {
    this.super = B;
    this.super();
}

C.prototype = new B;
C.prototype.constructor = C;

C.prototype.c = function () {
    console.log('c');
}

function D () {
}

D.prototype = C;
D.prototype.constructor = D;

D.prototype.d = function () {
    console.log('d');
}

const dd = new D();

我需要一些方法来找到整个树的方法，以防我不知道一个对象有多少祖先。例如：如果一个对象 C 有 A 和 B 作为它的祖先，我需要来自 A、B 和 C 的方法；如果 D 对象是 A-B-C 的子对象，我需要它们四个（A、B、C 和 D）的方法。我也许可以手动跟踪每种方法，以便编写代码为我做这件事，买我需要它是动态的。

这是我正在使用的：

console.log(Object.getOwnPropertyNames(dd.__proto__).filter(function (property) {
    return (
        typeof dd.__proto__[property] === 'function' && property !== 'constructor'
    );
}))

Answer 1

您的设置代码中有错误：

变化：

D.prototype = C;

到：

D.prototype = new C;

然后要获取方法列表（即使不可枚举），请进行递归调用。你甚至可以把它变成一个生成器。

为了明确这些方法的来源，我在它们前面加上了原型对象的名称（例如A.prototype）。你会看到，当原型链的多个层级存在同名函数时，它们都会被列出来：

function * iterMethods(o) {
    if (!o || o === Object.prototype) return;
    for (let name of Object.getOwnPropertyNames(o)) {
        try {
            if (name !== "constructor" && typeof o[name] === "function") {
                yield o.constructor.name + ".prototype." + name;
            }
        } catch {}
    }
    yield * iterMethods(Object.getPrototypeOf(o));
}

// Your code:
function A () {
}

A.prototype.a = function () {
    console.log('a');
}

function B () {
    this.super = A;
    this.super();
}

B.prototype = new A;
B.prototype.constructor = B;

B.prototype.b = function () {
    console.log('b');
}

function C () {
    this.super = B;
    this.super();
}

C.prototype = new B;
C.prototype.constructor = C;

C.prototype.c = function () {
    console.log('c');
}

function D () {
}

D.prototype = new C;
D.prototype.constructor = D;

D.prototype.d = function () {
    console.log('d');
}

const dd = new D();

// The call:
console.log(Array.from(iterMethods(Object.getPrototypeOf(dd))));

当您使用class ... extends 语法时，更容易设置此原型层次结构。我也不会定义super，因为这是一个原生可用的关键字。下面是它的外观：

function * iterMethods(o) {
    if (!o || o === Object.prototype) return;
    for (let name of Object.getOwnPropertyNames(o)) {
        try {
            if (name !== "constructor" && typeof o[name] === "function") {
                yield o.constructor.name + ".prototype." + name;
            }
        } catch {}
    }
    yield * iterMethods(Object.getPrototypeOf(o));
}

// class syntax version:
class A {
    a() {
        console.log('a');
    }
}

class B extends A {
    b() {
        console.log('b');
    }
}

class C extends B {
    c() {
        console.log('c');
    }
}

class D extends C {
    d() {
        console.log('d');
    }
}

const dd = new D();

// The call:
console.log(Array.from(iterMethods(Object.getPrototypeOf(dd))));