使用javascript,对象如何从另一个对象派生,而基础对象可以独立调用?

时间:2013-01-03 15:53:41

标签: javascript oop inheritance

例如:

object1 = function() {
  console.log('action1');
}

object2 = function() {
  console.log('action2');
}

object1(); //should log "action1"
object2(); //I need this to log "action1" and "action2"

我还需要object2才能覆盖object1的方法,所以上面的内容无处接近(不包含方法);

以下是我想到的解决方案,我不是在寻找:

object2 =     object2 = function() {
  object1(); //this won't allow me to override object1's methods. THIS IS IMPORTANT!!
  console.log('action2');
}

这是尝试构建和仅使用蓝图(原型):

object1 = function() {};
object1.prototype.action1 = function() {
  console.log('action1');
}

object2 = function() {};

object2.prototype = new object1();
object2.prototype.constructor = object2;

//object2.prototype.action1 = function() { //I can overwrite the inherited action here
//  console.log('actionCHANGED');
//}
object2.prototype.action2 = function() {
  console.log('action2');
}

var foo = new object2(); //new object1(); will do object1's actions instead, as desired.

for (var method in foo) { //run all of foo's methods
foo[method]();
}

但这也不起作用。它通常不按顺序运行功能(原因很明显。)

我尝试了其他一些扩展方法,但从未得到我正在寻找的东西。我现在想不到这个例子,但是其他一种方法使得object2完全符合我的要求,但是object1只有一个原型函数,因此“new object1()”并没有导致任何事情发生。将函数移动到object1的实际函数会导致它在object2从它继承时运行,在这种情况下也不好。

我的整个方法可能需要改变。我对这些想法持开放态度。这个的真实目的是我正在重写我的无组织,程序化风格的youtube插件。我希望能够轻松地调用它并改变它的工作方式。

$('selector').youtubePlayer({type:'basic'}) //like object1
$('selector').youtubePlayer({type:'withThumbs'}) //like object2
$('selector').youtubePlayer({type:'allFeatures'}) //even more complex object

但是jQuery并不是这里的重要细节......它需要在没有它的情况下工作。像:

youtubePlayer(selector, type);

new youtubePlayer(selector, type);

所以......我们有它。请帮助(和原谅)我的无知。我一直在努力学习这一点。谢谢!

编辑: 这正是我正在做的事情。

真实生活示例: object1(或函数1)有2个方法(函数)。 object1的第一个功能是将div附加到选择器。 object1的第二个功能是加载youtube api。当api加载时,youtube播放器将加载到上面的div中。

object2有2个方法。 object2的第一个功能是尽可能从缓存中获取youtube播放列表供稿,否则从youtube获取供稿并将其保存到缓存中。 object2的第二个功能是显示来自提要的缩略图

object3以相同的方式具有更多功能,完全依赖于object2的功能在object3之前运行。

如果我只想要对象1的动作,我想写“object1();”或“new object1();等等。”

4 个答案:

答案 0 :(得分:1)

我不确定,但您是否只想在覆盖的方法中调用object1的{​​{1}}方法?

action1

答案 1 :(得分:0)

我使用了这段代码Inheritance Manager,这对我当前的项目非常有用。

我玩过其他解决方案但似乎没有提供调用基类代码和覆盖方法等的能力。

网站上的代码应该很简单。如果您需要更多示例,请与我们联系。

这是我得到的版本,重命名以符合我项目的风格:

_inheritanceManager = {};
_inheritanceManager.extend = function(subClass, baseClass) 
{
    function inheritance() { }
    inheritance.prototype = baseClass.prototype;
    subClass.prototype = new inheritance();
    subClass.prototype.constructor = subClass;
    subClass.baseConstructor = baseClass;
    subClass.superClass = baseClass.prototype;
}

答案 2 :(得分:0)

您可以简单地使用直接原型继承。

创建一个类定义A:

function A() {}
A.prototype.action = function() {
  console.log('A::action');
}

创建一个继承自A:

的类定义B.
function B() {}
B.prototype = new A();
B.prototype.constructor = B;
B.prototype.action = function() {
  B.prototype.action.call(this);
  console.log('B::action');
}

然后创建适当的实例:

var a = new A();
var b = new B();

a.action(); // A::action
b.action(); // A::action, B::action

当然,您可以使用轻量级继承模型库Fiber.js,而不是https://github.com/linkedin/Fiber,它为您提取所有继承的引导

var A = Fiber.extend(function() {
  return {
    action: function() {
      console.log('A::action');
    }
  }
});

var B = A.extend(function(base) {
  return {
    action: function() {
      base.action.call(this);
      console.log('B::action');
    }
  }
});

var a = new A();
var b = new B();

a.action(); // A::action
b.action(); // A::action, B::action

答案 3 :(得分:0)

已经有一段时间了,我学到了很多关于继承的知识,并熟悉几种模式。我以为我会分享,以防万一。以下是我正在寻找的模式。这是一篇解释它的文章:http://blog.javascriptroom.com/2013/01/21/the-initializer-pattern/

要查看其实际效果,请点击此处:http://jsbin.com/orijaz/2/edit

var foo = {
  run: function() {
    this.action1();
    this.action2();
  },
  action1: function() {
    console.log('action1 '+this.objName);
  },
  action2: function() {
    console.log('action2 '+this.objName);
  },
  objName: 'foo'
};

var bar = Object.create(foo);
bar.run = function() {
  this.first();
  foo.run.call(this);
  this.last();
};
bar.first = function() {
  console.log('first '+this.objName);
};
bar.last = function() {
  console.log('last '+this.objName);
};
bar.objName = 'bar';

foo.run();
bar.run();

旧答案:

var object1 = function() {};
//NEW METHODS
  object1.prototype.action1 = function () { console.log('action1'); };
  object1.prototype.action2 = function () { console.log('action2'); };

  object1.prototype.run = function() {
    this.action1();
    this.action2();
  };

var object2 = function() {};
  //INHERIT
  object2.prototype = new object1();
  //MODIFY METHODS
  object2.prototype.action2 = function() {
    console.log('action2 changed!!'); 
  };
  //NEW METHODS
  object2.prototype.action3 = function () { console.log('action3'); };

  object2.prototype.run = function() {
    object1.prototype.run.call(this);
    this.action3();
  };

object1.prototype.run(); //I do the basic 2 actions
object2.prototype.run(); //I do the basic 2 actions with any changes made, then my own new actions