Javascript this details, javascriptthis

Javascript this details, javascriptthis

The value of this is determined at runtime.

What exactly does this represent in JS? this is determined by the context when the program is running. It 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 the window object this. x = 5 // create an x in the global scope // with this. equivalence of x = 5: // var x = 5; // x = 5;

Run var x = 5 in the global scope to create an attribute x for the window object and make it equal to 5.

If var is not added when a variable is defined, JS considers the variable as a global variable and treats it as a property of the window object.

2. this in the function

There are two types of functions in JS. The directly called functions are called common functions, and the functions that create objects through new are called constructor functions.

2.1 this in the constructor

This Of the constructor points to the object it creates, such:

Function Person (name) {this. name = name; // this points to the object created by this function. person} var person = new Person ("chaimm ");

2.2 this in common functions

This of a common function points to a window object.
If you run the Perosn function directly in the preceding example, this indicates the window object. Therefore, a global name is created after the function is executed.

Function Person (name) {this. name = name; // this points to window} Person ("chai"); // runs as a common function, and this points to the window object

3. this in the object

This in the object points to the current object, for example:

var person = {  name : "chaimm",  getName : function(){    return this.name;  }}

In the above Code, this points to the object to which the function getName belongs.

However, if another function is nested in the function of an object, this function points to a window instead of an outer object.

Var person = {name: "chaimm", setName: function (name) {(function (name) {this. name = name; // this does not represent the person object, but the window object}) (name );}}

In the above example, the person object has a getName function, and the getName function has a function internally. this function internally points to the window object rather than the person object, which is a JS bug! This bug is avoided as follows:

Var person = {name: "chaimm", setName: function (name) {var thar = this; // assign this to that (function (name) {that. name = name; // at this time, that points 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. At this time, that points to the person object, you can perform operations on the attributes of person.

Note: If a function in an object is assigned to a variable and then called through the variable, this in the function points to window instead of the object, as shown below:

Var person = {name: "chaimm", getName: function () {return this. name ;}// assign the getName function to a new variable var newGetName = person. getName; // call this function through a new variable. this in this function will point to windownewGetName (); // if there is no name in the global scope, undefined will be returned.

4. Use the call and apply functions to enable this function.

Both functions can manually specify the object to which this inside the called function points.

// Define 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 setName function of personA to modify the name attribute of 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 parameter of apply, this in the function of object A points to object B, in this case, the operation on this function of object A will be applied to object B, thus calling the function of object B using object.

The above is to sort out the javascript this information, and continue to add relevant information in the future. Thank you for your support for this site!