javascript - JavaScript 中的原型(prototype)链返回未定义

Question

有人可以帮忙解决这个问题吗？每次我调用 kid.say 时，控制台都会返回未定义。我期待它查找原型(prototype)链，让 child 可以访问函数 say。

function inherit(C, P) {
  var F = function() {};
  F.prototype = P.prototype;
  C.prototype = new F();
}

// the parent constructor
function Parent(name) {
  this.name = name || 'Adam';
}

// adding functionality to the prototype
Parent.prototype.say = function() {
  return this.name;
};

function inherit(C, P) {
  var F = function() {};
  F.prototype = P.prototype;
  C.prototype = new F();
}

// the parent constructor
function Parent(name) {
  this.name = name || 'Adam';
}

// adding functionality to the prototype
Parent.prototype.say = function() {
  return this.name;
};

var dad = new Parent();

// child constructor
function Child(name) {
  Parent.apply(this, arguments);
}

var kid = new Child("Patrick");

inherit(kid, dad);

console.log(kid.say);

Answer 1

该 inherit 函数旨在设置两个构造函数之间的继承，不是单个对象，而是 kid 和 dad 是单独的对象。

虽然在以标准方式创建现有对象后可以更改现有对象的原型(prototype)(从 ES2015 开始)，但不建议这样做。

所以问题实际上只是您滥用了 inherit 函数。你会想要:

inherit(Child, Parent);

...并且您希望在创建 kid 之前执行此操作。

(另外，不相关的，您已分配给 Parent.prototype.say 两次，具有相同的函数定义。只需一次就足够了，我已删除下面是多余的。)

如果您这样做，它会正确记录该函数(因为您没有调用它，您只是引用了它):

function inherit(C, P) {
  var F = function() {};
  F.prototype = P.prototype;
  C.prototype = new F();
}

// the parent constructor
function Parent(name) {
  this.name = name || 'Adam';
}

// adding functionality to the prototype
Parent.prototype.say = function() {
  return this.name;
};

function inherit(C, P) {
  var F = function() {};
  F.prototype = P.prototype;
  C.prototype = new F();
}

// the parent constructor
function Parent(name) {
  this.name = name || 'Adam';
}

inherit(Child, Parent);

var dad = new Parent;

// child constructor
function Child(name) {
  Parent.apply(this, arguments);
}

var kid = new Child("Patrick");

console.log(kid.say);

如果您想调用它，则需要在其后添加():console.log(kid.say());

function inherit(C, P) {
  var F = function() {};
  F.prototype = P.prototype;
  C.prototype = new F();
}

// the parent constructor
function Parent(name) {
  this.name = name || 'Adam';
}

// adding functionality to the prototype
Parent.prototype.say = function() {
  return this.name;
};

function inherit(C, P) {
  var F = function() {};
  F.prototype = P.prototype;
  C.prototype = new F();
}

// the parent constructor
function Parent(name) {
  this.name = name || 'Adam';
}

inherit(Child, Parent);

var dad = new Parent;

// child constructor
function Child(name) {
  Parent.apply(this, arguments);
}

var kid = new Child("Patrick");

console.log(kid.say());

<小时/>

从 ES2015 开始，不再需要 inherit 函数，只需使用 class 功能(如果需要支持较旧的环境，请进行转译):

class Parent {
    constructor(name) {
        this.name = name;
    }
    say() {
        return this.name;
    }
}

class Child extends Parent {
}

let kid = new Child("Patrick");

console.log(kid.say()); // Patrick

即使在 ES5(2009 年 12 月)中，那个版本的 inherit 也被 Object.create 废弃了:

Child.prototype = Object.create(Parent.prototype);

请注意，该版本的inherit 遗漏了一个重要步骤，即修复新创建的原型(prototype)对象上的构造函数 引用。

Child.prototype.constructor = Child;