Understand the JavaScript keyword this

Posted on 2009-07-01 filed under: AJAX (RSS) 117 views   

Original: Understanding JavaScript's this keyword

A few days ago, I wrote an article on aspects of the JavaScript-oriented article on how to use the wrapper to replace the given function or method. To fully understand this concept, the correct understanding of JavaScript to their keyword "this" of the treatment is helpful. JavaScript how to determine the context of a wide range of what this means, this article gives a brief summary.

Let us start with the beginning of the following examples of Bob:

var Bob = {
  name: "Bob",
  greet: function() {
    alert( "Hi, my name is " + this.name );
  }
};

Here, we have created a member of the Object have two examples of a simple character name, and one that contains references to the name of the method greet, when the implementation of Bob.greet () method, greet () function with Bob as this the object. Now, let us take a look at the same Bob.greet () object in the new implementation will be how to:

var Alice = {
  name: "Alice",
  greet: Bob.greet
};

Consider the following, which one is the Alice.greet () the output of this?

   1.  "Hi, my name is Bob", or
   2. "Hi, my name is Alice" 

If you choose the "2", right! Bob function greet the "this.name" until the function of the real implementation will be resolved, so that when Alice.greet () is called, function greet () of this is set to Alice. However, if the function call itself, rather than as an object's methods, what can happen? Take a look at the following:

var unboundGreet = Bob.greet;
unboundGreet();

Predictive functional you unboundGreet () will output what? The answer is "" Hi, my name is ". This is because when a non-binding when the function is called," this "object is set to the overall window, and there is no definition of window.name, so have a space character.

The following examples you will see the hidden debug will not bind a headache:

setTimeout( Bob.greet, 1000 ); // Call Bob.greet 1 second from now

Developers may wish to Bob.greet () call in the second after, it's bound to the Bob will output "Hi, my name is Bob", but this is expected and does not appear, on the contrary, the greet () method only can be referred to as non-binding, with its output unboundGreet () is the same. Equivalent to the following code might be able to more clearly explain the reasons:

var unboundGreet = Bob.greet;
setTimeout( unboundGreet, 1000 );

Here, it is clear that in the implementation of time (one second after), the function greet () is a non-binding. When you approach an object as an event processor, the same will occur. Take a look at the following HTML:

<a href="">Greetings!</a>

Add the following JavaScript:

document.getElementById("clickme").onclick = Bob.greet;

Might we expect this will trigger link output "Hi, my name is Bob", but click on it, and call the results of unboundGreet () is the same.
To resolve the issue of implied non-binding way is to create a function, use it to package without the scope of the method (the bound method). JavaScript library includes the majority of such assistants, most of the time Function.prototype by adding a method to complete the bind.
Not in this way here, following a simple example of how this wrapper Jiancang (wrapper).

var bobsGreet = function() {
  Bob.greet();
};

setTimeout( bobsGreet, 1000 );

Or, more simply,

setTimeout( function(){

  Bob.greet();

}, 1000 );

This is the full content of this article.

Tags: implementation (RSS), debug (RSS), headache (RSS), few days (RSS), space character (RSS), character name (RSS), brief summary (RSS), alice (RSS), hi my name is bob (RSS)

Permalink: http://www.codeweblog.com/understand-the-javascript-keyword-this/