在javascript中模拟超级

Question

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

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

坚持的标准是：

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

天真的实现会是这样的。

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

但是这个breaks condition 2。

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

Answer 1

对于那些不了解 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 2

John Resig 发布了一个简单但出色的 super 支持的不连贯机制。 唯一的区别是super 指向你调用它的基方法。

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

Answer 3

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

Answer 4

我认为你提到的“递归超级”问题没有“免费”的方法。

我们不能乱用this，因为这样做要么会迫使我们以非标准方式更改原型，要么将我们移到原型链上，从而丢失实例变量。因此，当我们进行 super-ing 时，必须知道“当前类”和“超类”，而不是将责任传递给 this 或其属性之一。

我们可以尝试做很多事情，但我认为都会有一些不受欢迎的后果：

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

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

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

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

  //Normal Javascript needs the superclass name
  SuperClass.prototype.method.call(this, 1,2,3);
  

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

---

编辑：工作fiddle

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 5

请注意，对于以下实现，当您在通过 $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 6

super 的主要困难在于你需要找到我称之为here 的对象：包含生成超级引用的方法的对象。这对于获得正确的语义是绝对必要的。显然，拥有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 7

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 8

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

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

Answer 9

本着完整性的精神（也感谢大家对这个帖子的关注，它是一个很好的参考点！）我想在这个实现中折腾。

如果我们承认没有好的方法可以满足上述所有标准，那么我认为这是 Salsify 团队的一项英勇努力（我刚刚找到）found here。这是我见过的唯一实现避免递归问题，但也让.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

Answer 10

我想出了一种方法，允许您通过更改执行上下文来使用伪关键字 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 11

这是我的版本：lowclass

这是来自 test.js 文件的super 意大利面条汤示例（编辑：变成运行示例）：

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/lowclass@3.1.0/index.js"></script>
<script> var Class = module.exports // get the export </script>

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

关于要求：

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

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

2. this.$super.f.apply(this, arguments);必须适用于递归调用。对于任何在继承链上进行多个超级调用的链式继承集，都不能遇到递归问题。

   是的，没问题。

3. 您不能在您的孩子中硬编码对超级对象的引用。 IE。 Base.prototype.f.apply(this, arguments);失败了。

   是的

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

   是的，所有运行时

5. 必须符合 ES5

   是的，它包括一个基于 Babel 的构建步骤（例如，lowclass 使用 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/lowclass@3.1.0/index.js"></script>
<script> var Class = module.exports // get the export </script>

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