CODEWITHSUNDEEP
javascript
Nisha Shukla
Nisha Shukla

Reputation: 159

Extends in javascript

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) {
});


}

Upvotes: 15

Views: 5650

Answers (2)

Xiangwei Chiou
Xiangwei Chiou

Reputation: 1

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;
};

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

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

Upvotes: 15

Related Questions