Virtual function in Javascript

2019-04-24 20:03发布

问题:

I am asking how to implement the virtual function in the javascript like C#, let's say

  • I have a base class A
  • I also have a derived class named B
  • The class A has a function named virtualFunction, this is supposed to be a virtual function like in C#, this can be overridden in the derived class B
  • The function will be called to execute inside the constructor of the base class, A. If the function is overridden in B, B's one will be invoked otherwise A's one will be invoked

With this example below, I want to get a 'B' alert, not the 'A'.

function A() {
  this.virtualFunction();
}

A.prototype.virtualFunction = function() {
  alert('A');
};

//-------------------------------------

function B() {}

B.prototype = new A();
B.prototype.virtualFunction = function() {
  alert('B');
};

var b = new B();

If we invoke the function after instanced, like this, then it is okay, but I need "inside the constructor"

var b = new B();
b.virtualFunction();

回答1:

So, the first thing to realize is that JavaScript doesn't use the same semantics as C#. Trying to get it to do so will cause you heartache; you're much better off learning how things are done in JS. In fact, most folks don't try to do a lot of inheritance type stuff in JS, but instead favor composition (which is actually a best practice in all OO languages I'm familiar with).

That said, there's a few improvements you could make to your code.

function A() {
  this.virtualFunction();
}

A.prototype.virtualFunction = function() {
  alert('A');
};

//-------------------------------------

function B() {
   A.call(this);
}

B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
B.prototype.virtualFunction = function() {
  alert('B');
};

var b = new B();