I've written a class and this is a snippet taken from it to demonstrate my problem.
<!--language:lang-js-->
var myclass = function () {
this.addItem = function () {
//generateDiv and append..
//generatedeletebtn and append
btn.onclick = this.deleteItem;
}
this.deleteItem = function () {
console.log(this);
}
}
Inside the deleteItem function, this represents the HTML element clicked. Is there a way I can access the myclass object directly?
I've tried changing
div.onclick = this.deleteItem
to
div.onclick = this.deleteItem(this) which works as far as accessing the object but the parenthesis invoke the function and remove the items as soon as they're added so that's no good.
This looks like a job for bind
btn.onclick = this.deleteItem.bind(this);
You can think of bind as wrapping function A referenced by this.deleteItem in another function B, which always invokes A with the context given as the first parameter of bind.
There is a polyfill available on MDN if you can't assume bind is available in your environment.
You can use the closure to store a reference to the myclass object itself in a variable called that. Then, when deleteItem is eventually called, it should use the myclass object as that.
var myclass = function () {
var that = this;
this.deleteItem = function () {
console.log(that);
}
}
You shouldn't have to worry about polyfills with this one.
I have object:
var devark = {
init: function() {
var obj = this;
obj.assignHandlers();
},
assignHandlers: function() {
var obj = this;
document.getElementById("menu-toggler").onclick = obj.documentFunctions[0];
},
documentFunctions: [
function() {
toggleClass(this, "opened");
}
]
};
on window.load, I am calling the init method. That works fine but when it calls another object method assignHandlers, it throws an error:
[17:54:33.192] TypeError: obj.assignHandlers is not a function
Why is it?
Like #Bergi said, it's a this value issue that can be solved by doing:
window.onload = function () {
devark.init();
};
The difference between both ways is the value of this within the init function. To determine the natural value of this, look at the left-side of the . in a method call, such as obj.someFn();. Here the value of this within someFn will be obj. However, when you do window.onload = devark.init;, you can imagine the handler will later be invoke like window.onload(). Which means the value of this within the onload function, which is really the init function will be window, not devark.
You can also use Function.prototype.bind to bind a specific this value to a function.
window.onload = devark.init.bind(devark);
I am trying to call instance method inside event handler of another instance method but I am getting function undefined, I assume this is because in the event handler "this" refers to DOM element rather then the instance:
function MyObject(something) {
this.something = something;
this.value = 'abc';
}
MyObject.prototype.Init = function() {
$(this.something).click(function() {
this.DoSomething();
});
};
MyObject.prototype.DoSomething = function() {
//do something
};
Is there way to get "this" to point to instance?
Define another variable whose name is something other than this and assign it the context you wish to refer to in your inner function:
MyObject.prototype.Init = function() {
var scope = this;
$(this.something).click(function() {
scope.DoSomething();
});
};
I am currently creating a dialog within a user-define class:
$("<div>").dialog(buttons: {
'one': function () {
$(this).dialog('close').dialog('destroy');
}
});
The above works fine, however, this no longer refers to the class instance in the above function. I can get around this with $.proxy:
...buttons: {
'one': $.proxy(function () {
this.doWork();
}, this)
Then, I can call class methods when the dialog button is clicked.
However, I still need to call .dialog('close').dialog('destroy') on the dialog element itself. After redefining this with $.proxy, how can I access that element in the button callback? e.target refers to the button itself.
I also realize I can do something like this:
var obj = this;
...buttons: {
obj.doWork();
but I'm looking for a way around that.
I'm not sure why you want to avoid var obj = this; inside the class's scope, but the only other way would be with a self-invoking closure which does essentially the same thing. In order to have a reference to both contexts, you need to store the class reference in a different variable.
With closure:
function MyClass() {
this.createDialog = function () {
$("<div>").dialog({
buttons: {
"one": function (self) {
return function (e) {
self.doWork();
$(this).dialog("close").dialog("destroy");
};
}(this)
}
});
};
this.doWork = function () {
// do work
};
}
$(function () {
var obj = new MyClass();
$(".createDialog").click(function () {
obj.createDialog();
});
});
jsFiddle: http://jsfiddle.net/ar4ZL/
My code is very simple. Ans to me it should work.
var preview = WinJS.Class.define(
function (el, options) {
el.winControl = this;
this.el = el;
this.textarea = d.getElementById('preview-input');
this.preview = d.getElementById('preview-text');
this.form = d.getElementById('perview-form');
this.preview.addEventListener('click', this.click, false);
//WinJS.Utilities.query("button", this.form)
//this.preview.addEventListener('', this.save, false);
},
{
click: function (e) {
this.form.style('display', 'block');
}
}
);
WinJS.Namespace.define('RegCtrl', { preview: preview });
But when click occurs this.form seems to be undefined of null. Why? I do not want to initialize objects in every method of the class.
New tests
I made additional test very small
var preview = WinJS.Class.define(
function (el, options) {
var test = 1;
this.test = 1;
this.test1();
},
{
test1: function () {
console.log(this.form, test);
}
}
);
WinJS.Namespace.define('RegCtrl', { preview: preview });
This test fails on line this.test1();. What I think now that this class is called RegCtrl.preview() rather than new RegCtrl.preview().
How do I shek inside the function that this called as new but not a simple function?
The other answers aren't explaining what's going on, and as such are giving incorrect advice.
JavaScript has first-class function objects - you can pass them around as values. That's exactly what you're doing when you set up this callback:
this.preview.addEventListener('click', this.click, false);
You're taking the contents of the this.click property, which happens to be a function, and handing it to the addEventListener function to do whatever it wants with it.
I was very specific about terminology there - note I specifically said function, not method. JavaScript doesn't really have a method construct, it just has methods as properties on an object.
So where does the "this" member come from? It's determined at the caller - the object you use on the left side of the '.' is the one that becomes the value of this. For example,
function exampleFunc() { console.log("this.myName = " + this.myName); }
var a = { myName: "Chris", doSomething: exampleFunc };
var b = { myName: "Bob", doSomething: exampleFunc };
Note I've assigned the exact same function to the doSomething properties. What what happens:
a.doSomething(); // Outputs "this.myName = Chris"
b.doSomething(); // Outputs "this.myName = Bob"
The exact same function object, called through two different objects, has a different this pointer.
exampleFunc is a global function, let's call it:
exampleFunc() // Outputs "this.myName = undefined"
So where'd the undefined come from? In a global function, "this" is set to window (the global scope), which didn't have the myName property defined. Which also means that you could do this instead:
myName = "Global Name"; // note, no var - we want this global
exampleFunc(); // Outputs "this.myName = Global Name"
Ok, so what's going on with the original question? Basically, you've passed the function this.click to be the callback, but you haven't passed the "this" pointer that you want it called through. Actually, addEventListener doesn't have a way to pass the this pointer. As a result, when the function is invoked this is not pointing at your object. I don't remember off the top of my head what it's pointing at - it's either window or the element that was clicked on, check the DOM documentation to verify.
To get it to call the right function with the right context (context = the correct "this"), the traditional approach is to use a closure. Capture "this" in a variable, then pass in an anonymous function that calls your actual callback with the right this pointer. The code looks like this:
var preview = WinJS.Class.define(
function (el, options) {
// Capture your current this pointer in a global variable
// Using "that" as the name comes from JavaScript: The Good Parts book
var that = this;
el.winControl = this;
this.el = el;
this.textarea = d.getElementById('preview-input');
this.preview = d.getElementById('preview-text');
this.form = d.getElementById('perview-form');
// Note what gets passed instead of this.click:
this.preview.addEventListener('click',
function (e) {
// NOTE: Calling through "that": "this" isn't pointing to the right object anymore
// Calling through "that" resets "this" inside the call to click
that.click(e);
}, false);
},
{
click: function (e) {
this.form.style('display', 'block');
}
}
);
This is a common enough pattern that ECMAScript 5 has a utility function to build these wrappers for you - function.bind. Do this:
this.preview.addEventListener('click',
this.click.bind(this),
false);
The construct this.click.bind(this) will construct a new function that, when called, will set the "this" reference to whatever you passed (in this case "this"), and then invoke the function you called it on.
Yes, there are a lot of different values for "this" floating around. Keeping track of what "this" is pointing at is an important part of mastering JavaScript programming.
I think you may want to define a global JavaScript variable as :
var myForm = document.getElementById('perview-form');
or jest define var myForm; and initialize inside function (el, options) as:
myForm = d.getElementById('perview-form');
Now you can use this variable in your function as :
myForm.style('display', 'block');
EDIT: I believe you may define this variable as first line in your WinJS.Class.define to make it instance level variable as below:
var preview = WinJS.Class.define(
var myForm;
function (el, options) {
....
....
myForm = d.getElementById('perview-form');
...
},
{
click: function (e) {
myForm.style('display', 'block');
}
});
This is a really hard thing to research if you don't know what to look for. I added one line and changed another line. That should fix your issue.
In short, the keyword this gets reset every time you enter a new function, this the value of this inside your click function is not the same this of the outer scope. Preserve this this you want. The name of that seems fairly common.
Edited based on the link provided by the OP.
This code is UNTESTED. If using this doesn't work now, then I'd try this2
Sorry I can't test this, but I don't have the framework anywhere so I'm doing
educated guesswork.
var preview = WinJS.Class.define(
function (el, options) {
that = this; // No var should be needed since it is declared already
el.winControl = this;
this.el = el;
this.textarea = d.getElementById('preview-input');
this.preview = d.getElementById('preview-text');
this.form = d.getElementById('perview-form');
this.preview.addEventListener('click', this.click, false);
//WinJS.Utilities.query("button", this.form)
//this.preview.addEventListener('', this.save, false);
},
// This is the section for instance vars
{
click: function (e) {
that.form.style('display', 'block'); // AND THIS ONE
},
that: null // Added instance variable
},
// And these are static variables
{
that2: null
}
);