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));
Related
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
How to access the correct `this` inside a callback
(13 answers)
Closed 1 year ago.
let obj = {
one: function(){
this.two();
},
two: function(){
console.log("two");
}
}
let oneFunc = obj.one;
obj.one(); // two
oneFunc(); // TypeError: this.two is not a function
I have been programming in JavaScript for quite some time. I thought I had a really solid grasp on the this keyword. However, I ran in to this today and it blew my mind. I can't figure out why this is happening. When I call oneFunc(), this refers to the global object. Why does this happen?
this refere to the object, and what you are doing here is creating a function equal to the methode of the object and so you lose the reference to the object.
You can use bind
let obj = {
one: function(){
this.two();
},
two: function(){
console.log("two");
}
}
let oneFunc = obj.one;
oneFunc = oneFunc.bind(obj);
obj.one(); // two
oneFunc(); // TypeError: this.two is not a function
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 6 years ago.
I have a function like so in my class
showMessageSuccess(){
var that = this;
this.messageSuccess = true;
setTimeout(function(){
that.messageSuccess = false;
},3000);
}
How can I re-write this so I don't have to store a reference to 'this' in the 'that' var? If I use 'this' inside the setTimeout, the messageSuccess bool doesn't seem to change/get updated.
You need to use Arrow function ()=> ES6 feature to preserve this context within setTimeout.
// var that = this; // no need of this line
this.messageSuccess = true;
setTimeout(()=>{ // <<<---using ()=> syntax
this.messageSuccess = false;
}, 3000);
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
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();
});
}
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 8 years ago.
Here is my situation.
function Bird() {
this._canFly = true;
this._legs = 2;
this._flying = false;
}
Bird.prototype = {
Fly: function() {
if ( this.canFly ) {
layer.on('fly', function() {
this.setStrokeWidth(4); //this refers to layer(kinetic.js) object
this._flying = true; //this refers to Bird object
});
}//end if
} //end function
);
Here I need to access both layer object and bird object inside the callback function.
Can somebody tell me how to handle the above situation ?
var self = this
Cache a reference to this to refer to it when it changes context.