使用OOP和继承淘汰组件

我希望我能得到一些关于如何使用

object.create

（或等效工具）以面向对象的方式使用敲除组件的信息。我也在使用Postbox和Lodash，以防我的一些代码看起来令人困惑。我目前已经构建了一系列组件，并希望重构它们以减少代码冗余。到目前为止，我的组件只是UI元素。我有定制的输入框等。我最初的做法如下，谨慎地简化代码，而不是解雇我：）

现在这种方法可以工作了，但我遇到的问题是，当我在HTML中使用InputBox时，我将当前值作为参数传入（这也是一个可观察的值，因为该值是从服务器检索的，并在到达InputBox组件之前通过多个父组件传递的）。然后，Lodash将params对象与

self

合并，后者已经有了一个可观察的值，因此会像预期的那样被覆盖。对我来说，有趣的是，当我使用postbox广播“revert”事件时，console.log会激发，因此事件订阅仍然存在，但值不会还原。当我在revert回调中执行此操作时，

console.log（self.value（），self.initial（））

，我会得到未定义的。因此，不知何故，将

值

作为参数传递给InputBox viewmodel会导致出现问题。当页面最初加载时，输入框中有从服务器检索到的值，因此

值

observable不会被完全破坏，但是更改输入字段，然后点击“取消”将其还原不会将其还原

---

我不知道这是否有意义，但如果有人能帮忙，我会非常感激！如果我能提供更多信息，请告诉我。谢谢

>JavaScript不做经典的继承，如C++等。原型不是超类。特别是，原型的属性更像静态类属性而不是实例属性：它们由所有实例共享。在JS中，原型通常只包含方法

有些库将经典继承结构覆盖到JavaScript上。他们通常使用“扩展”来创建子类。我没有使用它们，所以我不能特别重新编译任何东西，但是如果您喜欢经典的继承模式，您可以看看

我经常听到“喜欢构图而不是继承”，但我通常看到很多人强调继承。作为一种选择，考虑道格拉斯克罗克福德的“”，它完全继承继承。 对于您在这里尝试执行的操作，您可能希望InputBox使用组件进行自身初始化，例如：

function InputBox(params) {
  var self = this
  Component.bind(self)(); // super()
  _.merge(self, params) // quick way to attach passed in params to 'self'
...
}

---

新的、合并的

值

将不会从

组件

订阅，因为订阅是特定于

组件

的可观察实例的，该实例将被覆盖。

对于所有响应者，非常感谢！我找到了一个更适合我的解决方案，如果有人感兴趣，我会在这里分享

// Component.js (only relevant parts shown)
function Component(params) {
  var self = this
  _.merge(self, params)

  self.value.subscribeTo('some event', function() {
    // do some processing
    return <new value for self.value>
}
module.exports = Component

// InputBox.js
var Component = require('./component')

function InputBox(params) {
  var self = this
  Component.call(self, params)
}

//Component.js（仅显示相关部分）
功能组件（参数）{
var self=这个
_.merge（self，params）
self.value.subscribeTo（'someevent'，function（））{
//做一些处理
返回
}
module.exports=组件
//InputBox.js
var Component=require（“./Component”）
函数输入框（参数）{
var self=这个
组件调用（self，params）
}

---

通过采用这种方法，我避免了使用原型和担心原型链的头痛，因为组件所做的一切都是直接对“继承”进行的类。希望这对其他人有帮助！

您在InputBox中有一个

值

，在其原型中有一个

值

。原型

值

订阅还原事件。嗯……我明白了。我刚刚在节点中尝试了一些东西，这肯定是正在发生的事情，但有解决方案吗？如果不使用

对象，怎么办？创建e> 我使用了Node的
util.inherits
？这会有帮助吗？不，那不起作用。好吧，我被难住了：（与经典继承的区别得到了很好的解释。+1
// Component.js (only relevant parts shown)
function Component(params) {
  var self = this
  _.merge(self, params)

  self.value.subscribeTo('some event', function() {
    // do some processing
    return <new value for self.value>
}
module.exports = Component

// InputBox.js
var Component = require('./component')

function InputBox(params) {
  var self = this
  Component.call(self, params)
}