扩展函数不调用基础构造函数

Question

我有一个组件系统，它应该从名为 component 的基础对象扩展而来。

可以通过名为 registerComponent() 的函数注册新组件。此函数采用一个参数 - 子 class - 并且应该将父 class component 注入其中。

下面的代码几乎可以处理这种情况，问题是永远不会调用 component 构造函数：

// Base component.
function component() { 
  this.visible = false; 
  console.log('Construct component.'); 
}
component.prototype.isVisible = function() { 
  console.log('visibility:', this.visible); 
}

// Custom component that will be extended in a moment.
function button() { 
  this.caption = 'button'; 
  console.log('Construct button.'); 
}

// This is the function I need help with:
function registerComponent(obj) {
  function dynamicComponent() { 
    component.call(this); 
    obj.call(this);
  }

  dynamicComponent.prototype = Object.create(component.prototype);
  obj.prototype = Object.create(dynamicComponent.prototype);
  obj.prototype.constructor = obj;
}

// Now we register the button, which should add two things: 
// the property "this.visible"
// the method "this.isVisible()"
registerComponent(button);

// The test:
b = new button(); // Output is "Construct button."
                  // but not "Construct component." 
b.isVisible();    // Output is "visibility: undefined"

在上面的代码中，方法 component.prototype.isVisible() 被正确地注入到按钮中。但是，未调用构造函数，因此属性 this.visible 是 undefined，而不是 false。

我在这里错过了什么？

Answer 1

我想你正在寻找

// This is the function I need help with:
function registerComponent(obj) {
  function dynamicComponent() { 
    component.call(this); 
    obj.call(this);
  }

  obj.prototype = dynamicComponent.prototype = Object.create(component.prototype);
  obj.prototype.constructor = dynamicComponent;

  return dynamicComponent;
}

const button = registerComponent(function() { 
  this.caption = 'button'; 
  console.log('Construct button.'); 
});

const b = new button();

您不能更改现有的 button 函数以使其隐式调用 component。

扩展函数不调用基础构造函数

Extend function does not call the base constructor

javascript

prototypal-inheritance