Home>

This in JavaScript is always confusing,Should be one of the well-known pits of js. Personally, I think this in js is not a good design.Due to the nature of this late binding,It can be a global object,The current object,Or ... someone does n’t even use this because the pit is big

For programmers who use object-oriented languages ​​such as c++, c#, java, etc. for many years,I deal with this almost every day. In these languages,The meaning of this is very clear,Is pointing to the current object instance,We are also quite assured to use it.However, in the dynamic language of javascript,The writing of this has not changed,But its meaning is greatly different,The following uses examples to illustrate,Use your browser as firefox14.0.1.

First, hello world o (^ ▽ ^) o

I have taught myself Javascript, a flexible programming language, until now,There is also more than a year.

For more than a year,What this language brings me is not only a high return on work,There are many unexpected surprises,Let me be an art student to appreciate the charm of programming.

starting today,Ready to update my blog every Monday,More than just sharing,Encourage yourself.

ok, let ’s get into today ’s topic,Today we talk about a more special object in JavaScript:this

Those who have been exposed to other object-oriented programming languages ​​(such as:java, c, c++, etc.) may be familiar with this.

But why does it often cause us a lot of trouble in JavaScript?

Let's first talk about his differences from other programming languages

In JavaScript, this is a special object,It's not like other programming languages,Is the value stored in the instance,Point directly to this instance.

But as a separate pointer,Under different circumstances,Pointing to different positions,That's why we confuse it.

Let ’s take a lookWhat kind of form does it have in different situations?

1. In global scope:

This is best understood,That is, in the global scope, this points to window, that is, in the global scope,this is equivalent to window:

console.log (this === window);//true
</pre>
</div>
<p>
In addition, since at this time,this is equivalent to window, so variables we declare in the global scope also point to this:
</p>
<div>
<pre>
var x=1;
console.log (this.x);//1
console.log (window.x);//1
</pre>
</div>
<p>
Of course, we have another way to declare variables:
</p>
<div>
<pre>
x=0;
function setnum () {
x=1;
};
console.log (this.x);//0
setnum ();
console.log (this.x);//1
</pre>
</div>
<p>
When you do not use var or let when declaring a variable, this is equivalent to adding or changing the attribute value to the global this.
</p>
<p>
It still looks simple.
Isn't it just an object equivalent to window.
</p>
<p>
Of course, if that's the case,This may not be necessary at all.
</p>
<p>
The most annoying part of this is that it is in different scopes.
Its shape is also quite different
</p>
<p>
<strong>
2. When in a function:
</strong>
</p>
<p>
When I get here,The trap of this has gradually emerged
</p>
<p>
Why here is when it is in a function instead of a local scope,To talk about this,First we have to understand what the function is
</p>
<p>
In JavaScript, function, as a special object in JS:function, has different forms.
</p>
<p>
What we usually see:
</p>
<div>
<pre>
function set () {
  var x=0;
};
</pre>
</div>
<p>
In this form,The internal this is the same as the global scope,Pointing directly at window, so its form is still equivalent to window.
</p>
<div>
<pre>
var x=0;
function num () {
  this.x=1;
}
console.log (this.x);//0
num ();
console.log (this.x);//1
</pre>
</div>
<p>
This is where mistakes are often prone.
Many people think,When this is already in a function, its current position is the current local scope.
So this function should point to this function
</p>
<p>
However, if you instantiate this function (new), this function will generate a completely new environment,At this time, this in this instance will also change,It will point to the instance it is on.
</p>
<div>
<pre>
num="0";
function setthis () {
  this.num="1";
}
console.log (this.num);//"0"
new setthis ();
console.log (this.num);//"0"
console.log (new setthis (). num);//1

This is because,When instantiated,This function becomes an instance object,The internal this also naturally points to this instance object,As this at the same beginning points to the window object, it points to its instance.

In addition, when we write JavaScript, we usually have a method to call functions,Is the element binding event,For example, button.addeventlistener ("click", fn, false), etc. If this is used in fn, then this points to the event processing element.Which is the button

Note:this as a keyword,You cannot duplicate it.

unconsciously,Written much better,In fact, this has more forms.Prototype, such as in html, such as in the dom event handler,Due to the length,Ao Shu will not continue here,Next time I will talk about this in prototype

this as a pointer in my understanding,Correspondingly, it will have a more important position in the prototype chain of prototypes.But outside our scope today,Do not explain too much

In the future, it will basically be changed every Monday.As a novice in javascript, I also hope that what I write can be shared with more people.I hope to sum up more experience from everyone's thoughts!

  • Previous Java method to find the longest common substring of two strings
  • Next Android programming method to add pictures and text to Button