当对象是其他对象的属性时,Javascript 对象继承?



我想我开始掌握从另一个对象创建对象时继承的概念,但是当一个对象是另一个对象的属性时,我就不理解它了。我的所有代码都使用多维数组和对象的组合工作,但不是真正的 OOP 格式。现在,在尝试将其全部转换为 OOP 格式时,我遇到了一些问题。

在下面的代码示例中:

  1. 是否可以引用包含tabmethod_1tab的"父"的display.index

  2. 如果display有方法,是否可以从tab方法中调用它们,如果是,如何调用?

我认为我真正想要的是一种设置,其中对象中的对象继承自"父"对象,即使它们不是从父对象创建的。这可能吗,如果是,它叫什么?我可以通过使用数组或对象作为关联数组(例如 view[0].index)来完成相同的工作,但似乎真正的 OOP 格式不需要它。

我意识到我可以display.index传递给tab构造函数,使其成为tab的属性,并将tab方法设置为定义的display方法,或者可以从display创建tab;但重点是尝试减少display上的方法数量,并按它们应用的"sub"对象对它们进行分组。

实现此目的的正确方法是什么?

谢谢。

function tab( id )
{
this.id = id;
}
function display( i )
{
this.index = i;
this.tab = new tab(1);
}

tab.prototype.method_1 = function()
{
// Can the display.index that contain tab be referenced here?
// That is, apart from using view[0].index.
};
var view = [ new display( 0 ) ];

我试图让每个tab实例继承display的属性和方法,然后将tab属性和方法作为自己的属性。下面的代码在该view.tab继承了display的属性和方法,并将tab构造函数属性作为自己的属性,但没有获得构造函数的method_1。我可以在那之后添加方法,但有很多方法,必须为每个tab实例完成。我还没有找到像 Object.assign 对属性所做的那样添加构造函数的完整结果的方法。

OOP 格式很有趣,但在这一点上,我无法判断它是否比使用多维索引更有效。我不是通过对 display[ i ].tab[ j ] 或仅显示 [ i ][ j ] 的变量进行操作来让一个函数对显示中的所有选项卡执行相同的操作,而是最终为每个选项卡实例使用单独的方法,这些方法更直接,因为没有逻辑语句测试基于索引 j 的选项卡差异,但是当需要搜索所有原型时,它真的更快吗?

display继承开始选项卡是否比在每个tab实例中存储对displaythis的引用更好?我不知道通过存储对displaythis的引用来请求属性是否比拥有更高的原型并向上搜索较低的tab原型更快或更慢,直到找到继承的属性。

一个优点似乎是,如果我能正确设置它以使选项卡从显示示例中继承方法,以便可以调用它们,view.tab.display_method_i.call( view.tab )是所有变量都是view_tabthis的一部分,不再需要选项卡索引。

function tab( id ) { this.id = id; }
function display( i ) { this.index = i; }

tab.prototype.method_1 = function() { };
var view = new display( 0 );
view.tab = Object.create( view );
view.tab = Object.assign( view.tab, new tab( 1 ) );

包含选项卡的 display.index 可以在这里引用吗?

否 - 为了说明,想象一下如果实例也是另一个对象的属性:

const obj = {};
function display(i) {
this.index = i;
this.tab = new tab(1);
obj.tab = this.tab;
}

这有点做作,但它仍然显示了问题 -tab实例如何知道它是从display还是从obj调用method_1?不能。

如果需要执行此类操作,则应以某种方式将有关父级的信息传递到选项卡实例:

function tab(id, parentDisplay) {
this.id = id;
this.parentDisplay = parentDisplay;
}
function display(i) {
this.index = i;
this.tab = new tab(i, this);
}
tab.prototype.method_1 = function() {
console.log(this.parentDisplay.index);
};
var view = new display(0);
view.tab.method_1();

最新更新