I don't know how to deal properly with this case. I have a Javascript object like this:
var myClass = {
init : function(){
$("button").on("click" , this.func1);
},
func1: function(){
// do stuffs
this.func2();
},
func2: function(){
// do stuffs
}
}
myClass.init();
When I initialize my class for binding event there's no problem. In the init function, the value of this is the class itself, so I can call their methods without problem.
Take into account that when a button is clicked, I executed func1. I found the problem inside the function func1 because in this case the value of this is the button that was pressed, so when I try this.func2 I get Uncaught TypeError: this.func2 is not a function.
How I deal with this kind of problem? I'm sure that there is a standar way to solve this problem but I don't know it.
Thanks !!
From your example, this.func1 is actually bound to no context when it is executed. So its this keyword will be either fallbacked to window object on legacy mode or undefined on strict mode. In order to execute this.func1 in myClass context, you can use one of these methods:
Set this to myClass with Function.prototype.bind
$("button").on("click", this.func1.bind(this));
Wrap inside an anonymous function
var self = this;
$("button").on("click", function() {
self.func1();
});
Wrap inside an arrow function
$("button").on("click", () => this.func1());
Related
Newbie to classes in javascript and can't solve this problem. Actually, anothermethod can return a callback to constructor and then I can can call onemethod from there, but maybe there's an easier way?
function sample() {} //constructor
sample.prototype = {
onemethod: function () {},
anothermethod: function () {
onemethod(); //Doesn't work
this.onemethod(); //Still the same
}
}
For it to work, you need to use it correctly. A constructor needs to be call via new.
var s = new sample();
s.anothermethod();
// identical to
sample.anothermethod.apply(s);
This way, this will represent s (and this the outer context, usually window).
I have written two functions in JavaScript code as follows
Manager = FormManager.extend({
First: function () {
var response = this.Second("Feature"); //I'm able to get the alert
//I have added a click event handler
$('#element').on('click', function(){
var newResponse = this.Second("Bug"); //The alert is not poping
});
}
Second: function (type) {
alert(type);
//Performs certain operation
}
});
Error: Uncaught TypeError: Object #<HTMLButtonElement> has no method 'Second'
I also tried without using this keyword like:
Second("Bug") // Error: There is no method
Whereas this a simplified format (in-order to show a simple example) on my program that I'm playing with. I'm struggling to find out the reason.
Can someone direct me to the right path?
You are using incorrect this. try this way. this inside the handler represents #element not the context of the function itself.
var self = this; //cache the context here
$('#element').on('click', function(){
var newResponse = self.Second("Bug"); //Access it with self
});
Also i think you are missing a comma after First function definision and before Second function.
Fiddle
The reason being the callback you give gets invoked from within the context of the element so your this context changes. this context refers to the context from where the callback was invoked. But there are other ways to get around this like using $.proxy while binding your callback with jquery, using EcmaScript5 Function.prototype.bind etc. But ideally you don't want to do that because most of the cases you would need the context of the element there inside the handler.
Every time you use the this context variable in a function you have to consider what its value is.
Specifically that value will be whatever value the caller specified, whether by using myObj.mymethod(...), or mymethod.call(myObj, ...), or mymethod.apply(myObj, [ ... ]).
When your anonymous function $('#element').on('click', ...) is invoked jQuery will set the context to the HTML DOM element - it's no longer referring to your object.
The simplest work around is to obtain a copy of this outside of the callback, and then refer to that copy inside the closure, i.e.:
var that = this;
$('#element').on('click', function() {
// use that instead of this, here
console.log(this); // #element
console.log(that); // your object
});
Another method is using Function.prototype.bind:
$('#element').on('click', (function() {
console.log(this); // your object
}).bind(this));
or with jQuery you can use $.proxy for the same effect, since .bind is an ES5 function.
I actually prefer the var that = this method, since it doesn't break the jQuery convention that this refers to the element associated with the event.
For a particular listener in my application, I'm using the following code for scope-busting purposes:
// this is all in a prototype of MyClass
var self = this;
myElement.addEventListener("stuff", function(e){self.doStuff(e)});
That will get doStuff to have the desired this binding.
The problem shows up when I try to removeEventListener. I suppose it's because the native function signatures must be different?
// in a different prototype of MyClass
var self = this;
myElement.removeEventListener("stuff", function(e){self.doStuff(e)}); // doesn't work
If I make a separate function that contains all of my scope-busting code, then the this binding in that code will be to the unwanted object of myElement. So the question is: How can I force listener scope and still be able to remove an added event listener?
*note using global / static variables in any way is prohibited due to the nature of the project (otherwise this would be simple!)
This has nothing to do with scope or the way in which you're storing a reference to this. The problem is that removeEventListener expects a reference to a function that's previously been registered as a listener, but you're giving it a brand new function it's never seen before.
You need to do something like this:
var self = this;
var listener = function(e){self.doStuff(e)}
myElement.addEventListener("stuff", listener);
// later
myElement.removeEventListener("stuff", listener);
It doesn't matter that the bodies of your two functions are the same; they're still different functions.
See:
https://developer.mozilla.org/en/DOM/element.removeEventListener
Inline anonymous functions are a very bad practice anyway, so I will suggest the obvious:
function MyClass() {
this.onStuff = this.onStuff.bind(this); //Each instance steals the prototyped function and adds a bound version as their ownProperty
}
MyClass.prototype = {
onStuff: function (e) { //Prototyped, no instance actually uses this very function
this.dostuff()
},
bind: function () {
myElement.addEventListener("stuff", this.onStuff);
},
unbind: function () {
myElement.removeEventListener("stuff", this.onStuff);
}
}
see removeEventListener on anonymous functions in JavaScript
You can't removeEventListener as your using an anonymous function.
Consider this:
window.onload = function () {
myObj.init();
};
var myObj = {
init: function () {
console.log("init: Let's call the callMe method...");
//callMe is not defined...
callMe();
//Works fine!
this.callMe();
},
callMe: function () {
console.log('callMe');
}
};
Since the init function gets called this way (myObj.init), I expect this to be myObj in the init function. And if that is the case, why the callMe function fails? How am I supposed to call the callMe function without using the this context in the init body? (Actually, it's too annoying to call the object methods using this over and over again through the functions. So what's the point of having a single object?)
I would like to know how can I fix this so that the callMe method gets called using the first invocation in the code above?
this is never implicit in JavaScript as it is in some other languages. Although there are ways to do it, like this using the with statement:
init: function () {
console.log("init: Let's call the callMe method...");
// Make `this` implicit (SEE BELOW, not recommended)
with (this) {
// Works
callMe();
}
},
...it's generally a bad idea. Douglas Crockford probably wrote one of the better descriptions of why it's a bad idea, which you can find here. Basically, using with makes it nearly impossible to tell what the code's going to do (and slows the code down, if you do anything else in that with statement that doesn't come from the this object).
This isn't the only way that JavaScript's this is not the same as it is in some other languages. In JavaScript, this is defined entirely by how a function is called, not where the function is defined. When you do this.callMe() (or the equivalent this["callMe"](), or of course foo.callMe(), etc.), two things happen: The function reference is retrieved from the property, and the function is called in a special way to set this to be the object that property came from. If you don't call a function through a property that way, the call doesn't set any particular this value and you get the default (which is the global object; window on browsers). It's the act of making the call that sets what this is. I've explored this in depth in a couple of articles on my blog, here and here.
This (no pun) can be made even clearer if you look at JavaScript's call and apply functions, which are available on all function objects. If I do this:
callMe.call({});
...it'll call the callMe function with a blank object ({}) as this.
So basically, just get used to typing this. :-) It's still useful to have properties and methods associated with an object, even without the syntactic convenience (and confusion!) of an implicit this.
You can also use the module pattern, which captures all private variables inside a closure, so you are free to use them without this, as they're in the same scope. You then pick and choose which methods/variables you want to make public:
var myObj = (function () {
var init = function () {
callMe(); // This now works
};
var callMe = function () {
...
};
// Now choose your public methods (they can even be renamed):
return {
init: init, // Same name
callMyName: callMe // Different name
};
}) ();
Now:
myObj.init(); // Works
myObj.callMyName(); // Works
myObj.callMe(); // Error
function FakeClass(){};
FakeClass.prototype.someMethod = function(){};
FakeClass.prototype.otherMethod = function(){
//need to call someMethod() here.
}
I need to call someMethod from otherMethod, but apparently it doesn't work. If i build it as a single function (not prototyped), i can call it, but calling a prototyped does not work. How can i do it as if i was treating the function just like a class method?
Update:
I'm calling the method after a jQuery event is triggered. Does it affect the way the whole thing behaves?
function CicloviarioEngine(){};
CicloviarioEngine.prototype.test = function(){
alert("Hey");
}
CicloviarioEngine.prototype.initialize = function(){
$('#add-route').click(function(){
this.test(); //doesn't work
CicloviarioEngine.test(); //doesn't work
externalTest(); //works
});
}
function externalTest(){
alert("externalTest()");
}
this inside the event handler function is not the same as this in the enclosing initialize function (in fact it will be a reference to the element that has been clicked). The easiest way to deal with this is to save the value of this into a variable, which the event handler will have access to from its enclosing scope:
CicloviarioEngine.prototype.initialize = function() {
var that = this;
$('#add-route').click(function(){
that.test();
});
};
The members of the prototype will be available on the object instance, so you can simply call the method using the this keyword:
FakeClass.prototype.otherMethod = function(){
this.someMethod();
};
Check an example here.