Ask Question Forum:

Model Library:2025-02-08 Updated:A.I. model including DeepSeek is online for auto reply question page

Show

ASK RECENT

"this" on javascript

Asked by rwniceing

at 2024-08-23 06:21:27

Point:500 Replies:24 POST_ID:829192USER_ID:12079

Topic:

JavaScript;jQuery;Web Browsers

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>

1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:

Select All Code

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- v2var b= new v1();"  //1- v1{space:"v1"}console.log("4-", this.space);"//4- v2console.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>"

1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:

Select All Code

Author: rwniceing replied at 2024-08-24 00:55:11

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

Author: rwniceing replied at 2024-08-24 00:41:33

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 ?

Expert: Rob Jurd replied at 2024-08-24 00:24:10

Yep, I think you've got it now :-)

Author: rwniceing replied at 2024-08-24 00:07:29

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 ?

Expert: Rob Jurd replied at 2024-08-23 23:55:21

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"

Author: rwniceing replied at 2024-08-23 23:36:39

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- v2var b= new v1();  //1- v1{space:"v1"}console.log("4-", thisvar.space);//4- v2console.log("5-", b.space);//5- v1}</script>

1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:

Select All Code

Author: rwniceing replied at 2024-08-23 23:29:56

you type "prototype javascript" on goolge search that you will find it.

Expert: Rob Jurd replied at 2024-08-23 14:54:28

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?

Author: rwniceing replied at 2024-08-23 08:12:14

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

Expert: Rob Jurd replied at 2024-08-23 07:59:29

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.

Author: rwniceing replied at 2024-08-23 07:52:35

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

Expert: Rob Jurd replied at 2024-08-23 07:46:42

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?

Author: rwniceing replied at 2024-08-23 07:44:00

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.

Expert: Rob Jurd replied at 2024-08-23 07:36:48

Yes when you prototype it copies all the properties including functions to all existing objects of that type

Author: rwniceing replied at 2024-08-23 07:32:24

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

Assisted Solution

Expert: Rob Jurd replied at 2024-08-23 07:17:24

250 points EXCELLENT

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

Author: rwniceing replied at 2024-08-23 07:15:46

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 ?

Accepted Solution

Expert: Rob Jurd replied at 2024-08-23 07:10:02

250 points EXCELLENT

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

Author: rwniceing replied at 2024-08-23 07:03:08

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 ?

Expert: Rob Jurd replied at 2024-08-23 06:50:11

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
}

Author: rwniceing replied at 2024-08-23 06:38:15

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

Expert: Rob Jurd replied at 2024-08-23 06:31:41

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>

1:2:3:4:5:6:7:8:9:10:11:12:

Select All Code

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();

1:2:3:4:5:6:7:8:9:10:11:

Select All Code

Expert: Rob Jurd replied at 2024-08-23 06:27:32

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?

Expert: Rob Jurd replied at 2024-08-23 06:25:46

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

&nbps;

About Us|Service|Pricing

即時新聞:↓

即時新聞:↑

On Balance Volume (OBV):

Ask Question Forum:

"this" on javascript

Video♬:↓

Your Information

Members/Profolio