Today's Question:  What's your opinion about Alibaba mooncake incident?        GIVE A SHOUT

Technical Article => Web =>  JavaScript

Understand this in JavaScript

  sonic0002      2013-04-03 04:10:03      1,743    0    0

In JavaScript, this is always pointing to the owner of a function or a method.

Function

Let's check out function first.

  1. function introduce() {
  2.      alert("Hello, I am Laruence\r\n");
  3. }

For this function, what does this point to? In JavaScript, a global function's owner is the current page, i.e, the window object. Because its a method of the window object if we define a global function. Now you should know the this will point to the window object in the above function.

If we check the introduce property of window:

  1. var name = "I am Laruence";
  2. function introduce() {
  3.      alert(this.name);
  4. }
  5. alert(window.introduce);
  6. /**
  7. * output:
  8. * function introduce() {
  9. * alert(this.name);
  10. * }
  11. */

When you call the introduce function, it will alert "I am Laruence".

Event handler

Maybe the biggest confusion about this keyword is coming from the event handler.

<input id="name"type="text"name="name"value="Laruence"/>

For example, if we want to show the value of the name field when we click this text field, we may add below codes:

  1. function showValue() {
  2.      alert(this.value);
  3. }
  4. document.getElementById('name').onclick = showValue;

In above codes. the function showValue is defined in global scope, will this point to window? The answer depends. When you assign the showValue to onclick,it means you are assign this function to the method of document.getElementById("name"), now the whowValue becomes one method of it. So this will point to document.getElementById("name"). If we check the value of onclick, we will get:

  1. function showValue() {
  2.      alert(this.value);
  3. }
  4. document.getElementById('name').onclick = showValue;
  5. alert(document.getElementById('name').onclick);
  6. /**
  7. * output
  8. * function showValue() {
  9. * alert(this.value);
  10. * }
  11. */

However if we write below code:

  1. function showValue() {
  2.      alert(this.value);
  3. }

It will not run as expected. Why? Because now it's not an assignment, it's a call. Now if we check the value of onclick, we will get:

  1. alert(dom.onclick);
  2. /**
  3. * output:
  4. * function onclick() {
  5. * showValue();
  6. * }
  7. */

Change what this points to

We can use call or apply to change what this points to.

  1. var laruence = {
  2.      name : 'laruence',
  3.      age : 26,
  4.      position : 'Senior PHP Engineer',
  5.      company : 'Baidu.inc'
  6. };
  7.  
  8. function introduce() {
  9.      alert(this.name);
  10. }
  11.  
  12. introduce.call(laruence);

Source : http://www.laruence.com/2009/09/08/1076.html

JAVASCRIPT THIS EVENT CALL

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

Workaround the workaround

By sonic0002