This question already has answers here:
var self = this?
(8 answers)
Closed 7 years ago.
So I have something like
this.editElement = $("<a href='#'>Edit</a>").click(function() {
this.startEdit();
});
This however takes "this" to be the editElement itself, rather than the parent object.
I've managed to get it to work by making a
var parent = this;
before setting click and then using parent enough of this.
Is this the correct way to solve the problem?
That's a very correct way, yes, and it's common.
You also took the right decision in naming it parent instead of the semantic-less _this we often see.
Other solutions :
to bind the callback to the external this
to use the data argument of JQuery's on to pass the parent
to dynamically find the parent from the callback
but most often referring to a variable kept in the external closure as you did is the cleanest solution.
Related
This question already has answers here:
javascript named function expressions - scope accessibility [duplicate]
(4 answers)
Closed 2 years ago.
I'm trying to return and access the value of a dynamic select from onchange event. I know how to work with function declarations but function expressions are unclear to me. A little help would be appreciated.
js
//create select
var select = document.createElement('select');
select.setAttribute('id','select_month');
//onchange
select.onchange = function changeMonth(selectedmonth){
selectedmonth = this.value;//works well here
return selectedmonth;
};
var selectedmonth = changeMonth();//undefined
changeMonth is a variable that is scoped only to the function itself, and is therefore not available to the rest of the script.
Even if it was available, then realise that when that function is called by the DOM (when the event fires), it calls it with this bound to the DOM element. When you call it explicitly in your code, you should do the same.
The good thing is that the reference to the function is available as select.onchange, so use that. That way you solve both issues at the same time:
var selectedmonth = select.onchange(select);
This question already has answers here:
Use of 'prototype' vs. 'this' in JavaScript?
(15 answers)
this Vs. prototype [duplicate]
(1 answer)
Closed 9 years ago.
What is the difference of inheritance definition of the two ways below
function Rectangle(w,h){
this.width=w;
this.height.h;
this.area=function(){return this.width*this.height;}
}
and
function Rectangle(w,h){
this.width=w;
this.height.h;
}
Rectangle.prototype.area=function(){return this.width*this.height;}
I saw somebody said the first way is inefficient of use regular properties for methods that are intended to be shared by all objects of the same class.
Welcome any comment
The first way, you could use w and h directly inside the area function, equals to use them as private variable.
function Rec(w,h) {
this.setW=function(newW){
w=newW;
}
this.area=function(){
return w*h;
}
}
var rec=new Rec(5,6);
you cannot do alert(rec.w), or rec.w=5. since there is no this.w inside the class.
but you can do
rec.setW(2);
alert(rec.area());
this will alert 12.
http://jsfiddle.net/vanessachem/Hmyyc/ like this. w and h could be treat private variable. they could only be reset via a setter function inside the class.
It is inefficient when you need to create multiple instance. If you just want to create singleton, the first one is easy to manage.
The advantage of the second one is that you could put prototype function inside different file. It is good for multiple instances. However, you cannot treat w and h as private variable. You can't use w or h directly in the area function.
The first way, every time you construct a new Rectangle, you also create a new anonymous function and assign it to this.area. The second way is more efficient if you are going to be constructing more than one Rectangle, because the anonymous function is still only created once, and all Rectangles have access to it, via their prototype.
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Closed 8 years ago.
I just came across this by accident and I want to check if this is actually supposed to happen.
I have a div in my page with id box. In my Javascript I set a style to a variable named box: box.style.webkitTransform = "yadda yadda".
I thought that box was in scope, declared as var box = document.getElementById('box');, but it is not (the declaration is in another function!). Neither is there a var box defined globally or in any other place.
However the style got assigned just fine. So somehow the elements' id can be used globally in Javascript? Convenient, but I'm afraid to use it. I assume if the name is used for an actual variable it will override this behavior.
Some browsers add 'named elements' as properties of the document or windowobject. See this SO-question, especially the excellent answers from bobince
This question already has answers here:
What is the purpose of passing-in undefined?
(3 answers)
Closed 8 years ago.
I'm looking at jquery resize plugin and can't understand certain things about how it works:
usually we only pass in Jquery object into jquery plugins, like this:
(function($){
....plugin code....
})(jQuery);
In "resize" plugin there are window and undefined objects being passed in:
(function($,window,undefined){
....plugin code....
})(jQuery,this);
IMHO - window is a global object anyway - why do we need to pass it in? the logic behind passing in undefined object I understand even less. I'm sure there's gotta be some reason for it - but I cannot think of any.
Can someone explain why is it being done?
this is explained very well in this video.
basically, you can set those variables in the self invoking function to ensure they work as expected.
"the asshole effect" undefined = true; -paul irish
furthermore by passing these as arguments they can also be minified.
ie.
(function(A,B,C){
....plugin code....
})(jQuery,this);
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Javascript how do you find the caller function?
Is there a way to get the value of this from the function which has called the current function?
Look at this:
function TraceMySelf(){
console.log(this);
}
function A(){
TraceMySelf();
console.log(this);
}
var a = new A();
When this code is executed, the console displays first the window object and then the a object. How can I make the code display the a object twice, with only changing line 2? I know that I could apply the function inside A with this, but that isn't what I want.
Is this possible?
I think this is the answer to your question: StackOverflow 280389
However, I think the right answer is "don't do that". I think it runs counter to how JavaScript is designed.
It might also be worth looking at jQuery Proxy for another way of linking function and object.