JS原型和繼承

Question

在我的業餘時間，我嘗試學習一點JS，但我堅持主題的主題。

var person = new Person("Bob", "Smith", 52); 
 
var teacher = new Teacher("Adam", "Greff", 209); 
 

 
function Humans(firstName, lastName) { 
 
    this.firstName = firstName; 
 
    this.lastName = lastName; 
 
} 
 

 
function Person(firstName, lastName, age) { 
 
    Humans.call(this, firstName, lastName); 
 
    this.age = age; 
 
} 
 

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

 
Person.prototype.fullDetail = function() { 
 
    return this.firstName + " " + this.lastName + " " + this.age; 
 
}; 
 

 

 
function Teacher(firstName, lastName, roomNumber) { 
 
    Humans.call(this, firstName, lastName); 
 
    this.room = roomNumber; 
 
} 
 

 
Teacher.prototype = Object.create(Humans.prototype); 
 

 
Teacher.prototype.fullDetail = function() { 
 
    return this.firstName + " " + this.lastName + " " + this.room; 
 
}; 
 

 
person.fullDetail();

任何人能告訴我，爲什麼我不能執行person.fullDetail();？

如果您可以對您的代碼版本進行一些評論，我將非常感激，謝謝。

Answer 1

因爲你」在定義原型應該是什麼之前重新創建對象。

當你

var person = new Person ("Bob", "Smith", 52); 

你的基礎上 Person的 當前定義製作的對象

。後來在該代碼，你改變的Person原型在它的全部

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

爲了解決這個問題，創建對象後，你就大功告成了重新分配的雛形。

function Humans(firstName, lastName) { 
 
    this.firstName = firstName; 
 
    this.lastName = lastName; 
 
} 
 

 
function Person(firstName, lastName, age) { 
 
    Humans.call(this, firstName, lastName); 
 
    this.age = age; 
 
} 
 

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

 
Person.prototype.fullDetail = function() { 
 
    return this.firstName + " " + this.lastName + " " + this.age; 
 
}; 
 

 

 
function Teacher(firstName, lastName, roomNumber) { 
 
    Humans.call(this, firstName, lastName); 
 
    this.room = roomNumber; 
 
} 
 

 
Teacher.prototype = Object.create(Humans.prototype); 
 

 
Teacher.prototype.fullDetail = function() { 
 
    return this.firstName + " " + this.lastName + " " + this.room; 
 
}; 
 

 
var person = new Person("Bob", "Smith", 52); 
 
var teacher = new Teacher("Adam", "Greff", 209); 
 
console.log(person.fullDetail());

Answer 2

是的，這是因爲當你創建person對象Person原型沒有FullDetail方法。

更改你的對象創建的排序，創建Person對象添加方法後以原形

檢查這個片段

var teacher; 
 
var person; 
 
function Humans(firstName, lastName) { 
 
    this.firstName = firstName; 
 
    this.lastName = lastName; 
 
} 
 

 
function Person(firstName, lastName, age) { 
 
    Humans.call(this, firstName, lastName); 
 
    this.age = age; 
 
} 
 

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

 
Person.prototype.fullDetail = function() { 
 
    return this.firstName + " " + this.lastName + " " + this.age; 
 
}; 
 

 
person = new Person("Bob", "Smith", 52); 
 

 
function Teacher(firstName, lastName, roomNumber) { 
 
    Humans.call(this, firstName, lastName); 
 
    this.room = roomNumber; 
 
} 
 

 
Teacher.prototype = Object.create(Humans.prototype); 
 

 
Teacher.prototype.fullDetail = function() { 
 
    return this.firstName + " " + this.lastName + " " + this.room; 
 
}; 
 
teacher= new Teacher("Adam", "Greff", 209); 
 
console.log(person.fullDetail()); 
 
console.log(teacher.fullDetail());

希望它可以幫助

Answer 3

我想這是因爲你無需在原型尚未定義它們的功能創建者和教師。試試這個：

function Humans(firstName, lastName) { 
 
     this.firstName = firstName; 
 
     this.lastName = lastName; 
 
    } 
 
    
 
    function Person(firstName, lastName, age) { 
 
     Humans.call(this, firstName, lastName); 
 
     this.age = age; 
 
    } 
 
    
 
    Person.prototype = Object.create(Humans.prototype); 
 
    
 
    Person.prototype.fullDetail = function() { 
 
     return this.firstName + " " + this.lastName + " " + this.age; 
 
    }; 
 
    
 
    
 
    function Teacher(firstName, lastName, roomNumber) { 
 
     Humans.call(this, firstName, lastName); 
 
     this.room = roomNumber; 
 
    } 
 
    
 
    Teacher.prototype = Object.create(Humans.prototype); 
 
    
 
    Teacher.prototype.fullDetail = function() { 
 
     return this.firstName + " " + this.lastName + " " + this.room; 
 
    }; 
 
    var person = new Person ("Bob", "Smith", 52); 
 
    var teacher = new Teacher ("Adam", "Greff", 209); 
 
    
 
    console.log(person.fullDetail());

(͡° ͜ʖ ͡°)

Answer 4

如果你在ES6，你可以使用新的類語法像

class ExampleBaseClass { 
    // Do things here... 
} 

class ExampleClass extends ExampleBaseClass { 
    // Do other things here... 
    // You may use methods from ExampleBaseClass here. 
} 

參見：https://www.sitepoint.com/understanding-ecmascript-6-class-inheritance/