The this pointer, people's favorite in languages including Javascript was a great source of pain for me when I was developing a Javascript drop down custom component. I learned today that it was 'this' that caused me problems!
Generally, 'this' refers to the global object. It also takes on different values based on your scope/context.
-In a global constructor, global function and global code, this refers to the global object ( the first should not be the case in strict mode in ECMAScript5)
-In a method of an object, 'this' refers to the object
// this pointer
name='what?' // same as this.name
var p = function () {
console.log(this.name); // changes the global name, as no var name is defined locally
name = 'again?';
console.log(this.name);
}
p();
// the global this.name was modified by the function p
// Why? because p is a global function,
// and this refers to the global object in that function
console.log(name);
Now see how it works in object scope. The first and last log() statements print the global this.name, while the method p of the object q understands 'this' to be the object aQ which is an instance of q.
name='what?'
console.log(name);
var q = function(newname) { this.name = newname;}
q.prototype.p = function () {
console.log(this.name); // 'this' here is the object instance of q
};
aQ = new q('new Name');
aQ.p();
bQ = new q('new Name2');
bQ.p();
bQ.name='changed Name2'; // this changes the name of the instance bQ
bQ.p(); // this lines proves the previous statement
console.log(this.name); // this is still the global this.name
This is especially important to know in callbacks, when a function is passed as an argument to another function, the use of this should be done carefully
Generally, 'this' refers to the global object. It also takes on different values based on your scope/context.
-In a global constructor, global function and global code, this refers to the global object ( the first should not be the case in strict mode in ECMAScript5)
-In a method of an object, 'this' refers to the object
// this pointer
name='what?' // same as this.name
var p = function () {
console.log(this.name); // changes the global name, as no var name is defined locally
name = 'again?';
console.log(this.name);
}
p();
// the global this.name was modified by the function p
// Why? because p is a global function,
// and this refers to the global object in that function
console.log(name);
Now see how it works in object scope. The first and last log() statements print the global this.name, while the method p of the object q understands 'this' to be the object aQ which is an instance of q.
name='what?'
console.log(name);
var q = function(newname) { this.name = newname;}
q.prototype.p = function () {
console.log(this.name); // 'this' here is the object instance of q
};
aQ = new q('new Name');
aQ.p();
bQ = new q('new Name2');
bQ.p();
bQ.name='changed Name2'; // this changes the name of the instance bQ
bQ.p(); // this lines proves the previous statement
console.log(this.name); // this is still the global this.name
This is especially important to know in callbacks, when a function is passed as an argument to another function, the use of this should be done carefully
Comments
Post a Comment