在 JavaScript 中模拟 super

Question

基本上有一个很好的优雅机制来模拟 super ，其语法与以下之一一样简单

• this.$super.prop()
• this.$super .prop.apply(this,arguments);

要坚持的标准是：

1. this.$super 必须是对原型的引用。即，如果我在运行时更改超级原型，则此更改将得到反映。这基本上意味着父级有一个新属性，那么应该在运行时通过 super 显示在所有子级上，就像对父级的硬编码引用会反映
2. this.$super 的 更改一样.f.apply(this,arguments); 必须适用于递归调用。对于任何在沿着继承链向上进行多个 super 调用的继承链集，您一定不会遇到递归问题。
3. 您不得对子级中的超级对象的引用进行硬编码。即 Base.prototype.f.apply(this,arguments); 打败了这一点。
4. 您不得使用 X to JavaScript 编译器或 JavaScript 预处理器。
5. 必须符合 ES5

简单的实现会是这样的。

var injectSuper = function (parent, child) {
  child.prototype.$super = parent.prototype;
};

但这打破了条件2。

迄今为止我见过的最优雅的机制是 IvoWetzel 的 eval< /code> hack，这几乎是一个 JavaScript 预处理器，因此不符合标准 4。

Answer 1

我认为没有一种“免费”的方法可以解决你提到的“递归超级”问题。

我们不能搞乱this，因为这样做会迫使我们以非标准的方式改变原型，或者将我们提升到原型链上，从而丢失实例变量。因此，当我们执行超级操作时，必须知道“当前类”和“超类”，而不将该责任传递给 this 或其属性之一。

我们可以尝试做很多事情，但我认为会产生一些不良后果：

• 在创建时向函数添加超级信息，使用arguments.calee或类似的邪恶方式访问它。

• 调用 super 方法时添加额外信息

  $super(CurrentClass).method.call(this, 1,2,3)
  

  这迫使我们复制当前的类名（这样我们就可以在某些超级字典中查找它的超类），但至少它不像必须复制超类名那么糟糕（因为如果比与类自己的名称的内部耦合更糟糕）

  //普通Javascript需要超类名
  SuperClass.prototype.method.call(this, 1,2,3);
  

  虽然这远非理想，但至少有一些来自 2.x 的历史先例Python。 （他们“修复”了 3.0 的 super，因此它不再需要参数，但我不确定其中涉及多少魔力以及它对 JS 的可移植性）

---

编辑：工作 小提琴

var superPairs = [];
// An association list of baseClass -> parentClass

var injectSuper = function (parent, child) {
    superPairs.push({
        parent: parent,
        child: child
    });
};

function $super(baseClass, obj){
    for(var i=0; i < superPairs.length; i++){
        var p = superPairs[i];
        if(p.child === baseClass){
            return p.parent;
        }
    }
}

Answer 2

John Resig 发布了一个具有简单但出色的 super 支持的 ineherence 机制。
唯一的区别是 super 指向您调用它的基本方法。

请查看http://ejohn.org/blog/simple-javascript-inheritance/。

Answer 3

请注意，对于以下实现，当您位于通过 $super 调用的方法内部时，在父类中工作时对属性的访问永远不会解析为子类的方法或变量，除非您访问直接存储在对象本身上的成员（而不是附加到原型上）。这避免了一系列的混乱（读作微妙的错误）。

更新：
这是一个无需 __proto__ 即可工作的实现。问题是使用 $super 与父对象拥有的属性数量成线性关系。

function extend (Child, prototype, /*optional*/Parent) {
    if (!Parent) {
        Parent = Object;
    }
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;
    for (var x in prototype) {
        if (prototype.hasOwnProperty(x)) {
            Child.prototype[x] = prototype[x];
        }
    }
    Child.prototype.$super = function (propName) {
        var prop = Parent.prototype[propName];
        if (typeof prop !== "function") {
            return prop;
        }
        var self = this;
        return function () {
            var selfPrototype = self.constructor.prototype;
            var pp = Parent.prototype;
            for (var x in pp) {
                self[x] = pp[x];
            }
            try {
                return prop.apply(self, arguments);
            }
            finally {
                for (var x in selfPrototype) {
                    self[x] = selfPrototype[x];
                }
            }
        };
    };
}

以下实现适用于支持 __proto__ 属性的浏览器：

function extend (Child, prototype, /*optional*/Parent) {
    if (!Parent) {
        Parent = Object;
    }
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;
    for (var x in prototype) {
        if (prototype.hasOwnProperty(x)) {
            Child.prototype[x] = prototype[x];
        }
    }
    Child.prototype.$super = function (propName) {
        var prop = Parent.prototype[propName];
        if (typeof prop !== "function") {
            return prop;
        }
        var self = this;
        return function (/*arg1, arg2, ...*/) {
            var selfProto = self.__proto__;
            self.__proto__ = Parent.prototype;
            try {
                return prop.apply(self, arguments);
            }
            finally {
                self.__proto__ = selfProto;
            }
        };
    };
}

示例：

function A () {}
extend(A, {
    foo: function () {
        return "A1";
    }
});

function B () {}
extend(B, {
    foo: function () {
        return this.$super("foo")() + "_B1";
    }
}, A);

function C () {}
extend(C, {
    foo: function () {
        return this.$super("foo")() + "_C1";
    }
}, B);


var c = new C();
var res1 = c.foo();
B.prototype.foo = function () {
    return this.$super("foo")() + "_B2";
};
var res2 = c.foo();

alert(res1 + "\n" + res2);

Answer 4

super 的主要困难在于，您需要找到我在此处所说的内容：包含进行 super 引用的方法的对象。这对于获得正确的语义是绝对必要的。显然，拥有 here 的原型也同样好，但这并没有多大区别。以下是静态解决方案：

// Simulated static super references (as proposed by Allen Wirfs-Brock)
// http://wiki.ecmascript.org/doku.php?id=harmony:object_initialiser_super

//------------------ Library

function addSuperReferencesTo(obj) {
    Object.getOwnPropertyNames(obj).forEach(function(key) {
        var value = obj[key];
        if (typeof value === "function" && value.name === "me") {
            value.super = Object.getPrototypeOf(obj);
        }
    });
}

function copyOwnFrom(target, source) {
    Object.getOwnPropertyNames(source).forEach(function(propName) {
        Object.defineProperty(target, propName,
            Object.getOwnPropertyDescriptor(source, propName));
    });
    return target;
};

function extends(subC, superC) {
    var subProto = Object.create(superC.prototype);
    // At the very least, we keep the "constructor" property
    // At most, we preserve additions that have already been made
    copyOwnFrom(subProto, subC.prototype);
    addSuperReferencesTo(subProto);
    subC.prototype = subProto;
};

//------------------ Example

function A(name) {
    this.name = name;
}
A.prototype.method = function () {
    return "A:"+this.name;
}

function B(name) {
    A.call(this, name);
}
// A named function expression allows a function to refer to itself
B.prototype.method = function me() {
    return "B"+me.super.method.call(this);
}
extends(B, A);

var b = new B("hello");
console.log(b.method()); // BA:hello

Answer 5

JsFiddle：

这有什么问题吗？

'use strict';

function Class() {}
Class.extend = function (constructor, definition) {
    var key, hasOwn = {}.hasOwnProperty, proto = this.prototype, temp, Extended;

    if (typeof constructor !== 'function') {
        temp = constructor;
        constructor = definition || function () {};
        definition = temp;
    }
    definition = definition || {};

    Extended = constructor;
    Extended.prototype = new this();

    for (key in definition) {
        if (hasOwn.call(definition, key)) {
            Extended.prototype[key] = definition[key];
        }
    }

    Extended.prototype.constructor = Extended;

    for (key in this) {
        if (hasOwn.call(this, key)) {
            Extended[key] = this[key];
        }
    }

    Extended.$super = proto;
    return Extended;
};

用法：

var A = Class.extend(function A () {}, {
    foo: function (n) { return n;}
});
var B = A.extend(function B () {}, {
    foo: function (n) {
        if (n > 100) return -1;
        return B.$super.foo.call(this, n+1);
    }
});
var C = B.extend(function C () {}, {
    foo: function (n) {
        return C.$super.foo.call(this, n+2);
    }
});

var c = new C();
document.write(c.foo(0) + '<br>'); //3
A.prototype.foo = function(n) { return -n; };
document.write(c.foo(0)); //-3

使用特权方法而不是公共方法的示例用法。

var A2 = Class.extend(function A2 () {
    this.foo = function (n) {
        return n;
    };
});
var B2 = A2.extend(function B2 () {
    B2.$super.constructor();
    this.foo = function (n) {
        if (n > 100) return -1;
        return B2.$super.foo.call(this, n+1);
    };
});
var C2 = B2.extend(function C2 () {
    C2.$super.constructor();
    this.foo = function (n) {
        return C2.$super.foo.call(this, n+2);
    };
});

//you must remember to constructor chain
//if you don't then C2.$super.foo === A2.prototype.foo

var c = new C2();
document.write(c.foo(0) + '<br>'); //3

Answer 6

本着完整性的精神（也感谢大家的这个帖子，它是一个很好的参考点！）我想加入这个实现。

如果我们承认没有很好的方法来满足上述所有标准，那么我认为这是 Salsify 团队的勇敢努力（我刚刚找到它）在这里找到。这是我见过的唯一实现，既避免了递归问题，又让 .super 成为对正确原型的引用，而无需预编译。

因此，我们不是打破标准 1，而是打破标准 5。

该技术取决于使用 Function.caller （不符合 es5，尽管它在浏览器中得到广泛支持，并且 es6 消除了未来的需求），但它给出了非常优雅的解决所有其他问题（我认为）。 .caller 让我们获取方法引用，从而让我们定位原型链中的位置，并使用 getter 返回正确的原型。它并不完美，但它与我在这个空间中看到的解决方案有很大不同，

var Base = function() {};

Base.extend = function(props) {
  var parent = this, Subclass = function(){ parent.apply(this, arguments) };

    Subclass.prototype = Object.create(parent.prototype);

    for(var k in props) {
        if( props.hasOwnProperty(k) ){
            Subclass.prototype[k] = props[k]
            if(typeof props[k] === 'function')
                Subclass.prototype[k]._name = k
        }
    }

    for(var k in parent) 
        if( parent.hasOwnProperty(k)) Subclass[k] = parent[k]        

    Subclass.prototype.constructor = Subclass
    return Subclass;
};

Object.defineProperty(Base.prototype, "super", {
  get: function get() {
    var impl = get.caller,
        name = impl._name,
        foundImpl = this[name] === impl,
        proto = this;

    while (proto = Object.getPrototypeOf(proto)) {
      if (!proto[name]) break;
      else if (proto[name] === impl) foundImpl = true;
      else if (foundImpl)            return proto;
    }

    if (!foundImpl) throw "`super` may not be called outside a method implementation";
  }
});

var Parent = Base.extend({
  greet: function(x) {
    return x + " 2";
  }
})

var Child = Parent.extend({
  greet: function(x) {
    return this.super.greet.call(this, x + " 1" );
  }
});

var c = new Child
c.greet('start ') // => 'start 1 2'

您也可以调整它以返回正确的方法（如原始帖子中所示），或者您可以消除用名称注释每个方法的需要，通过将名称传递给超级函数（而不是使用 getter）

这里是一个演示该技术的工作小提琴： jsfiddle< /a>

Answer 7

看看 Classy 库；它使用 this.$super 提供类和继承以及对重写方法的访问

Answer 8

对于那些不理解OP提出的递归问题的人，这里有一个例子：

function A () {}
A.prototype.foo = function (n) {
    return n;
};

function B () {}
B.prototype = new A();
B.prototype.constructor = B;
B.prototype.$super = A.prototype;
B.prototype.foo = function (n) {
    if (n > 100) return -1;
    return this.$super.foo.call(this, n+1);
};

function C () {}
C.prototype = new B();
C.prototype.constructor = C;
C.prototype.$super = B.prototype;
C.prototype.foo = function (n) {
    return this.$super.foo.call(this, n+2);
};


alert(new C().foo(0)); // alerts -1, not 3

原因：Javascript中的this是动态绑定的。

Answer 9

我想出了一种方法，允许您通过更改执行上下文来使用伪关键字 Super（我还没有在这里看到这种方法。）我发现我根本不满意的缺点是它不能将“Super”变量添加到方法的执行上下文中，而是将其替换为整个执行上下文，这意味着用该方法定义的任何私有方法都将变得不可用...

此方法与“eval hack”非常相似OP 提出，但它不对函数的源字符串，只需在当前执行上下文中使用 eval 重新声明该函数。让它变得更好一点，因为这两种方法都有相同的上述缺点。

非常简单的方法：

function extend(child, parent){

    var superify = function(/* Super */){
        // Make MakeClass scope unavailable.
        var child = undefined,
            parent = undefined,
            superify = null,
            parentSuper = undefined,
            oldProto = undefined,
            keys = undefined,
            i = undefined,
            len = undefined;

        // Make Super available to returned func.
        var Super = arguments[0];
        return function(/* func */){
            /* This redefines the function with the current execution context.
             * Meaning that when the returned function is called it will have all of the current scopes variables available to it, which right here is just "Super"
             * This has the unfortunate side effect of ripping the old execution context away from the method meaning that no private methods that may have been defined in the original scope are available to it.
             */
            return eval("("+ arguments[0] +")");
        };
    };

    var parentSuper = superify(parent.prototype);

    var oldProto = child.prototype;
    var keys = Object.getOwnPropertyNames(oldProto);
    child.prototype = Object.create(parent.prototype);
    Object.defineProperty(child.prototype, "constructor", {enumerable: false, value: child});

    for(var i = 0, len = keys.length; i<len; i++)
        if("function" === typeof oldProto[keys[i]])
            child.prototype[keys[i]] = parentSuper(oldProto[keys[i]]);
}

一个制作类的例子

function P(){}
P.prototype.logSomething = function(){console.log("Bro.");};

function C(){}
C.prototype.logSomething = function(){console.log("Cool story"); Super.logSomething.call(this);}

extend(C, P);

var test = new C();
test.logSomething(); // "Cool story" "Bro."

前面提到的缺点的一个例子。

(function(){
    function privateMethod(){console.log("In a private method");}

    function P(){};

    window.C = function C(){};
    C.prototype.privilagedMethod = function(){
        // This throws an error because when we call extend on this class this function gets redefined in a new scope where privateMethod is not available.
        privateMethod();
    }

    extend(C, P);
})()

var test = new C();
test.privilagedMethod(); // throws error

另请注意，此方法并不是“超级”子构造函数，这意味着 Super 对其不可用。我只是想解释这个概念，而不是创建一个工作库:)

另外，刚刚意识到我满足了OP的所有条件！ （虽然确实应该有一个关于执行上下文的条件）

Answer 10

这是我的版本：lowclass

这是测试中的super意大利面汤示例.js 文件（编辑：制作成运行示例）：

var SomeClass = Class((public, protected, private) => ({

    // default access is public, like C++ structs
    publicMethod() {
        console.log('base class publicMethod')
        protected(this).protectedMethod()
    },

    checkPrivateProp() {
        console.assert( private(this).lorem === 'foo' )
    },

    protected: {
        protectedMethod() {
            console.log('base class protectedMethod:', private(this).lorem)
            private(this).lorem = 'foo'
        },
    },

    private: {
        lorem: 'blah',
    },
}))

var SubClass = SomeClass.subclass((public, protected, private, _super) => ({

    publicMethod() {
        _super(this).publicMethod()
        console.log('extended a public method')
        private(this).lorem = 'baaaaz'
        this.checkPrivateProp()
    },

    checkPrivateProp() {
        _super(this).checkPrivateProp()
        console.assert( private(this).lorem === 'baaaaz' )
    },

    protected: {

        protectedMethod() {
            _super(this).protectedMethod()
            console.log('extended a protected method')
        },

    },

    private: {
        lorem: 'bar',
    },
}))

var GrandChildClass = SubClass.subclass((public, protected, private, _super) => ({

    test() {
        private(this).begin()
    },

    reallyBegin() {
        protected(this).reallyReallyBegin()
    },

    protected: {
        reallyReallyBegin() {
            _super(public(this)).publicMethod()
        },
    },

    private: {
        begin() {
            public(this).reallyBegin()
        },
    },
}))

var o = new GrandChildClass
o.test()

console.assert( typeof o.test === 'function' )
console.assert( o.reallyReallyBegin === undefined )
console.assert( o.begin === undefined )

<script> var module = { exports: {} } </script>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script> var Class = module.exports // get the export </script>

尝试无效的成员访问或无效使用 _super 将引发错误。

关于要求：

1. this.$super 必须是对原型的引用。即，如果我在运行时更改超级原型，则此更改将得到反映。这基本上意味着父级有一个新属性，那么这应该在运行时通过 super 显示在所有子级上，就像对父级的硬编码引用会反映更改一样

   不，_super 帮助器不返回原型，仅返回带有复制描述符的对象，以避免修改受保护和私有原型。此外，从中复制描述符的原型保存在Class/subclass调用的范围内。拥有这个就太好了。 FWIW，本机类的行为相同。

2. this.$super.f.apply(this, 参数);必须适用于递归调用。对于任何在沿着继承链向上进行多个 super 调用的继承链集，您一定不会遇到递归问题。

   是的，没问题。

3. 您不得对子级中的超级对象进行硬编码引用。即 Base.prototype.f.apply(this,arguments);失败了。

   是的

4. 您不得使用 X to JavaScript 编译器或 JavaScript 预处理器。

   是的，所有运行时

5. 必须兼容 ES5

   是的，它包括一个基于 Babel 的构建步骤（某些类使用 Wea​​kMap，它被编译为非泄漏 ES5 形式）。我不认为这违反了要求 4，它只是允许我编写 ES6+，但它应该仍然可以在 ES5 中工作。诚然，我没有在 ES5 中对此进行太多测试，但如果您想尝试一下，我们绝对可以解决我端的任何构建问题，并且从您端来看，您应该能够在没有任何构建步骤的情况下使用它.

唯一未满足的要求是 1. 那就太好了。但更换原型也许是不好的做法。但实际上，我确实有一些用途，我想交换原型以实现元东西。 “如果能在本机 super 中拥有此功能（这是静态的 :( ），那就太好了，更不用说在此实现中了。

为了仔细检查要求 2，我将基本的递归测试添加到了我的 test.js 中，哪个有效（编辑：制作成运行示例）：

const A = Class((public, protected, private) => ({
    foo: function (n) { return n }
}))

const B = A.subclass((public, protected, private, _super) => ({
    foo: function (n) {
        if (n > 100) return -1;
        return _super(this).foo(n+1);
    }
}))

const C = B.subclass((public, protected, private, _super) => ({
    foo: function (n) {
        return _super(this).foo(n+2);
    }
}))

var c = new C();
console.log( c.foo(0) === 3 )

<script> var module = { exports: {} } </script>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script> var Class = module.exports // get the export </script>

（对于这些小类来说，类头有点长。我有几个想法可以减少，如果不是所有的助手都需要预先）

Answer 11

我想我有一个更简单的方法......

function Father(){
  this.word = "I'm the Father";

  this.say = function(){
     return this.word; // I'm the Father;
  }
}

function Sun(){
  Father.call(this); // Extend the Father

  this.word = "I'm the sun"; // Override I'm the Father;

  this.say = function(){ // Override I'm the Father;
    this.word = "I was changed"; // Change the word;
    return new Father().say.apply(this); // Call the super.say()
  }
}

var a = new Father();
var b = new Sun();

a.say() // I'm the father
b.ay() // I'm the sun
b.say() // I was changed