javascript - JavaScript 中的继承 : child object still calling its parent method

Question

我正在尝试在 Javascript 继承中做一个简单的练习，但我无法理解这段代码发生了什么:

function person() {
    this.firstName = 'asdf';
    this.lastName = 'asdfasdf';
    this.showName = function () {
        console.log(this.firstName);
    }
}

function employee() {
    person.call(this);
}
employee.prototype = person.prototype;
employee.prototype.showName = function showName() {
    console.log = "I am an employee";
};

var p = new person();
p.showName();
var e = new employee();
e.showName();

在此代码中，e.showName 仍在调用其父方法，尽管我试图重写该方法。我做错了什么？

Answer 1

这是因为prototype chain 。 JavaScript 运行时将查找所请求属性的最近定义。

既然你定义了 showName在person在构造函数调用期间，您定义了 showName在对象中而不是在原型(prototype)中。运行时将查找最近的名为 showName 的属性。它会找到this.showName之前prototype.showName .

尝试定义 showName在person在原型(prototype)中而不是在对象本身中:

function person() {
  ...
}

person.prototype = { 
      showName: function() {
          ...
      }
}

...您将得到预期的结果!

换句话说...

假设您有以下 JavaScript 构造函数:

var A = function() {
    this.doX = function() {};
};

A.prototype = {
   doX: function() { }
};

如果我创建 A 的实例，将会调用什么函数？

var instance = new A();
instance.doX(); // ?????

doX()构造时添加的将是运行时调用的，而不是原型(prototype)中定义的。

事实上，doX() A中定义构造函数相当于只执行以下声明:

var instance = new A();
instance.doX = function() {};

this A 内的关键字构造函数是实例化对象的引用，因此在构造函数内部或外部声明它是相同的 - 实际上只有一个区别:如果您在构造函数外部声明，则并非所有 A实例将拥有整个属性(property)...-.

最终，对象中声明的属性隐藏了原型(prototype)中声明的属性，这就是您的代码中发生的情况，因为 employee调用person构造函数 this引用employee ，这意味着showName在person将隐藏 employee 中声明的内容原型(prototype)。