I am trying to reference this.foo in an object I created, however this is referencing the HTML element that triggered the function. Is there any way that I can preserve the references to this in an object when it is called via an event?
Here is an example of what is going on:
$('document').on('click','button',object.action);
var object = {
foo : null,
action : function(){
this.foo = "something";
}
};
The error I would receive is
Uncaught TypeError: Object #<HTMLInputElement> has no variable 'var'
If you want to preserve this, you should probably attach your event like that:
$('document').on('click','button',function() { object.action() });
Also, if you use this object as it is presented in the question, you may as well use object instead of this:
var object = {
foo : null,
action : function(){
object.foo = "something";
}
};
Also you might want to familiarize yourself with the Bind, Call, and Apply - jQuery uses these behind the scenes to replace your this with HTML Element;
Also, var is a reserved keyword and you should not use it for a property name; if you really want to do that, use a string "var" and access it via [] notation like this:
var a = {"var": 1}
a['var']
var ist reserved word in JavaScript.
This works fine:
$(document).ready(function(){
var myObj = {
myVal: null,
action:function(){
this.myVal = "something";
}
};
myObj.action();
console.log(myObj.myVal);
});
Here link to JS Bin
I hope i could help.
Change this.var to object.var
The problem that this refers to context of where it was called from.
You call object.action from click event on button, so this is #<HTMLInputElement> here.
And, as it was already said, don't use reserved words like var as variable names
You can pass object as the this value using .apply():
$('document').on('click','button',function(){object.action.apply(object); });
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
Your this should be referencing object but it is not most likely because of the use of var which is a reserved word in JavaScript.
Related
I have another question again. I'm currently working with objects and I'm now in very big problem :D. How can I get object variable with "this" property in object function called by setTimeout() function?
HTML:
variable value: <span class="log"></span>
JavaScript:
var logEl = document.getElementsByClassName("log")[0];
var Object = function()
{
this.variable = "abc";
setTimeout(this.callVar,1000);
}
Object.prototype.callVar = function()
{
logEl.innerHTML = this.variable;
}
var obj = new Object();
I want to get variable value: abc, but I still get undefined. How to fix it? setTimeout() must be in code.
Also, I don't want to replace this. with obj., just another solution like parentObj.this....any help will be great!
Fiddle
When setTimeout calls a function, it calls it in the context of the "global" object (window). In JavaScript, this is set based on how the function is called.
JavaScript has .bind() to fix this problem. Try this:
var Object = function()
{
this.variable = "abc";
setTimeout(this.callVar.bind(this), 1000);
}
This will make sure that when setTimeout runs your function, it'll be called in the right "context".
P.S. Don't name a variable Object. JavaScript has a built-in Object and replacing that may have unexpected consequences.
Let's say I instantiate an object in Javascript like this:
var myObj = new someObject();
Now, is it possible to obtain the var object's name as string 'myObj' from within one of the class methods?
Additional details (edited):
The reason why I would like to get the name of the variable holding reference to the object is that my new myObj would create a new clickable DIV on the page that would need to call a function myObj.someFunction(). As I insert the new DIV I need to know the name of the variable holding reference to the object. Is there maybe a better way of doing this?
You are right, sorry for the mixup in terminology.
The reason why I would like to get the name of the variable holding reference to the object is that my new myObj would create a new clickable DIV on the page that would need to call a function myObj.someFunction(). As I insert the new DIV I need to know the name of the variable holding reference to the object. Is there maybe a better way of doing this?
Shog9 is right that this doesn't make all that much sense to ask, since an object could be referred to by multiple variables. If you don't really care about that, and all you want is to find the name of one of the global variables that refers to that object, you could do the following hack:
function myClass() {
this.myName = function () {
// search through the global object for a name that resolves to this object
for (var name in this.global)
if (this.global[name] == this)
return name
}
}
// store the global object, which can be referred to as this at the top level, in a
// property on our prototype, so we can refer to it in our object's methods
myClass.prototype.global = this
// create a global variable referring to an object
var myVar = new myClass()
myVar.myName() // returns "myVar"
Note that this is an ugly hack, and should not be used in production code. If there is more than one variable referring to an object, you can't tell which one you'll get. It will only search the global variables, so it won't work if a variable is local to a function. In general, if you need to name something, you should pass the name in to the constructor when you create it.
edit: To respond to your clarification, if you need to be able to refer to something from an event handler, you shouldn't be referring to it by name, but instead add a function that refers to the object directly. Here's a quick example that I whipped up that shows something similar, I think, to what you're trying to do:
function myConstructor () {
this.count = 0
this.clickme = function () {
this.count += 1
alert(this.count)
}
var newDiv = document.createElement("div")
var contents = document.createTextNode("Click me!")
// This is the crucial part. We don't construct an onclick handler by creating a
// string, but instead we pass in a function that does what we want. In order to
// refer to the object, we can't use this directly (since that will refer to the
// div when running event handler), but we create an anonymous function with an
// argument and pass this in as that argument.
newDiv.onclick = (function (obj) {
return function () {
obj.clickme()
}
})(this)
newDiv.appendChild(contents)
document.getElementById("frobnozzle").appendChild(newDiv)
}
window.onload = function () {
var myVar = new myConstructor()
}
Short answer: No. myObj isn't the name of the object, it's the name of a variable holding a reference to the object - you could have any number of other variables holding a reference to the same object.
Now, if it's your program, then you make the rules: if you want to say that any given object will only be referenced by one variable, ever, and diligently enforce that in your code, then just set a property on the object with the name of the variable.
That said, i doubt what you're asking for is actually what you really want. Maybe describe your problem in a bit more detail...?
Pedantry: JavaScript doesn't have classes. someObject is a constructor function. Given a reference to an object, you can obtain a reference to the function that created it using the constructor property.
In response to the additional details you've provided:
The answer you're looking for can be found here: JavaScript Callback Scope (and in response to numerous other questions on SO - it's a common point of confusion for those new to JS). You just need to wrap the call to the object member in a closure that preserves access to the context object.
You can do it converting by the constructor to a string using .toString() :
function getObjectClass(obj){
if (typeof obj != "object" || obj === null) return false;
else return /(\w+)\(/.exec(obj.constructor.toString())[1];}
You might be able to achieve your goal by using it in a function, and then examining the function's source with toString():
var whatsMyName;
// Just do something with the whatsMyName variable, no matter what
function func() {var v = whatsMyName;}
// Now that we're using whatsMyName in a function, we could get the source code of the function as a string:
var source = func.toString();
// Then extract the variable name from the function source:
var result = /var v = (.[^;]*)/.exec(source);
alert(result[1]); // Should alert 'whatsMyName';
If you don't want to use a function constructor like in Brian's answer you can use Object.create() instead:-
var myVar = {
count: 0
}
myVar.init = function(n) {
this.count = n
this.newDiv()
}
myVar.newDiv = function() {
var newDiv = document.createElement("div")
var contents = document.createTextNode("Click me!")
var func = myVar.func(this)
newDiv.addEventListener ?
newDiv.addEventListener('click', func, false) :
newDiv.attachEvent('onclick', func)
newDiv.appendChild(contents)
document.getElementsByTagName("body")[0].appendChild(newDiv)
}
myVar.func = function (thys) {
return function() {
thys.clickme()
}
}
myVar.clickme = function () {
this.count += 1
alert(this.count)
}
myVar.init(2)
var myVar1 = Object.create(myVar)
myVar1.init(55)
var myVar2 = Object.create(myVar)
myVar2.init(150)
// etc
Strangely, I couldn't get the above to work using newDiv.onClick, but it works with newDiv.addEventListener / newDiv.attachEvent.
Since Object.create is newish, include the following code from Douglas Crockford for older browsers, including IE8.
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o
return new F()
}
}
As a more elementary situation it would be nice IF this had a property that could reference it's referring variable (heads or tails) but unfortunately it only references the instantiation of the new coinSide object.
javascript: /* it would be nice but ... a solution NOT! */
function coinSide(){this.ref=this};
/* can .ref be set so as to identify it's referring variable? (heads or tails) */
heads = new coinSide();
tails = new coinSide();
toss = Math.random()<0.5 ? heads : tails;
alert(toss.ref);
alert(["FF's Gecko engine shows:\n\ntoss.toSource() is ", toss.toSource()])
which always displays
[object Object]
and Firefox's Gecko engine shows:
toss.toSource() is ,#1={ref:#1#}
Of course, in this example, to resolve #1, and hence toss, it's simple enough to test toss==heads and toss==tails. This question, which is really asking if javascript has a call-by-name mechanism, motivates consideration of the counterpart, is there a call-by-value mechanism to determine the ACTUAL value of a variable? The example demonstrates that the "values" of both heads and tails are identical, yet alert(heads==tails) is false.
The self-reference can be coerced as follows:
(avoiding the object space hunt and possible ambiguities as noted in the How to get class object's name as a string in Javascript? solution)
javascript:
function assign(n,v){ eval( n +"="+ v ); eval( n +".ref='"+ n +"'" ) }
function coinSide(){};
assign("heads", "new coinSide()");
assign("tails", "new coinSide()");
toss = Math.random()<0.5 ? heads : tails;
alert(toss.ref);
to display heads or tails.
It is perhaps an anathema to the essence of Javascript's language design, as an interpreted prototyping functional language, to have such capabilities as primitives.
A final consideration:
javascript:
item=new Object(); refName="item"; deferAgain="refName";
alert([deferAgain,eval(deferAgain),eval(eval(deferAgain))].join('\n'));
so, as stipulated ...
javascript:
function bindDIV(objName){
return eval( objName +'=new someObject("'+objName+'")' )
};
function someObject(objName){
this.div="\n<DIV onclick='window.opener."+ /* window.opener - hiccup!! */
objName+
".someFunction()'>clickable DIV</DIV>\n";
this.someFunction=function(){alert(['my variable object name is ',objName])}
};
with(window.open('','test').document){ /* see above hiccup */
write('<html>'+
bindDIV('DIVobj1').div+
bindDIV('DIV2').div+
(alias=bindDIV('multiply')).div+
'an aliased DIV clone'+multiply.div+
'</html>');
close();
};
void (0);
Is there a better way ... ?
"better" as in easier? Easier to program? Easier to understand? Easier as in faster execution? Or is it as in "... and now for something completely different"?
Immediately after the object is instantiatd, you can attach a property, say name, to the object and assign the string value you expect to it:
var myObj = new someClass();
myObj.name="myObj";
document.write(myObj.name);
Alternatively, the assignment can be made inside the codes of the class, i.e.
var someClass = function(P)
{ this.name=P;
// rest of the class definition...
};
var myObj = new someClass("myObj");
document.write(myObj.name);
Some time ago, I used this.
Perhaps you could try:
+function(){
var my_var = function get_this_name(){
alert("I " + this.init());
};
my_var.prototype.init = function(){
return my_var.name;
}
new my_var();
}();
Pop an Alert: "I get_this_name".
This is pretty old, but I ran across this question via Google, so perhaps this solution might be useful to others.
function GetObjectName(myObject){
var objectName=JSON.stringify(myObject).match(/"(.*?)"/)[1];
return objectName;
}
It just uses the browser's JSON parser and regex without cluttering up the DOM or your object too much.
I have a really simple snippet of code and a really (probably) simple change I need to make.
I can't access a variable that I need to in my jQuery script:
var Objects; // Used to store stuff
enable_reordering();
function enable_reordering()
{
$('a.move-object').click(function(){
Objects.moveMe = $(this);
$('#image-title').text( $(Objects.moveMe).attr('data-child-title') );
return false;
});
}
When I try to change the value of Objects.moveMe to anything, my browser moans that Objects is not set. (Error: Objects is undefined).
How can I make it so that I can use variables in and out of functions throughout my entire script?
Update:
The error is caused by the line
$('#image-title').text( $(Objects.moveMe).attr('data-child-title') );
where I first try and use the variable.
try: http://jsbin.com/ocodoz/
var a;
alert(a);
a === undefined But declared in the current scope..
Your Object have to be set to an object
var Objects = {};
It's not a scope issue. The problem is that, as the error says, Objects is undefined. It looks like you want to set a property of it, so initialize it as an object literal:
var Objects = {};
Currently, what you are trying to do is effectively:
undefined.moveMe = $(this);
When you declare a variable, its value is undefined until you assign some other value to it. By assigning an empty object literal to it, you can then set properties of that object.
I'm using the following JavaScript code:
var emp= new Object();
emp["name"]="pooja";
emp["salary"]=725;
emp["paycheck"]=function()
{
var monthly=this["salary"]/12;
alert(this["name"]+":"+monthly);
};
emp["paycheck"](); --work properly
document.write("<br/>");
var f=emp["paycheck"]; --dosen't work
f();
f() have to get reference on emp["paycheck"] function and display a suitable answer.
but insted i get NaN.
As i understood f() dosen't see the property of emp object("name" and "salary").
My question is why f() dosen't see the properties?
You refer to salary as this["salary"]. If you store the function and call it later, the this value is lost. It is only bound to the object if you directly call it, as in emp.paycheck(). You could pass the this value explicitly, though:
f.call(emp);
But you might rather want to refer to salary in the function as emp["salary"], since that will always work.
Note that instead of foo["bar"] you can use foo.bar, and that the new Object() part can just be:
var emp = {
name: "pooja",
salary: 725,
paycheck: function() {
...
}
};
The reason why is you are calling the function without a this parameter. You need to use apply to pass it an explicit this on which it can call the name and salary properties.
f.apply(emp);
you reference on a function, not on all object.
f = emp;
f.paycheck();
You didn't copy those properties to f. There are, unfortunately, no native ways to do this in JavaScript. See How do I correctly clone a JavaScript object? or What is the most efficient way to deep clone an object in JavaScript?, look at jQuery's extend(), or google "javascript deep copy object" or "javascript clone object".
Others have explained what's going on and how you don't pass this.
However, if you want to do something like this (a custom from Python perhaps?), you can make a helper function:
function makeDelegate(obj, fun) {
return function() {
fun.apply(obj, arguments);
};
}
Then use it like this:
var f = makeDelegate(emp, emp["paycheck"]);
f();
// JavaScript JSON
var myCode =
{
message : "Hello World",
helloWorld : function()
{
alert(this.message);
}
};
myCode.helloWorld();
The above JavaScript code will alert 'undefined'.
To make it work for real the code would need to look like the following... (note the literal path to myCode.message)
// JavaScript JSON
var myCode =
{
message : "Hello World",
helloWorld : function()
{
alert(myCode.message);
}
};
myCode.helloWorld();
My question is... if I declare functions using json in this way, is there some "relative" way to get access to myCode.message or is it only possible to do so using the literal namespace path myCode.message?
Your first example works, the this value inside the helloWorld function will refer to the myCode object itself, because you invoked it by myCode.helloWorld();
When you invoke a function that is member of an object, this object will be set as the this value of the function.
In this case myCode is the base object of the myCode.helloWorld reference.
There are two more cases about how the this keyword is implicitly, for example, when you call a function that is not bound as property of any object, i.e.:
myFunc();
The this value inside myFunc will point to the global object.
When you use the new operator:
var obj = new MyFunc();
The this value inside MyFunc will refer to a newly created object.
And you can set the this value of a function explicitly, using call or apply:
function test () {
return this + " World";
}
test.call("Hello"); // "Hello World"
Just a note, that's not JSON, JSON is simply a data interchange format, its grammar differs with the JavaScript Object Literal syntax, for example:
{ foo: "bar" }
The above is a valid JavaScript object literal, but is not valid JSON, JSON requires the property identifiers to be wrapped between quotes, and it has a limited set of data types allowed, for example, you cannot have functions as members of a JSON object.
No.
First of all, this is not JSON. What you have here is just an object literal. JSON is a data format, and doesn't support functions.
Second, is an understanding of how this binding works.
Unless explicitly bound via call() or apply() or used inside the method of an instantiated object, this always refers to the current window object.
Since you define myCode as an object literal, the "instantiated object" case doesn't apply. Also, you aren't using call() or apply() so those don't apply either. So in the code of your first example, this is equal to window which is why you get undefined (since window.message is undefined).
You already know one way around this - your 2nd code snippet. Your other choice is to actually go ahead and use call() or apply().
var myCode =
{
message : "Hello World",
helloWorld : function()
{
alert( this.message );
}
};
myCode.helloWorld.call( myCode );
This way, you are basically telling Javascript to use myCode as this and it will work as expected.
Another option is to make myCode instantiable.
var myCode = function()
{
this.message = 'Hello World';
this.helloWorld = function()
{
alert( this.message );
}
}
var mc = new myCode();
mc.helloWorld();
CMS hit the nail on the head, if you want more info you could check out http://www.scottlogic.co.uk/blog/chris/2010/05/what-is-this/