This in javascript _ javascript skills

Source: Internet
Author: User
This keyword in avaScript is used to analyze the meaning of this keyword in different situations in a simple way, the cause of this situation, and the method for binding this in JavaScript tools such as Dojo. It can be said that a correct grasp of the this keyword in JavaScript is a step into the threshold of the JavaScript language. This object has always been a pitfall in js, and it is difficult to determine what it actually points to. However, due to the self experience from C ++ or python, this type of error is often made. Next we will detail the ownership of this object.

Rule1: this in the global environment

The javascript environment is naturally determined by the function. In js, context cannot be separated by code blocks. the environment not wrapped by the function is the global environment. this in the global environment points to the global variable window, let's look at the following example.

The Code is as follows:


Var name = 'jjj ';
Console. log (this. name );
// Jjj will be output successfully

Rule2: this used for method calling

Obviously, this situation is well judged. It is consistent with self in python. this undoubtedly points to the object that calls the method.

The Code is as follows:


Var user = {
Name: 'kkk'
};
User. getName = function (){
Console. log (this. name );
};
User. getName ();
// Kkk output

Rule3: this is used as the constructor.

At this time, this does not need to be said. It is clearly directed to the newly created object. the run of the constructor does not actually create an object, but only initialization. The object has been created before it is run.
The following is an example

The Code is as follows:


Function User (name ){
This. name = name;
}
Var f1 = new User ('kkk ');
Var f2 = User ('kkk ');
Console. log (f1.name); // kkk
Console. log (f2.name); // undefined has no name attribute

Rule4: this in the indirect call

Indirect call refers to the use of apply and call to call functions. At this time, this points to the first parameter in their parameter list.

The Code is as follows:


Var setName = function (name ){
This. name = name;
};
Var user = {level: 2 };
User. apply (setName, 'jjj ');
Console. log (user. name); // jjj

Rule5: this in other cases

Remember that this will not be changed in other cases. this is also the easiest place to make mistakes.

The Code is as follows:


Var name = "clever coder ";
Var person = {
Name: "foocoder ",
Hello: function (something ){
Var sayhello = function (something ){
Console. log (this. name + "says" + something );
};
Sayhello (something );
}
}
Person. hello ("hello world"); // clever coder says hello world

The above code looks strange. Shouldn't this point to person?
We should remember that this in the nested function does not point to the function of nesting it. In this example, this in sayhello does not point to the function corresponding to hello. If we change the example

The Code is as follows:


Hello: function (something ){
Console. log (this. name + "says" + something );
}
// Foocoder says hello world

As you can see, sayhello is not called as a method at this time, so this points to a global object...
The problem arises. The initial example of running node will show undefined says hello world.

Rule6: eval destroys all rules

End with an example.

The Code is as follows:


Var name = "clever coder ";
Var user = {
Name: 'kkk'
};
User. getName = function (){
Console. log (this. name );
};
Var get = user. getName;
Get (); // clever coder

Do you understand?

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.