Some tips on this keyword in Javascript _ javascript tips-js tutorial

Source: Internet
Author: User
This article mainly introduces some minor knowledge about the this keyword in Javascript. this article describes the implicit binding of this and varthatthis, if you need it, you can refer to Javascript, which should be one of the most popular cross-platform languages. You have been playing with some interesting things on the front-end and have not mastered the language. I want to add something missing while I am free.

This implicit binding

At the beginning, this was something I was confused about. I didn't understand it when I first saw it. Then, in a similar case, the same problem can be solved in a similar way. Then try to clarify the knowledge to facilitate searching.

This is a Javascript design error, but it seems that this error is inevitable. functions are objects, arrays are objects, and so on. Reference The example in Javascript: The Good Parts

The Code is as follows:


Function add (a, B) {return a + B}
Var sum = add (3, 4 );
Console. log (sum); // sum = 7

The result of sum is 7.

The Code is as follows:


> Typeof add
> 'Number'


Here we can see that the add type is a numerical value.

When a function is called in this mode, this is bound to a global variable.
That is, in the current environment, we can call this

The Code is as follows:


This. add (3, 4)


This is the implicit binding of this, and this will be bound in different ways.

The Code is as follows:


Var hello = function (){
Return "Hello," + this. name;
};
Name = 'eas ';
Console. log (hello ());


Then we will get Hello, this. When

The Code is as follows:


Var hello = function (){
Return "Hello," + this. name;
};
Var user = {
Hello: hello,
Name: 'phodal ',

};
Console. log (user. hello ());


In this case, the hello in the user points to the hello function, and in our understanding, how is this possible, so it is a Bug.

If we define a variable in this method and assign this to it, the internal function can access this through that variable.

Var that = this

So when the situation is a little more complex, we need to use:

The Code is as follows:


Vat that = this;


Tips:

1. The scope of this variable is always determined by its nearest closed function.
2. Use a local variable (such as me, self, that) to make this binding available internally.

A simple example:

The Code is as follows:


Var M = function (){
This. name = "M ";
};

Var MM = function (){
Z = new M ();
This. name = "MM ";

Z. printName = function (){
Console. log (this. name );
};
Return z. printName ();
};

Var mm = new MM;


This points to the M function instead of the MM itself. If we remove this from M, the returned result is undefined. So we will create an alias for the current this scope, such as that or self:

The Code is as follows:


Var MM = function (){
Z = new M ();
This. name = "MM ";
Var self = this;
Z. printName = function (){
Console. log (self. name );
};
Return z. printName ();
};

In this way, a MM is returned. In addition, the bind method of the callback function can be used in es5.

The Code is as follows:


Var MM = function (){
Z = new M ();
This. name = "MM ";
Z. printName = function (){
Console. log (this. name );
}. Bind (this );
Return z. printName ();
};


Bind can bind the method to the receiver.

Others

Another hello, world

Print ('hello') ('World') is encountered in an accidental opportunity, and then 'hello, world' is output '.

The so-called high-order functions seem very useful. If you are interested, please refer to the next article.

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.