的Javascript經典的繼承父叫

Question

我想通過應用經典的繼承來調用擴展JavaScript的「類」超級方法。

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(); 

JS Fiddle

的問題是，該方法不被稱爲擴展的類，但是隻有在父（人）。

Answer 1

這是因爲壓倒一切的exposeInfo被連接到前prototype對象，然後將其替換爲：

Employee.prototype = Object.create(Person.prototype); 

你要顛倒順序，創建prototype後安裝方法：

Employee.prototype = Object.create(Person.prototype); 
Employee.prototype.constructor = Employee; 
Employee.prototype.parent = Person.prototype; 

Employee.prototype.exposeInfo = function() { 
    // ... 
} 

---

您還需要使用.call()或.apply()與exposeInfo像你一樣用構造：

Employee.prototype.exposeInfo = function() { 
    alert('Call employee'); 
    this.parent.exposeInfo.apply(this, arguments);  
} 

否則，this值將由最後一個成員運營商確定：

// so, calling: 
this.parent.exposeInfo(); 

// is equivalent to: 
alert(this.parent._name + ' - ' + this.parent._age); 

Answer 2

// ... 

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); 
    // ... 
} 

它行不通。

例子：

// ... 

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 !!! 

正確的版本：

// 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