Can someone please help me understand this code? Seems too convoluted to me.

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};


var PageView = (function (_super) {
    "use strict";

    __extends(MyPageView, _super);

 function MyPageView(rootElement, viewModelParameter, calendarWeeksViewModel) {
});


}

Can someone please help me understand this code? Seems too convoluted to me.

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};


var PageView = (function (_super) {
    "use strict";

    __extends(MyPageView, _super);

 function MyPageView(rootElement, viewModelParameter, calendarWeeksViewModel) {
});


}

• javascript

• Duplicate of Typescript and Google Closure, but that question is kind enough to explain where they got the code from. Further discussion here. You can read up on javascript prototypal inheritance to learn more. – Raymond Chen Commented May 16, 2013 at 19:52
• They got the code from the extends keyword in Typescript generated by tsc command and then unobfuscated. I don't see it as duplicate when work still go on trying understand the generated code and eventually clean it up and make a good answer to the question. The other question is about something else. – user985399 Commented May 25, 2019 at 9:18

2 Answers 2

So basically

__extends(MyPageView, _super);

Think in terms ofinheritance in a Object Oriented language. Where a class is extending a Super class or a base class..

So basically here MyPageView will extend the functionality and implementation of the super class .

So lets say the base View has method A() and method B() and the current View has method C(), then you current view has access to all the three methods A() , B() and C() in it's view.

But lets say MyPageView has method B() , defined in it , then the method inside the view will take precedence over the Method B() of Super View

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};

Every function has a magical prototype property.

 var __extends = this.__extends || function (d, b) {

Cheks if that function is available in that context , if not define a function , that takes 2 arguments , The object that is to be extended and the object from which it is extended..

function __() { this.constructor = d; }

Defining a new function called __ in which that constructor property of the context is bound to object d

 __.prototype = b.prototype;

The prototype property of the Object __ is pointed to the b.prototype chain..

 d.prototype = new __();

The accessing of methods of Super View happens here , where you are setting the prototype property of the Object here..

So when the new instance is created, if the method is not available , then because of the prototype on the object , it will check the methods in the Super view because it is available on the function __ which is tied to object d

I am also confused about this code.
So I try this in the chrome and see what console showed.
without "this.constructor = d;" the constructor is Vector2
with "this.constructor = d;" the constructor is Vector3

var __extends = this.__extends || function (d, b) {
    function __() {
        // mark this and try again
        this.constructor = d;
    }
    __.prototype = b.prototype;
    d.prototype = new __();
};

function Vector2(x, y) {
    this.x = x;
    this.y = y;

}

Vector2.prototype.length2 = function () {
    return Math.sqrt(this.x * this.x + this.y * this.y);
}

__extends(Vector3, Vector2)
function Vector3(x, y, z) {
    Vector2.call(this, x, y);
    this.z = z;
}

Vector3.prototype.length3 = function () {
    return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
}

var v2 = new Vector2(1, 1);
var v3 = new Vector3(1, 2, 3);
console.log(v3.constructor.prototype);

And you can compare with this
finally I know why the original code do that

var __extends = this.__extends || function (d, b) {

    d.prototype = b.prototype;
};

I think the original code is equivalent to...

var __extends = this.__extends || function (d, b) {
    // function __() {
    //     // mark this and try again
    //     console.log(this);
    //     this.constructor = d;
    // }
    // __.prototype = b.prototype;
    // d.prototype = new __();

    d.prototype.__proto__ = b.prototype;
};