CODEWITHSUNDEEP
javascript
mishke
mishke

Reputation: 184

'this' in call function when it is used in subclass with superclass

I have some trouble of understanding the word 'this' in call function when it is used in subclass with super class like this: 

function Rectangle(w, h) {
    this.width = w;
    this.height = h;
}

Rectangle.prototype.area = function() { return this.width * this.height; }

function PositionedRectangle(x, y, w, h) {
    Rectangle.call(this, w, h);
    this.x = x;
    this.y = y;
}

PositionedRectangle.prototype = new Rectangle();

delete PositionedRectangle.prototype.width;
delete PositionedRectangle.prototype.height;

PositionedRectangle.prototype.constructor = PositionedRectangle;

PositionedRectangle.prototype.contains = function(x, y) {
    return (x > this.x && x < this.x + this.width && 
            y > this.y && this.y + this.height);
}

var r = new PositionedRectangle(2, 2, 2, 2); 

document.write(r.contains(3, 3)); // 4
document.write("<br>" + r.area()); // 4

document.write("<br>" + r.x + ", " + r.y + ", " + r.width + ", " + r.height + "<br>"); // 2, 2, 2, 2

document.write(r instanceof PositionedRectangle && r instanceof Rectangle && r instanceof Object); // true

Now this part I don't understand:

Rectangle.call(this, w, h);

in PositionedRectangle class. What 'this' stands for? With what can I replace it so the code can work normally? I thought first 'this' is same as Rectangle and I tried to replace it with name Rectangle but it didn't work. Than I thought it's a PositionedRectangle subclass I tried to replaace it with PositionedRectangle.

I read that 'this' meaning depends on how it is called and I know the first argument in call function represents an object, but when the value of that object is 'this' I don't understand what that actually represents.

And I am still new in JavaScript as you can see.

I appreciate your help.

Upvotes: 1

Views: 117

Answers (1)

Amin Jafari
Amin Jafari

Reputation: 7207

call is javascript function which calls or simply runs a function with the given context and arguments.

Q: in PositionedRectangle class. What 'this' stands for?

A: it stands for the constructor of the function PositionedRectangle.

Q: With what can I replace it so the code can work normally?

A: it is fairly confusing what you're trying to achieve as it seems just some unstructured function to me!

Q: I thought first 'this' is same as Rectangle...

A: there is no subclass/superclass in javascript, this in the line Rectangle.call(this, w, h); refers to the context of PositionedRectangle you can read more about context and this here.

Q: ...but when the value of that object is 'this' I don't understand what that actually represents.

A: let me give you an example to make it easier for you to comprehend. Imagine and I repeat just Imagine you have two functions a and b. a's context refers to c and b's context refers to d

function a(){
    this; //refers to c
}
function b(){
    this; //refers to d
}

now if you call b in the a function with a's context like this:

function a(){
    b.call(this); //remember this refers to c in a function
}

you're changing the context of b from d to c, so if you return the context of b:

function b(){
    return this;
}

and get back to the whole picture again, you'll see the difference:

function a(){
    this; //refers to c
    this.bContext=b.call(this);
}
function b(){
    return this; //refers to d
}

b(); //returns d
a.bContext; //returns c

I know it's a bit confusing at first, but you'll get it over time so don't push it too hard.

Upvotes: 1

Related Questions