Correctly understand the This keyword in javascript

JavaScript has the This keyword, this is closely related to JavaScript 's execution context, and many front-end development engineers are still ambiguous about the This keyword, and this article will take the code to explain the JavaScript the This keyword.

This and the relationship of the object

First look at the following code:

var person = {name: ' Theo Wong ', Gender: ' Male ', getname:function () {console.log (person.name);}}; Person.getname ();

Defines a person object that contains the name, gender property, and a GetName method that outputs the name of the person object. In this case, we can use this to replace the person object in the person object itself, so the above code is the same as the following direct result:

var person = {name: ' Theo Wong ', Gender: ' Male ', getname:function () {console.log (this.name);}}; Person.getname ();

Remember one point:this always points to the object to which the function belongs ! In the example above, the object that getname belongs to is the person object, so this refers to person.

This and global objects

Let's take a look again. In the global object, what this refers to, we know that JavaScript is a scripting language, so JavaScript execution needs to have a hosting environment, in the browser this host environment is the window object, so in the global function, This refers to the Window object (unless you use the New,call,apply method to change the reference relationship of this). Knowing this key point, the following code is good to understand:

var a = 1;console.log (a);//1console.log (THIS.A);//1console.log (WINDOW.A);//1

Many front-end development engineers often use a window before the function name to invoke the function because the global object in the browser is window, and all function variables are in the Window object. So this refers to the Window object in the following code to understand:

var a = 1;function foo () {var b = 2;console.log (this.a+b);//3}foo ();

So, just remember: this always points to the owner of the function object, that is, the value of this is determined by the caller who activated the execution context code, so that the reference relationship of this is understood.

This in the Function builder

When a function is instantiated using the New keyword as a constructor, what is the reference relationship for this? Look at the following code:

var person = function () {this.name = ' Theo Wong ';} var person = new person (); Console.log (Person.name);

The new execution process first executes the constructor of the person [[[construct]] and then assigns the this to the [[call]] method, which can be simply understood as a three-step

1. First create an empty object, like Var obj={}
2. The empty object is then used by the person's call operation, similar to Person.call (obj)
3. Return this after executing person, complete the new procedure, assign a value to the person variable

So after the new processed function, the function caller of this is the person itself, not the window.

This in the nested function

In nested functions, what is the reference relationship for this? Look at the following code:

var myObject = {  func1:function () {     console.log (this);//myobject     var func2=function () {        Console.log ( this); Window        var func3=function () {           console.log (this);//window        } ();     } ();  }}; Myobject.func1 ();

In nested functions, because the execution context of the nested function is window, this refers to the Window object, which is actually a bug in Ecma-262-3, which has been fixed in the latest ecma-262-5.

This in event handling

In JavaScript handling of event functions, the reference relationship of this is even more flapping away. We create a Showvalue function with the following function:

var showvalue = function () {console.log (this.value);};

Now that we have an input, we add the click event to the INPUT element, and when you click Input, the Showvalue function is triggered to see what object the current this refers to.

<input id= "Test" type= "text"/>

Binding events via Dom.onclick

document.getElementById (' Test '). onclick = Showvalue;

Running the code will result in the expected results, although the showvalue is defined in the global object, but when the onclick binding method is used, Showvalue is called as the DOM's OnClick method, so its this should refer to the DOM object, not the The window object.

Written in HTML tags

<input id= "Test" type= "text" onclick= "Showvalue ();"/>

When we click on the DOM, we don't get the correct this, which is why?

This refers to the Window object because the Window object does not have a value defined for value, so it cannot be obtained this.value . Instead of assigning the Showvalue function to the onclick of the DOM object, this is a reference! So the code above is the same as the following code:

document.getElementById (' Test '). onclick = function () {    showvalue ();};

Based on the This value of the JavaScript nested function above, we can conclude that the current showvalue is actually a window.

Monitoring by Addeventlistener/attachevent binding events

<input type= "text" id= "test"/><script type= "Text/javascript" >var dom = document.getElementById (' test '); id = ' window '; function test () {alert (this.id);} Dom.addeventlistener? Dom.addeventlistener (' Click ', Test, false): Dom.attachevent (' onclick ', test);//addeventlistener test//attachevent Window</script>

This is how the binding event listens, attachevent This is the Window object, and AddEventListener is the DOM object. @ The bug~ Gaga brought up by the reincarnation of the demon

Use the call and apply methods to change this

There are two methods in the Function object Prototype (Function.prototype): Call and apply, which can be changed by calling and apply, all of which accept the first parameter as the value of this in the execution context. The difference is that the second parameter of apply is an array, and the parameter that call receives is passed in sequence.

var obj = {name: ' Theo Wong ', desc: ' A front-end Developer '};var getInfo = function () {console.log (THIS.NAME+THIS.DESC);}; Getinfo.call (obj);//theo Wong a front-end developer

Summarize

This is an important keyword for JavaScript, which understands that mastering this keyword in a different execution context refers to a relationship in order to avoid the code making unnecessary mistakes. Learn more about JavaScript's code execution process and its execution context, and recommend reading the lexical scope of JavaScript

Correct understanding of the This keyword in javascript