confusion about the 'this' keyword in Javascript - Stack Overflow

admin管理员组

文章数量:1327966

I can claim that 'this' keyword is the most confusing part of Javascript for those who es from languages like C#.

I have read a lot about this on the internet and on StackOverflow too. like here and here.

I know that 'this' keyword will be bound to the context. and in constructor function it will be bound to the object being created, and when there is no immediate context it will bound to global object (i.e window)

I know all that , however confusion is still not fully cleared; So the best way to understand is by testing codes.

---

So I decided to write small code and I was surprised by how much convoluted the this keyword.

here is the code i tested:

 function sayHi(name){
   var tt = name;
   return {
     ss: tt,
     work: function(anotherName){

     alert ("hiiiii    " + anotherName);
   }
 };
}

//this method invocation has no effect at all right now
sayHi("John");


var hi2 = new sayHi("wallace");

hi2.work("May");
alert(hi2.ss);

as expected the alert window will show (Hiiiiii May ) then ( wallace). Notice now that the line sayHi("John"); has no effect at all.

and Now the confusion will start when I change one thing ONLY (change var tt => this.tt):

 function sayHi(name){
   //this is the ONLY change I did.
   this.tt = name;
   return {
     ss: tt,
     work: function(anotherName){

     alert ("hiiiii    " + anotherName);
   }
 };
}

// Now this line invocation will be problematic 
sayHi("John");


var hi2 = new sayHi("wallace");

hi2.work("May");
alert(hi2.ss);

the result surprised me when the alert mthod gave ( Hiiiiiii May ) and then (John) not (wallace);

so I had the idea to ment the line sayHi("John"); but that resulted in the whole code being no-functional and not working.

the demo is here

I know this might be newbee question. But it is really confusing here and I did try to read many articles and SO questions but i m missing this point.

Why does the line sayHi("John"); setting the hi2.ss to John?? and why does it break the code when we delete it ; although we invoke the sayHi method by using the new keyword afterward ??

I can claim that 'this' keyword is the most confusing part of Javascript for those who es from languages like C#.

I have read a lot about this on the internet and on StackOverflow too. like here and here.

I know that 'this' keyword will be bound to the context. and in constructor function it will be bound to the object being created, and when there is no immediate context it will bound to global object (i.e window)

I know all that , however confusion is still not fully cleared; So the best way to understand is by testing codes.

---

So I decided to write small code and I was surprised by how much convoluted the this keyword.

here is the code i tested:

 function sayHi(name){
   var tt = name;
   return {
     ss: tt,
     work: function(anotherName){

     alert ("hiiiii    " + anotherName);
   }
 };
}

//this method invocation has no effect at all right now
sayHi("John");


var hi2 = new sayHi("wallace");

hi2.work("May");
alert(hi2.ss);

as expected the alert window will show (Hiiiiii May ) then ( wallace). Notice now that the line sayHi("John"); has no effect at all.

and Now the confusion will start when I change one thing ONLY (change var tt => this.tt):

 function sayHi(name){
   //this is the ONLY change I did.
   this.tt = name;
   return {
     ss: tt,
     work: function(anotherName){

     alert ("hiiiii    " + anotherName);
   }
 };
}

// Now this line invocation will be problematic 
sayHi("John");


var hi2 = new sayHi("wallace");

hi2.work("May");
alert(hi2.ss);

the result surprised me when the alert mthod gave ( Hiiiiiii May ) and then (John) not (wallace);

so I had the idea to ment the line sayHi("John"); but that resulted in the whole code being no-functional and not working.

the demo is here

I know this might be newbee question. But it is really confusing here and I did try to read many articles and SO questions but i m missing this point.

Why does the line sayHi("John"); setting the hi2.ss to John?? and why does it break the code when we delete it ; although we invoke the sayHi method by using the new keyword afterward ??

• javascript
• this

Share Improve this question Follow edited May 23, 2017 at 11:50 CommunityBot 111 silver badge asked May 30, 2014 at 13:12 stackunderflowstackunderflow 3,88355 gold badges3434 silver badges4545 bronze badges 3

• In "strict" mode, this is undefined when a function is invoked without any context. – Pointy Commented May 30, 2014 at 13:16
• ss: tt, is assigning based on a local var, not a property of this, since the var doesn't exist it should be undefined. – scragar Commented May 30, 2014 at 13:17
• @scragar after reading the answers down and understand all of them . now your ment make sense . thanks man – stackunderflow Commented May 30, 2014 at 13:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Because you assign the parameter "name" to a property of the object referenced by this (which in this case will be window), your subsequent reference to "tt" in that object literal will be to the "tt" property of the global object, since that's the next enclosing scope.

Your first call to "sayHi" is made without the new operator, so in that call this will refer to the global object (window). The first line in the second version

this.tt = name;

therefore will set window.tt to "John".

The next call is made with the new operator. Because of that, this in the function refers to the newly-instantiated object. The line

this.tt = name;

will therefore really have no net effect on anything, because the function returns a different object in all cases. The last line of your test:

alert(hi2.ss);

says "John" because that's what's in window.tt. Why does that matter? Because "sayHi" returns an object with a property ("ss") set from the value of the symbol "tt". The only "tt" in scope will be window.tt, which was set back in the first call to the function.

When you first invoke sayHi("John");, this will point to the global object window. That means this.tt = name actually creates a global tt variable.

Then when you invoke new sayHi("wallace");, this correctly points to a new instance of sayHi, but you are returning another object instead of letting new naturally return the instance.

If you carefully look at your object literal, you define ss like ss: tt,. Since you aren't using this.tt and there is no tt symbol found in the constructor's scope, the value will then be resolved as a global variable (which was previously set to John).

When invoking a constructor function, if no return statement exists in the function then this is implicitly returned otherwise the return value is returned and this is simply ignored.

In your second example you are saving the name argument as this.tt but returning a different object. That's why things aren't working. Basically use this or return a custom object, but don't do both.

本文标签： confusion about the 39this39 keyword in JavascriptStack Overflow