Accessing variables in objects in javascript without "this"
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Peon(number) {
this.number = number;
this.inc = function() {
number=number+1;
};
return true;
}
var p=new Peon(10);
function returnNumber() {
p.inc();
alert(p.number);
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="b00" TYPE="button" Value="Click" onClick="returnNumber()">
</BODY>
</HTML>
This code doesn't work as intended. Is there a way to make it work without having to write
this.numb开发者_StackOverflow中文版er=this.number+1;
Here it is a trivial choice, but in bigger codes not having this.* would make it a lot more readable. Is it possible?
You can make number
"private", but then you need a getter:
function Peon(number) {
var number = number;
// increment
this.inc = function() {
number++;
};
// a simple getter
this.getNumber = function() {
return number;
}
}
var p = new Peon(10);
p.inc();
alert(p.getNumber());
You should read Douglas Crockfords "The Good Parts" for more information on how to use this pattern, there's (limited) a preview available at Google Books.
Also you don't need to return something from the constructor, your return true
is superfluous.
No, you have to use this
to reference properties on the this
object. Note that this
in JavaScript is very different from this
in some other languages, like C or Java. More here and here.
What your code is doing is accessing the number
argument that was passed into the Peon
constructor function, rather than the this.number
property you created in the constructor. Which is why it doesn't work as intended, but doesn't fail, either.
There's no reason to define your inc
operation within the Peon
constructor function, BTW, and some good reasons not to (every individual object created via Peon
will get its very own copy of that function). So instead, you can define it like this:
function Peon(number) {
this.number = number;
// Don't return values out of constructor functions, it's
// an advanced thing to do. In your case, you were returning
// `true` which was being completely ignored by the JavaScript
// interpreter. If you had returned an object, the `this` object
// created for the `new Peon()` call would have been thrown away
// and the object you returned used instead.
}
Peon.prototype.inc = function() {
++this.number;
};
var p=new Peon(10);
function returnNumber() {
p.inc();
alert(p.number); // alerts 11
}
Not really, but this is a little more concise
this.number++
Actually, as a side note, you'd be better off declaring .inc outside the constructor of Peon. You could do this with prototype. That way the inc function is not reconstructed each time you create an object of type Peon.
Peon.prototype.inc = function(){
this.number++;
}
Or instead of using p.inc()
you could do p.number++
. That's the only way I can think of avoiding the this keyword.
The only readable way I can see doing it would be:
this.inc = function() {
this.number++;
};
Otherwise, in your "bigger codes" postulation, you could do something like this:
this.inc = function() {
var number = this.number; // obviously simple here. Imagine more complexity
number++;
};
Yes, you do not need to use 'this' in javascript. You can access variables via closure instead of 'this'
function createPeon(number) {
function inc() {
number=number+1;
};
function getNumber() {
return number;
}
return { inc, getNumber };
}
var p=createPeon(10);
p.inc();
alert(p.getNumber());
精彩评论