JavaScript This detail _ basics

The value of this is determined at run time

JS in what this represents, this is in the program run according to the context of the environment, can be divided into the following situations.

1. This in the global scope

In the global scope, this points to the Window object.

Console.log (this)//point to Window object

this.x = 5//the equivalent of creating an X
//And this.x = 5 in the global scope:
//var x = 5;
x = 5;

Executing var x=5 in the global scope actually creates a property X for the Window object and makes it equal to 5.

If you define a variable without VAR,JS, the variable is considered a global variable and treated as a property of the Window object.

2. This in the function

There are two functions in JS, directly called functions called ordinary functions, the creation of objects through new functions called constructors.

This in the 2.1 constructor

This point of the constructor points to the object it creates, such as:

The function person (name) {
  this.name = Name;//this point to the object that is created by the functions person
}
var person = new Person ("Chaimm");

2.2 This in the normal function

This of the normal function points to the Window object.
If the above example executes the PEROSN function directly, then this represents the Window object, so the function will create a global name after execution.

function person (name) {
  this.name = name;//this point
to Window} person
("chai");//As normal function, this point to Window object

3. This in the object

object to the current object, such as:

var person = {
  name: ' Chaimm ',
  getname:function () {return
    this.name
  }
}

This in the code above points to the object to which the function GetName belongs.

However, if a function is nested within the function of an object, this function is pointing to window instead of its outer object.

var person = {
  name: ' Chaimm ',
  setname:function (name) {
      this.name = name; This does not represent a person object, but represents a Window object
    } (name);}

In the example above, there is a getname function in the person object, and a function inside the GetName function, which points to the Window object rather than the person object, which is a bug! of JS Generally treated as follows to circumvent this bug:

var person = {
  name: ' Chaimm ',
  setname:function (name) {
    var thar = this;//Assigns this to that
    (function (name) {
      That.name = name;//at this point to the person object
    }) (name);
  }

In the first-level function of the person object, we assign this to the local variable that, and then use that in the second-level function, where that point refers to the person object and can manipulate the property of person.

Note: If you assign a function in an object to a variable and then call the function through that variable, this point in the function points to window rather than the object, as follows:

var person = {
  name: ' Chaimm ',
  getname:function () {return
    this.name
  }
}

Assign the GetName function to a new variable
var newgetname = person.getname;
This function is called with the new variable, and this in this function points to window
newgetname (); If there is no name in the global scope, it returns undefined

4. Use the call and apply function to open the

Both of these functions can manually specify which object the this refers to within the called function.

Defines a constructor
var person = function (name) {
  this.name = "";
  This.setname = function (name) {
    this.name = name;
  }
}

Create two objects
var persona = new Person ("A");
var personb = new Person ("B");

Use the Persona SetName function to modify the Personb Name property
personA.setName.apply (personb,["C"]);

Apply usage

Object A. Function name. Apply (object B, parameter list);
When object B is passed to apply as the first argument to apply, the function of object A, in object A, refers to object B, where the action of the function on this will act on object B, thereby implementing a function that invokes object B with object A.

The above is the JavaScript this information collation, follow-up continue to supplement the relevant information, thank you for your support of this site!