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

是的，因为当你创建 person 对象时，Person 原型没有 FullDetail 方法。

更改对象创建的顺序，在向原型添加方法后创建人物对象

检查这个片段

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 2

因为您在定义对象的原型之前就创建了对象。

当你

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 3

我认为这是因为你创建了 person 和 teacher 而没有在原型中定义它们的功能。试试这个：

    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 语法，例如

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/

JS原型与继承

JS prototype and inheritance

javascript

prototype

prototypal-inheritance