This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 6 years ago.
Hi I'm trying to create an object in jQuery and everything is working fine but somehow I cannot pass some necessary properties beyond the setInterval function bc when I test it it always pops "undefined". Here is the draft code of that I have.
Thanks in advance!!
function MyFunction(var1){
this.var = var1;
this.var2 = 2;
this.pause = 3000;
this.slideOn();
}
MyFunction.prototype.slideOn = function(){
alert(this.var); //alerts the value
setInterval(function(){ //doesnt work and it alerts "undefined"
alert(this.var2),1000,function(){}
},this.pause // works again with no hassle
};
When you use "this" inside some callback function, it uses function scoped "this". So, try setting an "outer this":
function MyFunction(var1){
this.var = var1;
this.var2 = 2;
this.pause = 3000;
this.slideOn();
}
MyFunction.prototype.slideOn = function(){
var _this = this;
alert(_this.var); //alerts the value
setInterval(function(){ //doesnt work and it alerts "undefined"
alert(_this.var2),1000,function(){}; //100 and function are senseless
},_this.pause); // works again with no hassle
};
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:
What does 'var that = this;' mean in JavaScript?
(6 answers)
Closed 3 years ago.
I've seen things like this:
function fnx(){
ctrl = this;
this.thisedVar = "thisedVar from fnx"
}
I'm trying to figure out what is it useful for. if that function is executed and then this is compared to ctrl, they are the same:
fnx();
console.log(this === ctrl) // true
That's why I don't understand what is the purpose of assigning this to a variable.
Can anyone explain it, please? Thanks.
var a = function() {
var THIS = this;
this.s = "Hello World";
this.runMe = function() {
window.setTimeout(function() {
console.log(this.s);
}, 100);
}
}
var a2 = function() {
var THIS = this;
this.s = "Hello World";
this.runMe = function() {
window.setTimeout(function() {
console.log(THIS.s);
}, 100);
}
}
b = new(a);
b.runMe();
b2 = new(a2);
b2.runMe()
Outputs:
undefined
Hello World
Class a (object b) returns undefined because that this is in the scope of the callback.
Class a2 (object b2) returns Hello World because that this belongs to the class a2.
When you assign a variable to a value without using var it refers to global variable. So if you are assigning this to ctrl it means the your are assigning Window obecjt this to a global variable `ctrl.
So when you compare ctrl with this (again Window) object, it is same since you are matching after function execution.
In most cases, the value of this is determined by how a function is called (runtime binding). It can't be set by assignment during execution, and it may be different each time the function is called.
You assign THIS to a variable so you save this value.
Read more: https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c
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 would like to start a setInterval method in javascript every time I instantiate a class (I know, I shouldn't call it class in javascript, ...). The setInterval is calling the class method update every 500 milliseconds. Here is my code:
function Test(a) {
this.a = a;
this.b = 0;
this.interval = setInterval(this.update, 500);
};
Test.prototype.update = function() {
console.log(this.b);
this.b += 1;
if (this.b > 10) clearInterval(this.interval);
};
But when I instantiate the class with var mytest = new Test(1), the class property b seems to be undefined in the first call and NaN subsequently (because adding 1 to undefined gives NaN). Why b is not 0in the first call?
The scope of this changes when setInterval fires. this will be window. To maintain the scope, you can use bind.
setInterval(this.update.bind(this), 500);
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What do parentheses surrounding a JavaScript object/function/class declaration mean?
I have found the following code in a website .
var testModule = (function(){
var counter = 0;
return {
incrementCounter: function() {
return counter++;
},
resetCounter: function() {
console.log('counter value prior to reset:' + counter);
counter = 0;
}
};
})();
So it follows the syntax var a = (blah balh..)()
What does it actually mean? What is the meaning of variable declaration like a =()()..
It's defining a single-use function and executing it immediately. The code you provided is named the Module Pattern -- see here for more information about its properties: http://www.yuiblog.com/blog/2007/06/12/module-pattern/
A normal function might be created like this:
var f1 = function() {
console.log('bar');
};
And you could subsequently call it like so:
f1();
But in the example you provided, the function is both defined and executed once, and that function returns an object with two functions: incrementCounter and resetCounter. You can call them like so: testModule.incrementCounter() and testModule.resetCounter()
The Module Pattern is useful when you have a single object and you want to encapsulate some properties which are only available to the functions defined in the closure.
The anonymous function is executed and the return value is assigned to the variable.