What exactly does a derived class inherit from its base class?

Question

I currently am learning ES6 classes for Javascript and I seem to understand the concept of them but I don't understand what a derived class inherits from its base class. Is it the methods of the class? Is it safe to assume that the methods of a class are properties of said class? In which case, they are part of the prototype and are thus inherited by objects down the prototype chain. And what about the constructor? Are properties defined inside the constructor inherited?

Thank you for your consideration!

Answer 1

Classes are more or less just syntactic sugar for setting up prototype inheritance.

class Derived extends Base {}

is equivalent to

function Derived(...args) {
  return Base.apply(this, args);
}

Object.setPrototypeOf(Derived, Base);
Object.setPrototypeOf(Derived.prototype, Base.prototype);

There is some "magic" involved with super and in the future with public and private class fields, but the basic relationship between objects is the same.

Is it safe to assume that the methods of a class are properties of said class? In which case, they are part of the prototype and are thus inherited by objects down the prototype chain.

Yes, methods become properties of the corresponding prototype object, from which all instances inherit. Ie

class Foo {
  bar() {}
}

is equivalent to

function Foo() {}
Foo.prototype.bar = function() {}

And since a "base class'" property object is in the prototype chain of the derived class, all its methods are available to instances of the derived class.

Are properties defined inside the constructor inherited?

"Inherited" is the wrong word here. The properties are created on the instance itself since that's how constructors work.

Consider the process to be like this:

// Create new instance
var newInstance = Object.create(Derived.prototype);

// Call base constructor with `this` set to new instance
Base.apply(newInstance);

// Call derived constructor with `this` set to new instance
Derived.apply(newInstance);

If the base constructor contained something like this.base = 42; , then that property would be directly created on the new instance, since this refers to the new instance.

Note: In reality the exact flow is a bit different due to the fact extending built-in classes such as Array need special treatment but the end result is roughly the same.

---

You didn't ask about static methods but these are still part of the inheritance. static methods become properties of the constructor function itself.

class Foo {
  static bar() {}
}

is equivalent to

function Foo() {}
Foo.bar = function() {}

Because the constructor of the base class becomes the prototype of the constructor of the derived class, all properties defined on the base constructor are available to the derived constructor.

---

The developer tools in your browser can actually show you all of this:

 class Base { static staticBase() {} constructor() { this.base = 42; } fromBase() {} } class Derived extends Base { static staticDervied() {} constructor() { super(); // necessary since we extend base this.derived = 21; } fromDerived() {} } console.dir(Derived); console.dir(new Derived());

Answer 2

有很多关于基本 es06 示例的重要资源 - https://exploringjs.com/es6/ch_classes.html#details-of-subclassing