What exactly is this in JavaScript (1)_javascript skills

For programmers who use C++, C#, Java and other object-oriented languages ​​all year round, they deal with this almost every day. In these languages, the meaning of this is very clear, that is, it points to the current object instance, and we can use it with confidence. However, in the dynamic language of JavaScript, the way of writing this has not changed, but its meaning is greatly different. The following is an example, using the browser Firefox14.0.1.

First, Hello World o(^▽^)o

It has been more than a year since I first started self-learning JavaScript, a flexible programming language.

In more than a year, this language has brought me not only high job returns, but also many unexpected surprises, allowing me, an art student, to appreciate the charm of programming.

Starting from today, I am going to update my blog every Monday, not only to share, but also to encourage myself.

OK, let’s enter today’s topic. Today we will talk about a special object in javascript: this

Friends who have been exposed to other object-oriented programming languages ​​(such as Java, C, C++, etc.) may be very familiar with this.

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

Let’s first talk about its differences from other programming languages

In JavaScript, this is a special object. Unlike other programming languages, it is a value stored in an instance and points directly to this instance.

But as a separate pointer, pointing to different locations under different circumstances, which is why we confuse it.

Let’s take a look at what forms it looks like under different circumstances

1. When in global scope:

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

console.log(this === window); //true

In addition, since this is equivalent to window at this time, the variables we declare in the global scope will also point to this:

var x = 1;
console.log(this.x);//1
console.log(window.x);//1

Of course, we have another way to declare variables:

x = 0;
function setNum(){
x = 1;
};
console.log(this.x);//0
setNum();
console.log(this.x);//1

When declaring a variable without using var or let, it is equivalent to adding or changing the attribute value of global this

It seems very simple, isn’t it just an object equivalent to window?

Of course, if that were all, this might not even need to exist.

The most troublesome part of this is that it has completely different shapes in different scopes

2. When in a function:

By the time we get here, this trap has gradually been revealed

Why is it said that it is in a function rather than in a local scope? To talk about this, first we need to understand what a function is

In javascript, function is a special object in js: function, which has different forms

What we usually see:

function set(){
  var x = 0;
};

In this form, the internal this is the same as the global scope, pointing directly to the window, so its form is still equivalent to window.

var x = 0;
function num(){
  this.x = 1;
}
console.log(this.x);//0
num();
console.log(this.x);//1

It is often easy to make mistakes here. Many people think that when this is already in a function, its current location is the current local scope, so it should be pointing to this function

However, if you instantiate this function (new), this function will generate a brand new environment, and this in this instance will also change accordingly, and it will point to the instance where it is located.

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, after instantiation, this function becomes an instance object, and the this inside it naturally points to this instance object, just like the this at the beginning points to the window object, it points to where it is. Example of

In addition, when we write javascript, we usually have a way to call functions, which is to bind events to elements, such as button.addEventListener('click', fn, false), etc., if needed in fn If this is used, then this points to the event processing element, which is button

Note: this is a keyword, you cannot overwrite it.

Unconsciously, I have written much better. In fact, this has more forms, such as prototype, such as in HTML, such as in the DOM event handler. Due to the length, I will not continue here. Next time I will talk about this
in prototype

In my understanding, this is a pointer, and accordingly it will have a more important position in the prototype chain, but it is not within our scope today, so I won’t explain it too much for now

From now on, I will basically update every Monday. As a newbie in JavaScript, I also hope that what I write can be shared with more people, and I hope to summarize more experiences from everyone’s thoughts!

Regarding what exactly this is in JavaScript (1), I will update it every Monday. As a newbie in JavaScript, I hope that what I write can be shared with friends around me, and I hope to exchange learning experiences with each other. Thanks!