I have a function which adds some variables in this, for example:
this.a = "hello";
this.b = "bye";
The this of this function is an image,
$('#image').function1();
Now I want to access these variables in another function. I am calling this function the same way:
$('#image').function2();
but when I try to access this.a and this.b, undefined is thrown.
How can I access these variables from function2?
You can use $.fn.functionName to extend prototype with new method that will add new properties in your case a and b to object that you call this method on, and then in another method you can access those properties.
$ or jQuery is a constructor function and fn is same as prototype
$.fn.function1 = function() {
this.a = 'hello';
this.b = 'bye';
return this;
}
$.fn.function2 = function() {
console.log(this.a)
}
$('img').function1().function2()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" alt="">If I understand it correctly you basically just want to pass variables from one function to another. I'd use one of those approaches.
1st.
var _this = {};
var function1 = function(){
[YOUR CODE];
_this.a = 'hello';
_this.b = 'bye';
}
var function2 = function(){
[dosomething with _this.a and _this.b]
Another way would be to call the function2 from the first one which I would prefer.
var function2 = function(a,b){
[doSomethingWithThoseValues]
};
var function1 = function(){
var a = 'hello';
var b = 'bye';
function2(a,b);
}
Hope I understood correctly what you wanted to meant. If not, just leave a comment
Greetings Chris
Here's a pure JavaScript solution:
function function1() {
this.a = 'hello 2u';
this.b = 'goodbye';
return [this.a,this.b];
}
function function2(obj){
this.a = obj.function1()[0];
this.b = obj.function1()[1];
console.log(this.a + " " + this.b);
}
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
image1.function1 = function1;
image2.function2 = function2;
image2.function2( image1 );
See demo
Given the officially accepted answer, surely this pure-JavaScript example can be improved, as follows:
HTML:
<img src="" id="image"><br>
JAVASCRIPT:
var image = document.getElementById("image");
image.function1 = function() {
this.a = "hello 2 the world";
this.b = "goodbye";
return this;
};
image.function2 = function() {
console.log(this.a + " " + this.b);
};
image.function1().function2();
See demo
By returning this, the methods may be chained together and the properties a and b are available to the second method. If you wish to avoid method chaining, the second method could invoke the first method, as follows:
image.function2 = function() {
this.image.function1();
console.log(this.image.a + " " + this.image.b);
}();
See demo
thisonly exists in the context of the function where it's run. After that it's destroyed. Since you're using jQuery, try using data-properties on the element instead, as these will persist for the lifetime of the page.$("#image1").data("a", "hello");to set it, andalert($("#image1").data("a"));to retrieve it.$('#image') !== $('#image')