我花了几个小时试图找到解决问题的办法,但似乎毫无希望。

基本上,我需要知道如何从子类调用父方法。 到目前为止,我所尝试的所有东西都以无效或重写父方法而告终。

我使用下面的代码在javascript中设置OOP:

// SET UP OOP
// surrogate constructor (empty function)
function surrogateCtor() {}

function extend(base, sub) {
    // copy the prototype from the base to setup inheritance
    surrogateCtor.prototype = base.prototype;
    sub.prototype = new surrogateCtor();
    sub.prototype.constructor = sub;
}

// parent class
function ParentObject(name) {
    this.name = name;
}
// parent's methods
ParentObject.prototype = {
    myMethod: function(arg) {
        this.name = arg;
    }
}

// child
function ChildObject(name) {
    // call the parent's constructor
    ParentObject.call(this, name);
    this.myMethod = function(arg) {
        // HOW DO I CALL THE PARENT METHOD HERE?
        // do stuff
    }
}

// setup the prototype chain
extend(ParentObject, ChildObject);

我需要先调用父方法,然后在子类中添加一些更多的东西。

在大多数OOP语言中,调用parent.myMethod()就可以了 但我真的不能理解它是如何在javascript中完成的。

任何帮助都非常感激,谢谢!


当前回答

下面是一种让子对象使用JavaScript的原型链访问父属性和方法的好方法,并且它与Internet Explorer兼容。JavaScript在原型链中搜索方法,我们希望子原型链看起来像这样:

子实例->子的原型(带子方法)->父的原型(带父方法)->对象原型-> null

子方法也可以调用阴影父方法,如下面的三个星号***所示。

方法如下:

//Parent constructor function ParentConstructor(firstName){ //add parent properties: this.parentProperty = firstName; } //add 2 Parent methods: ParentConstructor.prototype.parentMethod = function(argument){ console.log( "Parent says: argument=" + argument + ", parentProperty=" + this.parentProperty + ", childProperty=" + this.childProperty ); }; ParentConstructor.prototype.commonMethod = function(argument){ console.log("Hello from Parent! argument=" + argument); }; //Child constructor function ChildConstructor(firstName, lastName){ //first add parent's properties ParentConstructor.call(this, firstName); //now add child's properties: this.childProperty = lastName; } //insert Parent's methods into Child's prototype chain var rCopyParentProto = Object.create(ParentConstructor.prototype); rCopyParentProto.constructor = ChildConstructor; ChildConstructor.prototype = rCopyParentProto; //add 2 Child methods: ChildConstructor.prototype.childMethod = function(argument){ console.log( "Child says: argument=" + argument + ", parentProperty=" + this.parentProperty + ", childProperty=" + this.childProperty ); }; ChildConstructor.prototype.commonMethod = function(argument){ console.log("Hello from Child! argument=" + argument); // *** call Parent's version of common method ParentConstructor.prototype.commonMethod(argument); }; //create an instance of Child var child_1 = new ChildConstructor('Albert', 'Einstein'); //call Child method child_1.childMethod('do child method'); //call Parent method child_1.parentMethod('do parent method'); //call common method child_1.commonMethod('do common method');

其他回答

下面是一种让子对象使用JavaScript的原型链访问父属性和方法的好方法,并且它与Internet Explorer兼容。JavaScript在原型链中搜索方法,我们希望子原型链看起来像这样:

子实例->子的原型(带子方法)->父的原型(带父方法)->对象原型-> null

子方法也可以调用阴影父方法,如下面的三个星号***所示。

方法如下:

//Parent constructor function ParentConstructor(firstName){ //add parent properties: this.parentProperty = firstName; } //add 2 Parent methods: ParentConstructor.prototype.parentMethod = function(argument){ console.log( "Parent says: argument=" + argument + ", parentProperty=" + this.parentProperty + ", childProperty=" + this.childProperty ); }; ParentConstructor.prototype.commonMethod = function(argument){ console.log("Hello from Parent! argument=" + argument); }; //Child constructor function ChildConstructor(firstName, lastName){ //first add parent's properties ParentConstructor.call(this, firstName); //now add child's properties: this.childProperty = lastName; } //insert Parent's methods into Child's prototype chain var rCopyParentProto = Object.create(ParentConstructor.prototype); rCopyParentProto.constructor = ChildConstructor; ChildConstructor.prototype = rCopyParentProto; //add 2 Child methods: ChildConstructor.prototype.childMethod = function(argument){ console.log( "Child says: argument=" + argument + ", parentProperty=" + this.parentProperty + ", childProperty=" + this.childProperty ); }; ChildConstructor.prototype.commonMethod = function(argument){ console.log("Hello from Child! argument=" + argument); // *** call Parent's version of common method ParentConstructor.prototype.commonMethod(argument); }; //create an instance of Child var child_1 = new ChildConstructor('Albert', 'Einstein'); //call Child method child_1.childMethod('do child method'); //call Parent method child_1.parentMethod('do parent method'); //call common method child_1.commonMethod('do common method');

以下是它是如何做到的:

或者如果你想在当前实例的上下文中调用它,你可以这样做: ParentClass.prototype.myMethod.call(这)

从带参数的子类调用父方法也是一样: ParentClass.prototype.myMethod。call(this, arg1, arg2, ..) *提示:使用apply()而不是call()来作为数组传递参数。

虽然您可以通过父方法的原型调用父方法,但您将需要传递当前的子实例以使用调用、应用或绑定方法。bind方法会创建一个新函数,所以如果你关心性能,我不建议你这样做,除非它只被调用一次。

作为一种替代方法,您可以替换子方法,并在调用原始子方法时将父方法放在实例上。

function proxy(context, parent){ var proto = parent.prototype; var list = Object.getOwnPropertyNames(proto); for(var i=0; i < list.length; i++){ var key = list[i]; // Create only when child have similar method name if(context[key] !== proto[key]){ let currentMethod = context[key]; let parentMethod = proto[key]; context[key] = function(){ context.super = parentMethod; return currentMethod.apply(context, arguments); } } } } // ========= The usage would be like this ========== class Parent { first = "Home"; constructor(){ console.log('Parent created'); } add(arg){ return this.first + ", Parent "+arg; } } class Child extends Parent{ constructor(b){ super(); proxy(this, Parent); console.log('Child created'); } // Comment this to call method from parent only add(arg){ return super.add(arg) + ", Child "+arg; } } var family = new Child(); console.log(family.add('B'));

对于多级原型查找,有一个更简单、更紧凑的解决方案,但它需要Proxy支持。用法:SUPER(<实例>).<方法>(<参数>),例如,假设两个类A和B用方法m扩展了A: SUPER(新B).m()。

function SUPER(instance) {
    return new Proxy(instance, {
        get(target, prop) {
            return Object.getPrototypeOf(Object.getPrototypeOf(target))[prop].bind(target);
        }
    });
}

更灵活的答案与经典的js。

你在子类中定义了"_parent = A.prototype;",然后你可以用apply调用父类的方法:

A类{ _msg = ' A '; _msgOnlyA='伟大的来自A'; 构造函数(){ } 你好(){ console.log('你好' +。_msg +”、“+ this._msgOnlyA); } }; 类B扩展A{ _parent = A.prototype; _msg = ' B '; 构造函数(){ 超级(); } 你好(){ this._parent.hello。应用(这个参数); console.log('你好' + this._msg); } }; var b = new b (); b.hello ();