A detailed description of this in JavaScript

The this in JavaScript is always confusing and should be one of JS's well known pits. Personally also think that JS in this is not a good design, due to this late binding characteristics, it can be a global object, the current object, or ... Some people even don't use this because of the big hole.

In fact, if you fully master this principle of work, nature will not enter these pits. Take a look at what this is pointing to in these cases:

1. This in the global Code

Alert (this)//window

The This in the global scope will point to the global object, even if window is in the browser.

2. As a simple function call

function Foocoder (x) {    this. x= x;} Foocoder (2); alert (x); // global variable x value is 2

Here this points to the global object, which is window. In strict mode, it is undefined.

3. Method calls as Objects

var name = "Clever coder"; var person = {    "Foocoder",    function(sth) {        Console.log ( this. Name + "says" + sth);}    } Person.hello ("Hello World");   Foocoder says Hello World

4. As a constructor

New Foocoder ();

The This within the function points to the newly created object.

var name = "Clever coder"; var person = {    "Foocoder",    function(sth) {        var  function(sth) {            Console.log (this. Name + "says"+ sth);        };        SayHello (STH);    }} Person.hello ("Hello World"); // clever coder says hello world

In an intrinsic function, this is not bound to the outer function object as expected, but is bound to the global object. This is generally considered a design error in JavaScript because no one wants the this in the inner function to point to the global object. The general process is to save this as a variable, which is generally agreed to that or self:

 var  Name = "Clever coder"  var  person = {name: " Foocoder ", hello:  function   (STH) { var  that = this  ;  var  SayHello = function   (STH) {Console.log (that.name  + "says" + STH);        };    SayHello (STH); }}person.hello ( "Hello World"); // foocoder says Hello World   

6. Use call and apply to set this

"World");

Apply and call are similar, except that the arguments that follow are passed in through an array instead of being passed in separately. The method definition for both:

Call (Thisarg [, ARG1,ARG2, ...]);  // parameter list, ARG1,ARG2, ... Apply (Thisarg [, Argarray]);     // parameter array, Argarray

Both are used to bind a function to a specific object, and this will naturally be set to the first parameter explicitly.

simply summarize

Simply summing up the above points, it can be found that only the 6th one is confusing.

In fact, you can summarize the following points:

1. When the function is called as a method of an object, this points to the object.

2. When the function is called as a fade function, this points to the global object (when strict mode is undefined)

3. This in the constructor points to the newly created object

4. This in the nested function does not inherit this from the upper function, and if necessary, it can be saved with a variable.

To summarize the simple point, if this is used in the function, it points to the object only if the function is called directly by an object.

Detailed this in JavaScript