A deep understanding of the scope of this in JavaScript _javascript tips

People are often confused by this guy when using JavaScript. For most developers with OOP development experience This is an identifier that refers to a common element in the current scope, but it is quirky in JavaScript because it is not fixed, but changes as its execution environment changes. In JavaScript this always points to the object that invokes the method in which it resides.

To give a simple example:

Copy Code code as follows:

function Test () {
alert (this);
}
var obj=function () {
var name= ' testobj ';
}
Obj.objtest=test;
Test ();
Obj.objtest ();

Put this code in HTML to run this page, you will see the first hint of a warning [object window], and then the second warning.

Copy Code code as follows:

var obj=function () {
var name= ' testobj ';
}

We first define a test () method and call the alert () method inside the method to display this, then define an obj function object, add a private field name to it, and add a static method to it Objtest (), This function then points directly to the test () function.

The test () and Obj.objtest () methods are called separately, the first warning box prompts the Window object, and the second prompts the code for the function of obj that we define. This shows that the value of this is different when the test function is executed two times!

This means that when the object that calls the function is different, the inside of the This keyword refers to objects that are different. What is noteworthy here is that JavaScript is an object-based language, and when our variables or functions are defined under the root of the <script></script> tag, the corresponding attributes or methods are added to the Window object. So when we define a function by using function test () {} code, we actually add a new function, the window.test () function, to the Window object.

We can do an experiment:

Copy Code code as follows:

function Test () {
alert (this);
}
alert (test===window.test);

The warning box prompts for true, which means that when we call test () This function is equivalent to calling Window.test (). So when we call the test () function, the object that calls the function is actually a window object, and this refers to the Window object, so the warning window that pops up at alert (this) is [object window]. We will obj.objtest=test the equivalent of pointing obj.objtest () to test (), so when we call the Obj.objtest () function, we call the test () function in obj, so now this refers to the Obj object, The hint is that the function of obj is the code we see.

Speaking of this should also explain the similar, perhaps the above example is too abstract to imagine it can be used in any case, then we now assume a demand, do a close to practical example.

Let's say that all of the hyperlinks in our page are changed to red after the click and are implemented in JavaScript. The general idea should be to get all the <a> tags in the page, and then go through all the <a> tags, to each register a click event, after the event triggered we set its color value to red.

The sample code is as follows:

Copy Code code as follows:

Change color
function ChangeColor () {
This.style.color= ' #f00 ';
}
Initialize, register events for all a tags
function init () {
var customlinks=document.getelementsbytagname (' a ');
For (i in Customlinks) {
You can also use event listeners to register events
Because browsers that are compatible with IE,FF may require more code, you can write your own
Customlinks[i].onclick=changecolor;
}
}
Window.onload=init;

Add this code to the HTML document and add some hyperlinks to the document, and when the hyperlink clicks the color turns red, the This keyword in the ChangeColor () function we defined here refers to the current hyperlink when you click on the hyperlink to send the function. If you call the ChangeColor () function browser directly, you will be prompted to error: ' This.style ' is a null or not a object or a undefined.

I wonder if this will make you understand the This keyword in JavaScript when you're reading the article? Or are you getting impatient? (:P)

In fact, in order to really have a deeper understanding of this problem, you must have a deep understanding of the scope and scope chain of JavaScript.

A scope, as its name implies, refers to the code space in which a property or method has access, and simply the scope of the variable or method that it applies to the code. In most oop, there are public,private,protect three scopes, which are not explained in detail in the three scopes, and there should be an in-depth understanding of OOP experience. What I'm going to say here is that these three scope types are almost meaningless to JavaScript because there is only one public scope in JavaScript, and the scope in JavaScript is maintained in a function. As an example:

Copy Code code as follows:

var test1= ' globle variable ';
function Example () {
var test2= ' example variable ';
alert (test1);
alert (test2);
}
Example ();
alert (test1);
alert (test2);

As we explained earlier, the TEST1 variable here is equivalent to a window property, so it works throughout the window scope, and Test2 is declared inside the example () function, so its scope is maintained within the example () method, If you invoke the Test2 browser outside of the function, you will be prompted for an error. It is not a problem to call Test1 inside example ().

Based on this, let's give another example:

Copy Code code as follows:

var test= ' globle variable ';
function Example () {
var test= ' example variable ';
}
Example ();
alert (test);

What will be the result of this example running? Yes, the warning box prompts "globle variable" because the test variable inside the example () function is scoped to the scope and does not affect the external test variable. What if we remove the var keyword for the example () internal test variable? You can try it on your own.

Speaking of which, there is another concept involved, that is the concept of the scope chain. A scope chain is a path that can determine the value of a variable. As you can see from the example above, the VAR keyword is used to maintain the scope chain, and if the variable uses the var keyword declaration then he can be considered as the endpoint of the scope chain. The definition of the formal parameters of the same function can also play a similar role.

Speaking of which, do you have a clearer understanding of this elf-freak guy? According to its simple interpretation, this always points to the object that calls its function, and by the scope and scope chain, we will clearly determine the true face of this. A simple change in the beginning of that example:

Copy Code code as follows:

function Test () {
alert (this);
}
var obj=function () {
var name= ' testobj ';
}
Obj.objtest=test;
Obj.objtest2=function () {
Test ();
}
Test ();
Obj.objtest ();
Obj.objtest2 ();

What do you think will be prompted? You can run a try (:P);

Since this change is based on the change of the object that called its function, can we force the change of its calling object? The answer is yes, the future article will introduce this part of the content, as well as JavaScript different types of data members to implement, closures and other concepts.

I am in the process of learning some experiences and experience, write out one is to share with you can also examine their own deficiencies, such as writing a question also please criticize the advice, thank you!