understanding typescript inheritance

Question

My question is inspired from this question

This is typescript inheritance code

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};

and I simplified version to this version

function extend(Destination, Base) {
    function Hook() { this.constructor = Destination; }
    Hook.prototype = Base.prototype;
    var hook = new Hook();
    Destination.prototype = hook;
};

and I draw graphical represantation inspired from here:

Could you confirm or correct ghaphical representation?
I especially did not understand this part:

function Hook() { this.constructor = Destination; }

And could you tell me how inheritance work with arguments and accompanied example

Matthew Layton · Accepted Answer · 2017-01-18 11:35:34Z

1

It it's any help, I've commented each line to illustrate what it does, based on the current __extends function (it's changed slightly from your example)

var extend = function (subType, superType) {

    // Copy superType's own (static) properties to subType
    for (var property in superType) {
        if (superType.hasOwnProperty(property)) {
            subType[p] = superType[p];
        }
    }

    // Create a constructor function and point its constructor at the subType so that when a new ctor() is created, it actually creates a new subType.
    function ctor() {
        this.constructor = subType;
    }

    if(superType === null) {

        // Set the subType's prototype to a blank object.
        subType.prototype = Object.create(superType);

    } else {

        // set the ctor's prototype to the superType's prototype (prototype chaining)
        ctor.prototype = superType.prototype;

        // set the subType's prototype to a new instance of ctor (which has a prototype of the superType, and whos constructor will return a new instance of the subType)
        subType.prototype = new ctor();
    }
};

Note that __extends may change again in the very near future to include the use of Object.setPrototypeOf(...);

GitHub - Change Class Inheritance Code

answered Jan 18, 2017 at 11:35

Matthew Layton

42.8k59 gold badges213 silver badges345 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

asdf_enel_hak Over a year ago

Thanks for answer, you said point its constructor at the subType so that when a new ctor() is created it actually creates a new subType.. This is not clear to me.

asdf_enel_hak Over a year ago

for example, from chrome console: I declare subTypefunction subType(){this.a; alert(this.a);} and ctor function ctor(){ this.constructor = subType}, but when I do new ctor() it does not pop up alert

Matthew Layton Over a year ago

@asdf_enel_hak You also need to chain the prototypes. the constructor alone is not enough

Community · Accepted Answer · 2017-05-23 11:55:16Z

0

When I synthase my question and this answer and @series0ne's answer

Here is what I understand from typescript inheritance:

function ctor() does:

As in the linked answer:

Car.prototype.constructor = Car;

it is equivelant

subType.prototype.constructor = subType

which provides:

subType.constructor === subType  -> true

for

ctor.prototype = superType.prototype;
subType.prototype = new ctor();

it is equivalent

Car.prototype = new Vehicle(true, true);

which ensures

subType.prototype = new superType();

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Jan 19, 2017 at 6:50

asdf_enel_hak

7,6585 gold badges47 silver badges91 bronze badges

Collectives™ on Stack Overflow

understanding typescript inheritance

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related