What is this?

(This is an article I wrote several years ago to explain the this keyword in some programming languages. The title is a pun intended.)

Java, C# etc.

The this is a keyword in programming languages such as Java, C# and JavaScript. In the former two class based languages, the value of this is straightforward and simple. It means the current object instantiated with the class definition which contains this. In these languages, this can only be used in a statement within a function i.e. a method of its containing class. It cannot be used in the right side of an initialization statement belonging to the declaration part of the class. A special case is that like other non-static variables this cannot be used in a static method as it doesn‘t need any instance to be called. Put simply, this only appears in one kind of place and there is only one way in which the containing code is called and thus has just one meaning.

Outside Functions In JavaScript

As its name implies, JavaScript is a script language. That means it usually shows in the form of snippets embedded in a host (a browser in our discussion)instead of a standalone application. A script snippet consists of statements and functions. This is the current object or context object in the current scope. When this stands in an top level statement outside of any function, it refers to the global object -- the current window object. (Examples used below runs in a Firefox equipped with Firebug)

//Example 1
//A log function to work around the duplicated string issue in the js console
function log(msg){
    if (console)
    {
        console.log(new Date().getTimeString()+‘ >> ‘+msg);
    }
}
//get a string form of a Date object
Date.prototype.getTimeString=function() {
    if (!(this instanceof Date))    return;
    var d=":";
    var result=this.getHours()+d+this.getMinutes()+d+this.getSeconds()+d+this.getMilliseconds();
    return result;
}

this.abc = "hello";
log(this); //10:28:4:281 >> [object Window]
log(window.abc); //10:28:4:283 >> hello
log(‘this is the window? ‘ + (this==window));  //10:28:4:283 >> this is the window? true

Inside Functions In JavaScript

//Example 2
//This might be the most familiar form we meet this where its container function acts as a constructor
function  father(){
this.age=45;
this.howOld=function(){
console.log(‘I am ‘+this.age+‘ years old.‘);
}
}
var f=new father();
f.howOld();  //prints ‘I am 45 years old‘

//Example 3
//even a nested function is not bound to the object created with the outer function
function father(){
this.showMe=function(){
inner();
console.log(this);//prints ‘Object‘
}
function inner(){
console.log(this);  //prints ‘Window‘
}
}
var f=new father();
f.showMe();

//Example 4
//A function is called first as an object‘s method then directly
var career=‘teacher‘;
function whoAmI(){
console.log(‘I am a ‘+this.career);
}
function father(){
this.career=‘driver‘;
}
father.prototype.whoAmI=whoAmI;
var f=new father();
f.whoAmI();  //prints ‘I am a driver‘
whoAmI();  //prints ‘I am a teacher‘

//Example 5
//changes the above example a little
var career=‘teacher‘;
function father(){
this.career=‘driver‘;
}
father.prototype.whoAmI=function(){
console.log(‘I am a ‘+this.career);
}
var f=new father();
f.whoAmI();  //prints ‘I am a driver‘
var w=f.whoAmI;
w();  //prints ‘I am a teacher‘

Now let‘s show the underlying reason for the diverse meaning of this in JavaScript. Fortunately it‘s rather simple. This refers to the context object. According to the form in which a function is called, an object may be passed to it explicitly or implicitly. If no object is passed, as we call a function directly, this points to the global object -- window, just like what happens in a top level statement.If an object is passed to the called function, there are two manners.

1. instance.method(parameters)
The object instance is passed to the function as the value of this implicitly. We can imagine it in a ‘static method‘ way: object_method(instance, other_parameters). Using instance.method([parameter])makes calling function easier and briefer.
2. function object_constructor(parameters){functionbody}
var instance=new object_constructor(parameters);
An new anonymous empty object is passed to the constructor function as the value of this implicitly. Then we can add properties and methods to it.

Inside Event Handlers In JavaScript

One common usage of functions of JavaScript is to register them as event handlers. In such a function, this refers to the object that fires the event.

//Example 6
//In the function registered as the click event listener of a button, alert the Id of the event publisher via this.
document.getElementById("btnShowMe").addEventListener("click", function() {alert("My Id is " + this.id);}, false); //My id is btnShowMe

What is this?,布布扣,bubuko.com

What is this?

原文：http://blog.csdn.net/starrow/article/details/20694145