• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 396
  • Last Modified:

"this" on javascript

Dear Experts

Question-1
<script type="text/javascript">console.log(this)</script>
that will show "this" as window object such as window{top:window,window:Window,,Location.......}

<script type="text/javascript"> 
funtcion v1(){
this.space="v1";
console.log(this);
}
funtcion v2(){
this.space="v2";
console.log(this);
}
v1();
V2();
</script>

Open in new window


that function code are same  to show this as window object . So I believe "this"  is public object of window. But when I show "this" by  b with new such as follows, it will show v1{} for this and this.space is equal to v2 instead of v1, so this key is not public  after b=new v1() ?
v1(); //window{}
v2();//window{}
var b= new v1();  //v1{}
console.log(this.space) //v2  instead of v1, why ?

question-2
<a href="#" onclick="javascript:alert(this.innerHTML)>Testing</a>
this keyword  in anchor tag  is referring to achor object  but not window object, why ?
it is different this keyword in html and javascript area by ECMA script spec, where  can prove or show it ?



Please advise and read the following code attached

Rwniceing

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>this</title>
<script type="text/javascript">

function v1(id){
this.space="v1";
console.log("1-" ,this);
}
function v2(id){
this.space="v2";
console.log("2-" ,this);
}

//--------------------------
function start(id){
v1();  //1- window{}
v2();  //2- window{}
console.log("3-", this.space);  //3- v2
var b= new v1();  //1- v1{space:"v1"}
console.log("4-", this.space);//4- v2
console.log("5-", b.space);//5- v1

}

</script>
<body onload="start();">
<div>this, window object</div>
<a href="#" style="color:blue" onclick="javascript:aert(this.innerHTML);>Testing</a>
<div id="wrapper">Warpper</div>
</body>
</html>

Open in new window

0
rwniceing
Asked:
rwniceing
  • 12
  • 12
2 Solutions
 
RobOwner (Aidellio)Commented:
Question 1:  It's all to do with scope.  If you do not use the new keyword, it's just a normal function running in the window scope, thus this returns the window object.  When you use the "new" keyword, you are changing the scope and this now refers to the object you've created.

I highly recommend you read my article on javascript objects: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_13138-Javascript-is-just-an-Object.html
0
 
RobOwner (Aidellio)Commented:
Question 2:
It's not that different to your Q1 in that the this in the onclick event is running in the scope of the anchor object so this refers to the anchor tag.  Make sense?
0
 
RobOwner (Aidellio)Commented:
The 2 functions:

<script type="text/javascript"> 
funtcion v1(){
this.space="v1";
console.log(this);
}
funtcion v2(){
this.space="v2";
console.log(this);
}
v1();
V2();
</script>

Open in new window


As they are not specifically tied to something they attach to the window object.

As a demonstration: http://jsbin.com/xipok/1/edit
var mynamespace = {};
mynamespace.v1 = function() {
	this.space="v1";
	console.log(this);
}
mynamespace.v2 = function() {
	this.space="v2";
	console.log(this);
}
mynamespace.v1();
mynamespace.v2();

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
rwniceingAuthor Commented:
When you use the "new" keyword, you are changing the scope and this now refers to the object you've created.

function start(id){
v1();  //1- window{}
v2();  //2- window{}
console.log("3-", this.space);  //3- v2
var b= new v1();  //1- v1{space:"v1"}
console.log("4-", this.space);//4- v2
console.log("5-", b.space);//5- v1

}

in start() , it show "4-V2" at console.log("4-", this.space) after var b=new v1() if the statement you quoted above  is correct, this keyword  should refer to the object I have created (it is v1 not v2)

I expected console.log("4-", this.space); that should be "4- v1" instead of "4- v2", right ?
0
 
RobOwner (Aidellio)Commented:
in start() , it show "4-V2" at console.log("4-", this.space) after var b=new v1() if the statement you quoted above  is correct, this keyword  should refer to the object I have created (it is v1 not v2)

ahhhh... well you ran v1() and v2() didn't you?  so it set a global variable "space" on the window object.  As you ran v2 after v1, it initially set it to "v1" and then "v2" when the 2nd function was run.

function v1() {
    this.space = "v1";   <======= attaches a variable "space" to the window object, which is "this"
    console.log(this);    <======= "this" is the window object
}
0
 
rwniceingAuthor Commented:
yes, I ran v2() after v1().  Since v2() is last one before v1()  for window object so it will
show "3-v2" from console.log("3-", this.space);  //3- v2
and it should show  "4-v1" instead of "4- v2" from  console.log("4-", this.space);//4- v2
since var b=new is last one for v1 object before console.log("4-", this.space);//4- v2

function start(id){
v1();  //1- window{}
v2();  //2- window{}
console.log("3-", this.space);  //3- v2
var b= new v1();  //1- v1{space:"v1"}
console.log("4-", this.space);//4- v2
console.log("5-", b.space);//5- v1

}

What is wrong with my code ?
0
 
RobOwner (Aidellio)Commented:
nothing is "wrong" with your code, it's just your understanding of what's happening at each line:

v1(); // window.space is now "v1"
v2(); // window.space is now "v2"
console.log("3-",this.space); IS EXACTLY console.log("3-",window.space); which is "v2"

var b=new v1(); // v1 outputs "v1", this DOES NOT overwrite window.space with "v1"
console.log("4-", this.space); AGAIN IS EXACTLY console.log("4-", window.space); which is still "v2";
console.log("5-", b.space);//5- v1  AS EXPECTED
0
 
rwniceingAuthor Commented:
at var  b= new v1() this keyword is changed to v1 object and the this keyword is not public ?
if it's still public, it will overwrite the previous  window object.

If not, this keyword in function call is different from this keyword from the instantiating  on var with "new"

it seem it concluded that

this keyword in function call is different from this keyword from the instantiating  on var with "new"

Right ?
0
 
RobOwner (Aidellio)Commented:
that is correct.  instantiating creates a copy of the object, calling the function executes it in the window scope.

Did you read my article?

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_13138-Javascript-is-just-an-Object.html
0
 
rwniceingAuthor Commented:
Yes, in this week, I have read a lot of article of prototype javascript tutorial.
Since there is a lot technical  term or word on those article that is hard to
understand what is advantage of using prototype

Until now, I just know , the advatnage of prototype over putting code in function

1-the code in function if it is too big that create a lot memory if
it is used for many times, Using prototype, it can just have one copy for it and use
less memory.

2-No other

I tried find one good example code that  "NOT USE " and "USE" prototye javascript
to implement application  that will help to understand the actual advantage of prototype.
To convince myself I understand it.

last question, do you think for those customer "Bob" and John" if Bob just change
something  property through prototype and John can access the property Bob changed it ?
If so, I found one more advatnage of prototype that is good for two-way communication like
chat application

Rwniceing
0
 
RobOwner (Aidellio)Commented:
Yes when you prototype it copies all the properties including functions to all existing objects of that type
0
 
rwniceingAuthor Commented:
Just reminder for myself, Bob and John description that is from  http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28504085.html#a40280553
for prototype question. I ask here because  I don't understand "this" keyword  usage from a lot of prototype javascript articles so need to clarify for completing the reading.
0
 
RobOwner (Aidellio)Commented:
That's fine you ask it here. Better you break it up and understand all the little bits target than trying to understand it all at once.
Is there anything else I can help you with regarding this question?
0
 
rwniceingAuthor Commented:
Thanks for your reply, could you make comment for
Bob change property by prototye will affect John accessing the same property in
the link , http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28504085.html#a40280553 ?
, just sample code for starting thinking of the advantage
0
 
RobOwner (Aidellio)Commented:
Yes it will affect them both accessing the same object. I can't think of why you would do this but it sounds like you may have an idea?
Like I said above (or in the other question), you would typically only use prototype to add code to objects that you can't, or isn't practical to edit the code.
JQuery for example comes minified. You don't want to be trying to edit that code if you wanted to add something to it. In this case you would use prototype.
0
 
rwniceingAuthor Commented:
As I know for today, prototype-based javascript is trended to be important that Ifound a lot articles on google internet search  talking about this, for example, HTML5 Game using prototype-based. That is why I try to understand its concept first
0
 
RobOwner (Aidellio)Commented:
It will depend on your app  prototype changes things globally at runtime. Whereas objects that are rubbing may just need to change their local variables such as position in an animation. You wouldn't want to use prototype as you want the objects to move independently.
What have you found online?
0
 
rwniceingAuthor Commented:
you type "prototype javascript" on goolge search that you will find it.
0
 
rwniceingAuthor Commented:
For my reminder:

I tried a test in which I replace all "this" keyword with other global object as  var "thisvar" = new Object(); and the result is

v1();  //1- window{}
v2();  //2- window{}
console.log("3-", this.space);  //3- v2
var b= new v1();  //1- v1{space:"v1"}
console.log("4-", this.space);//4- v1
console.log("5-", b.space);// undefined

The result of console.log("4-", this.space); is changed from "4-v2" to 4-v1" since thisvar is global object  and console.log("5-", b.space) is set to undefined that is because the statment in previous post is correct  so b.space is not working  or set to be undefined

When you use the "new" keyword, you are changing the scope and this now refers to the object you've created

<script type="text/javascript">
var thisvar = new Object();
function v1(id){
thisvar.space="v1";
console.log("1-" ,this);
}
function v2(id){
thisvar.space="v2";
console.log("2-" ,this);
}

//--------------------------
function start(id){
v1();  //1- window{}
v2();  //2- window{}
console.log("3-", thisvar.space);  //3- v2
var b= new v1();  //1- v1{space:"v1"}
console.log("4-", thisvar.space);//4- v2
console.log("5-", b.space);//5- v1

}

</script>

Open in new window

0
 
RobOwner (Aidellio)Commented:
The result of console.log("4-", this.space); is changed from "4-v2" to 4-v1" since thisvar is global object
that's exactly right

 and console.log("5-", b.space) is set to undefined that is because the statment in previous post is correct  so b.space is not working  or set to be undefined
not exactly. There is no "space" property of the v1 object so calling b.space should return undefined, in other words "sorry I couldn't find that property"
0
 
rwniceingAuthor Commented:
on the topic post's code there is function v1 and this.space="v1";

funtcion v1(){
this.space="v1";
console.log(this);
}
so it can show "5-v1" for b.space  since var =b=new(this is referring to object v1) and now the function is changed  with "thisvar" global object;

var thisvar = new Object();
funtcion v1(){
thisvar .space="v1";
console.log(this);
}

so b.space is  undefined since thisvar object is NOT referring to v1 object after var b=new , Is it right ?
0
 
RobOwner (Aidellio)Commented:
Yep, I think you've got it now :-)
0
 
rwniceingAuthor Commented:
Why the thisvar can not refer to V1 object but this keyword does after var b=new if both thisvar and this keyword are global object.


Is the reason that this keyword is dfferent object from other global objects set by browser javascript interpreter ?

How make global object of "thisvar" as "this" keyword for a test tutorial ?
0
 
rwniceingAuthor Commented:
I posts a new thread for the last question, Could you take a look ?
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28504310.html
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 12
  • 12
Tackle projects and never again get stuck behind a technical roadblock.
Join Now