What is this in JavaScript (i) _javascript tips

Source: Internet
Author: User

For the perennial use of these object-oriented languages such as C++,c#,java programmers, almost every day and this deal. In these languages, this meaning is very clear, is to point to the current object instance, we use it is quite reassuring. However, in the dynamic language of JavaScript, this has not changed, but the meaning of this is greatly different, the following examples, using the browser for Firefox14.0.1.

First, Hello World O (^▽^) o

I have just started self-study JavaScript this flexible programming language to now, also has more than a year of time.

In this more than a year's time, this language brings me not only is the high work return, but also has many unexpected surprises, lets me such an art student to appreciate the programming charm.

From today onwards, prepare every Monday more my blog, not only to share, but also to encourage themselves.

OK, let's get into today's topic, and today we're going to talk about a more specific object in javascript: this

Small partners who have contacted other object-oriented programming languages (such as java,c,c++, etc.) may be familiar with this.

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

Let's start by saying that he's different from other programming languages.

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

But as a separate pointer, in different situations, point to a different position, which is why we confuse it.

Let's take a look at what it is like in different situations.

1. When the global scope:

This is best understood, that is, under global scope this points to window, that is, under global scope, this is equivalent to window:

Console.log (this = = window); True

Also, because at this point, this is equivalent to window, the variable we declare in the global scope points to this:

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

Of course, we have another way of declaring 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, this is equivalent to adding or changing the value of the property to the global

It seems to be very simple, is not a window equivalent to the object.

Of course, if this is just the case, this may not be necessary at all.

And the most troubling part of this is that it's in different scopes, and its shape is very different.

2. When in a function:

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

So here's why we're talking about this when we're in a function, not a local scope, and first we need to know what the function is.

In JavaScript, function acts as a special object in JS: Functions, which have different forms.

What we usually see is:

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

In this form, the inside of 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's often easy to make mistakes, and many people feel that when this is already in a function, its current location is the current local scope, so the current point should be this function

However, if you instantiate this function (new), this function will generate a completely new environment, at which point this will also change, and it will point to the instance in which it occurs.

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, and the inside of this also naturally points to the instance object, as the beginning of this is the object pointing to the window, pointing to the instance where it resides

In addition, when we write JavaScript, we usually have a way to call a function, which is to bind events for elements, such as Button.addeventlistener (' Click ', FN, false), etc. if you need to use this in FN , then this points to the event-handling element, which is the button

Note: this as the keyword, you cannot copy it.

Unknowingly, writing is also much better, in fact this has more forms, such as prototype, such as in the HTML, such as in the DOM event handler, due to the length of time, here will not continue to Aushu, the next time I will talk about this in prototype

This is in my understanding as a pointer, it will have a more important position in the prototype prototype chain, but not within the scope of our today, do not do too much explanation

After the basic will be every Monday, as a novice JavaScript, but also want to write something to share with more people, but also hope that from the idea of summing up more experience!

about what this is in JavaScript (a), every Monday will be updated for everyone, as a beginner of JavaScript, want to write something to share with friends around, but also want to exchange learning experience. Thank you!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.