Develop Reference

Passing method with class as a callback method to request animation frame [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 3 years ago.
I'm working on an animation class:
class Animation{
constructor(id){
let canvas = document.getElementById(id);
this.frames = [];
this.step = 0;
this.ctx = canvas.getContext('2d');
this.img = new Image();
Object.assign(canvas, bound);
this.img.src = "vessle.svg";
}
run() {
log('run')
log(this)
let frame = this.frames[this.step];
this.ctx.globalCompositeOperation = 'destination-over';
// clear canvas
this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
//draw images
frame.forEach((pos)=>{
this.drawImage( pos)
})
window.requestAnimationFrame(this.run);
}
drawImage(pos){
//render stuff
}
}
When I pass this.run in requestAnimationFrame, it seems like the rest of the values from "this" are not included in the new context. For example this.frames is not defined when I run it the second time around.

When you passing the this.run in function parameter, it is just passing a callback function but not with this reference.
In this scenario you have to bind the reference of this
window.requestAnimationFrame(this.run.bind(this))
If you don't bind with this then inside the callback, this refers to that callback function (run()), not the Animation class.
For more see this reference how to bind the this reference.

Javascript - referring to the instantiated object [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 7 years ago.
Let's say I have a javascript function as follows:
car.prototype = {
this.stolen = "",
initialize: function(){
this.stolen = false;
},
steal: function(){
Event.observe(window, "resize", function(){
this.stolen = true;
});
}
}
In the steal method, how can I refer to the stolen property of the car object within the Event.observe() method? In the code above, this in the Event.observe() method is referring to the window instead of the car object.

You bind the function:
Event.observe(window, "resize", (function(){
this.stolen = true;
}).bind(this));

How to make this refer to the constructor [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 7 years ago.
I have the following code
function perso (image_mere, emplacement_x, emplacement_y, x, y, direction) {
this.source = image_mere;
this.sprite = createElement('div');
// some other properties
this.sprite.addEventListener('click', function() {
dindong = this;
(function(dindong) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
alert(dingdong.image_mere)
})(dindong);
}, true);
};
As you can see, the keyword this refers to the sprite, howerver i want to refer to the object so i can get the properties :/
Thank you

You can use bind:
}.bind(this), true); //this is last line of your listener

Calling this.function inside of jquery context [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 8 years ago.
I am trying to call a function via this reference inside of jquery scope:
var Person = function(){
this.hello = function(){
console.log("hello!");
}
this.jump = function(){
$('.jump').on('click', function(){
this.hello();
});
}
}
Then I do:
var p = new Person();
When I click over the .jump element, the console prints an error describing that hello is not a function. I am not sure what is happening here, I am assumming that this is trying to call a function inside of jquery (not sure about it).
So, googling a little bit I found the Jquery.proxy() function that could be helpfull in my situation, but every time I try to understand it my head want to explote.

Use $.proxy() like so:
var Person = function(){
this.hello = function(){
console.log("hello!");
}
this.jump = function(){
$('.jump').on(
'click',
$.proxy(
function() {
this.hello();
},
this
)
);
}
}
Passing this as the 2nd argument to $.proxy() sends that context as the value of this inside the function defined in the first argument.

Try this,
var self = this;
this.jump = function(){
$('.jump').on('click', function(){
self.hello();
});
}

when you refer to "this" inside onclick, by default this refers to the DOM element found in the value of event.target
$('.jump').on('click', function(event) {
this.hello() /// <<-- this == event.target =~ $('.jump')
}
so, fortunately, you can use a closure
var self = this;
this.jump = function(){
$('.jump').on('click', function(){
self.hello();
});
}

Extend onclick function to javascript class [duplicate]

This question already has answers here:
Class methods as event handlers in JavaScript?
(5 answers)
Closed 9 years ago.
I'd like to include an onclick event in a JavaScript class, but since onclick is a function inside of the class the this variable won't work properly.
How can I modify/output the this variable from the onclick function?
img = new image();
function image() {
this.width = 400;
this.height = 600;
document.getElementById('button').onclick = function()
{
alert(this.width); // alerts undefined
};
}
See JSfiddle here: http://jsfiddle.net/ZghRv/

You can use bind() to create a new function that will have this set to the object you pass to bind().
img = new image();
function image() {
this.width = 400;
this.height = 600;
document.getElementById('button').onclick = (function()
{
alert(this.width); // alerts undefined
}).bind(this); // <--- Add bind() here to pick the value of 'this' inside onclick
}
Check out JavaScript Function bind for more info and interactive examples.

You can also give reference to the outer this
Updated Fiddle:
http://jsfiddle.net/ZghRv/3/