[英]Javascript Classical Inheritance calling parent
I want to call the super method in an extended javascript 'class' by applying classical inheritance. 我想通过应用经典继承在扩展的javascript“类”中调用super方法。
function Person(name, age) {
this._name = name;
this._age = age;
}
Person.prototype.exposeInfo = function() {
alert(this._name + ' - ' + this._age);
}
function Employee(name, age) {
this.parent.constructor.call(this, name, age);
}
Employee.prototype.exposeInfo = function() {
alert('Call employee');
this.parent.exposeInfo();
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.parent = Person.prototype;
var p1 = new Person('John Doe', 30);
p1.exposeInfo();
var p2 = new Employee('John Foobar (empl.)', 35);
p2.exposeInfo();
The problem is that the method is not being called in the extended class, but only in the parent (Person). 问题是该方法不是在扩展类中调用,而是仅在父(Person)中调用。
That's because the overriding exposeInfo
is being attached to the former prototype
object, which is then replaced: 那是因为重写的exposeInfo
被附加到前一个prototype
对象,然后被替换:
Employee.prototype = Object.create(Person.prototype);
You'll want to reverse the order, attaching methods after creating the prototype
: 您需要反转顺序,在创建prototype
后附加方法:
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.parent = Person.prototype;
Employee.prototype.exposeInfo = function() {
// ...
}
You'll also need to use .call()
or .apply()
with exposeInfo
as you did with the constructor: 您还需要像使用构造函数一样使用exposeInfo
.call()
或.apply()
和exposeInfo
:
Employee.prototype.exposeInfo = function() {
alert('Call employee');
this.parent.exposeInfo.apply(this, arguments);
}
Otherwise, the value of this
will be determined by the last member operator: 否则, this
的值将由最后一个成员运算符确定:
// so, calling:
this.parent.exposeInfo();
// is equivalent to:
alert(this.parent._name + ' - ' + this.parent._age);
// ...
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.parent = Person.prototype;
Employee.prototype.exposeInfo = function() {
this.parent.exposeInfo.apply(this, arguments);
// ...
}
It's not going to work. 它不会起作用。
Example: 例:
// ...
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.parent = Person.prototype;
Employee.prototype.exposeInfo = function() {
this.parent.exposeInfo.apply(this, arguments);
// ...
}
ParttimeEmployee = Object.create(Employee.prototype);
ParttimeEmployee.prototype.constructor = ParttimeEmployee;
ParttimeEmployee.prototype.parent = Employee.prototype;
ParttimeEmployee.prototype.exposeInfo = function() {
this.parent.exposeInfo.apply(this, arguments);
// ...
}
var p1 = new Person('Jack', 30);
p1.exposeInfo(); // ok
var p2 = new Employee('Jane', 25);
p2.exposeInfo(); // ok
var p3 = new ParttimeEmployee('John', 20);
p3.exposeInfo(); // infinite recursion !!!
Correct version: 正确版本:
// Person
function Person(name, age) {
this._name = name;
this._age = age;
}
Person.prototype.exposeInfo = function() {
alert(this._name + ' - ' + this._age);
}
// Employee
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.parent = Person.prototype; // <--
Employee.prototype.exposeInfo = function() {
Employee.parent.exposeInfo.apply(this, arguments); // <--
// ...
}
// ParttimeEmployee
ParttimeEmployee = Object.create(Employee.prototype);
ParttimeEmployee.prototype.constructor = ParttimeEmployee;
ParttimeEmployee.parent = Employee.prototype; // <--
ParttimeEmployee.prototype.exposeInfo = function() {
ParttimeEmployee.parent.exposeInfo.apply(this, arguments); // <--
// ...
}
var p1 = new Person('Jack', 30);
p1.exposeInfo(); // ok
var p2 = new Employee('Jane', 25);
p2.exposeInfo(); // ok
var p3 = new ParttimeEmployee('John', 20);
p3.exposeInfo(); // ok
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.