Redundant Javascript is this in an object method?
Noob question, searching but not finding an answer to this specific question. I create an object and reference the argument parameters using the 'this' keyword:
function Obj(a, b, c) {
this.a = a;
this.b = b;
this.c = c;
this.addMe = function() {
alert(this.a + this.b + this.c);
};
}
My question is simple: if a, b and c only exist inside an object (in other words, global variables declared using the same names) are not the 'this' keywords when they are used in the addMe () method? Can a method not just be written as:
this.addMe = function() {
alert(a + b + c);
};
When I run this code creating a new Obj instance, it works exactly the same anyway. And (not that I did that) if I create globals for a, b and c different from the arguments I use when creating a new Obj, they have nothing to do with the results of the method call. So am I missing something that will come back to bite me if I don't use 'this' in the method?
source to share
If , you know that this.a
(for example) will never be reassigned, then yes, they should be the same.
It's great if though. What if you later forget that you intended never to rewrite them? Then you have a strange bug that can be difficult to track down.
Example:
function Obj(a) {
this.a = a;
this.show = function() {
console.log(this.a);
console.log(a)
};
}
var obj = new Obj(1);
obj.show();
obj.a = 2;
obj.show(); // OOPS!
Note that the second call show
will give two different values. The function show
creates a closure around the original value a
; essentially saving it. It remains unchanged when this.a
reassigned.
If you don't have a compelling reason, just use this
. Make it clear that your intentions are usually the way to go when in doubt. Saving yourself a few keystrokes is rarely worth the potential headache along the way.
source to share
To demonstrate the difference / problem of use a + b + c
function Obj(a, b, c) {
this.a = a;
this.b = b;
this.c = c;
this.addMe = function() {
console.log('addMe', this.a + this.b + this.c);
};
this.brokenAddMe = function() {
console.log('brokenAddMe', a + b + c);
};
}
var o = new Obj(1,2,3);
o.addMe(); // should be and is 6
o.brokenAddMe(); // should be and is 6
o.a = 4;
o.addMe(); // should be and is 9
o.brokenAddMe(); // should be 9 but still is 6
source to share
With the way you defined the function addMe
, yes; you can just close a
, b
and c
and use them. The problem, however, is that this is generally a wasteful way of defining your methods, because every instantiation Obj
will involve building a new function addMe
.
In general, people tend to attach reusable methods to the prototype outside of the constructor function, either relying on the syntax of the ES6 class or on execution Obj.prototype.addMe = ...
. In both cases, the constructor parameters a
, b
and are c
not included in the scope, so you must rely on the properties available in this
.
source to share