如何在JavaScript中正确子类化子类？

问题描述

我认为我对如何在JavaScript中正确扩展类有了很好的理解，但是在扩展子类时，当我覆盖一个方法时，我会遇到无限循环，并从子类调用父方法。我做错了，或者你不应该在JavaScript中以这种方式继承。

I thought I had a good understanding on how to properly extend classes in JavaScript, but when extending a subclass I run into an endless loop when I override a method, and the call the parent method from the child class. I'm either doing it wrong, or you just shouldn't subclass this way in JavaScript.

有人可以帮助教育我吗？

Can anybody help educate me please?

var Grand = function() {
	this.test();
};

Grand.prototype.constructor = Grand;

Grand.prototype.test = function() {
	console.log( "Grand!")
};



var Parent = function() {
  this.supr.constructor.call( this );
};

Parent.prototype = Object.create( Grand.prototype );
Parent.prototype.constructor = Parent;
Parent.prototype.supr = Grand.prototype;

Parent.prototype.test = function() {
	this.supr.test.call( this );
  console.log( "Parent!" );
};



var Child = function() {
  this.supr.constructor.call( this );
};

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

Child.prototype.test = function() {
	this.supr.test.call( this );
  console.log( "Child!" );
};



var g = new Grand(); // Outputs "Grand!"
var p = new Parent(); // Outputs "Grand!" "Parent!"
var c = new Child(); // Error: Endless Loop!

我希望控制台能够记录Grand！，Parent！，Child！当实例化一个新的Child（），但我得到一个无限循环。

I would expect the console to log "Grand!", "Parent!", "Child!" when instantiated a new Child(), but instead I get an endless loop.

我来自ActionScript背景，所以在JavaScript中创建类仍然会让我有些曲线球。感谢您的帮助！

I'm coming from an ActionScript background, so creating classes in JavaScript still throws me some curve balls. Thanks for the help in advance!

推荐答案

问题在于这段代码：

var Parent = function() {
  this.supr.constructor.call( this );
};

考虑执行此代码时会发生什么：

Consider what happens when this code executes:

var c = new Child();

这里此是变量 c ，所以 this.supr.constructor 将始终是父代的构造函数，作为这些代码行中的设置：

Here this is the variable c, so this.supr.constructor will always be the parent's constructor as setup in these lines of code:

Child.prototype.supr = Parent.prototype;  // i.e. this.supr = Parent.prototype
Parent.prototype.constructor = Parent;  // i.e. this.supr.constructor = Parent

因此，当Child的构造函数调用 this.supr.constructor.call（this）; 它执行 Parent 函数，父函数再次执行 this.supr.constructor.call（this）; 导致再次调用 Parent 函数，导致无限循环。

So, when the Child's constructor invokes this.supr.constructor.call( this ); it executes the Parent function, and the parent function again executes this.supr.constructor.call( this ); resulting the Parent function being invoked again, causing the endless loop.

修复方法是调用基类函数，如下所示：

A fix is to invoke base class functions as follows:

var Child = function() {
  Child.prototype.supr.constructor.call( this );
};

这篇关于如何在JavaScript中正确子类化子类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！