Javascript quick help

JavaScript
1

Hello, I’m having a problem where I can’t acess the variables “this.x” and “this.width” from where I want. I know why just dont know how to solve it… Please help me.

Code:


function SpecialObject() {
	this.x = 0;
	this.y = 0;
	this.width = -1;
	this.height = -1;
	this.src = '';
	this.img = new Image();
	
	this.draw = function() {
		this.img.src = this.src;
		if (this.width == -1) this.width = this.img.nativeWidth;
		if (this.height == -1) this.height = this.img.nativeHeight;
		this.img.width = this.width;
		this.img.height = this.height;
		ctx.drawImage(this.img, this.x, this.y);
	}
	
	this.needBoundaries = function() {
		canvas.addEventListener('mousemove', function(e) {	
			if (mouseX > this.x && mouseX < this.x + this.width) {
				console.log("asd");
			}
		}, false);		
	}
	
}

SpecialObject.prototype.setWidth = function(w) {
    this.width = w;
};
2

What you’ve done seems right so far. Now all you have to do is to create specialObject from the SpecialObject constructor, and it’s from specialObject that the this keyword will apply.

3

Sorry if I wasn’t clear, I’ve done that already the problem is, when I add in this code:

		console.log(this.x + " - " + this.width);

Like this:

function SpecialObject() {
this.x = 0;
this.y = 0;
this.width = -1;
this.height = -1;
this.src = ‘’;
this.img = new Image();

this.draw = function() {
	this.img.src = this.src;
	if (this.width == -1) this.width = this.img.nativeWidth;
	if (this.height == -1) this.height = this.img.nativeHeight;
	this.img.width = this.width;
	this.img.height = this.height;
	ctx.drawImage(this.img, this.x, this.y);
}

this.needBoundaries = function() {
	canvas.addEventListener('mousemove', function(e) {	
		if (mouseX &gt; this.x && mouseX &lt; this.x + this.width) {
			console.log("asd");
		}
		console.log(this.x + " - " + this.width);
	}, false);		
}

}

SpecialObject.prototype.setWidth = function(w) {
this.width = w;
};

the output is:

undefined - 1280

and if I do this:

this.needBoundaries = function() {
	canvas.addEventListener('mousemove', function(e) {	
		if (mouseX &gt; this.x && mouseX &lt; this.x + this.width) {
			console.log("asd");
		}
		console.log(this.x + " - " + this.width);
	}, false);		
	console.log(this.x + " - " + this.width);
}

ouput:

0 - -1
undefined - 1280

Which means something is not right with the x variable.

4

You’re not replying to Paul’s response but are reposting your question? What on earth makes you do that? Also, I’m wondering why you are so proficient in writing Javascripts but do not know the principles of the use of this? If this is a homework assignment at which you just copied and pasted the script that you were supposed to analyze, be honest about it and tell us.

5

Paul’s didn’t make a question… though I’m just saying that I’ve done what he sad but I forgot to say it on the first post.
To awnser your question… I’m being totally honest, if I’m proficient its because I’m used to program Java. If I don’t know the principles of the use of “this” is because this is my first attempt on making a project in javascript and I don’t have javascript lessons… so I’m a totally newbie trying to learn…

6

I won’t go in to why Java is not JavaScript here, but it can be an interesting discussion to have at some other time.

The reason why the this keyword is not retrieving the x property, is because the canvas doesn’t have that property on it.
Why the canvas? Because that is the context under which the function is being run.


canvas.addEventListener('mousemove', function(e) {

If you want to refer to the specialObject object, it can help to cache a reference to it so that you can then refer to it later on.


this.needBoundaries = function () {
    var objRef = this; // local reference to specialObject
    canvas.addEventListener('mousemove', function (e) {
        ...
        // use objRef.x in here to gain access to its x property
7

Thank you for your answer, I had that idea about the problem being the context that it was in but I would never remember of making a var with the this so thank you very much for that, though there is another problem which I’m not being able to understand.

I added that reference as you proposed like this:

this.needBoundaries = function() {
var objRef = this;
canvas.addEventListener(‘mousemove’, function(e) {
if (mouseX > objRef.x && mouseX < objRef.x + objRef.width) {
console.log(“asd”);
}
console.log(objRef.x + " - " + objRef.width);
}, false);
console.log(objRef.x + " - " + objRef.width);
}

And, on another place I added a call to the setWidth once the mouse was down.

What happens now it that the width is undefined until I click on the mouse… Output:

0 - -1
0 - undefined
0 - 100

First line is written by the last console.log(objRef.x + " - " + objRef.width);
Second Line is written by the first console.log before the mouse clicking and finally, third line is written by the same first console.log after the mouse is down…

8

Its solved…

The error were this two lines of code:

if (this.width == -1) this.width = this.img.nativeWidth;
if (this.height == -1) this.height = this.img.nativeHeight;

it should be:

if (this.width == -1) this.width = this.img.naturalWidth;
if (this.height == -1) this.height = this.img.naturalHeight;

Thank you very much for the quick help that you provided! See you soon