Introduction to the use of this variable in JS

  • 2020-03-26 21:35:18
  • OfStack

Use of this in JavaScript

In JavaScript, this variable is a difficult keyword to understand, this can be very powerful, full understanding of this knowledge will help us to write object-oriented JavaScript programs can be more comfortable.

The most important thing for this variable is to be able to clarify which object this refers to. Maybe there are some explanations in many materials, but some concepts are too complicated. My understanding is: first analyze which object the function of this is called as, then the object is the object this refers to.

Sample a,
 
var obj = {}; 

obj.x = 100; 

obj.y = function(){ alert( this.x ); }; 

obj.y(); //Pop up 100

This code is very easy to understand. When obj.y() is executed, the function is called as a method of the object obj, so this in the body of the function points to the obj object, so 100 pops up.

Example 2,
 
var checkThis = function(){ 

alert( this.x); 

}; 

var x = 'this is a property of window'; 

var obj = {}; 

obj.x = 100; 

obj.y = function(){ alert( this.x ); }; 

obj.y(); //Pop up 100

checkThis(); //'this is a property of window' pops up.

Why this is a property of window' pops up is a bit of a puzzle. There is a rule in the JavaScript variable scope that says "global variables are properties of the window object." When checkThis() is executed, it is equivalent to window.checkthis (). Therefore, the point of this keyword in the body of the checkThis function becomes the window object, and because the window object has another x property ('thisis a property of window'), 'thisis a property of window' will pop up.

Both of the above examples are relatively easy to understand, because it is easy to determine the direction of the current this variable as long as you determine which object the current function is called as (by which object).

This. X and apply(), call()

Using call and apply, you can redefine the execution environment of the function, that is, the point of this, which is very common in some applications.

Example 3: call()
 
function changeStyle( type , value ){ 

this.style[ type ] = value; 

} 

var one = document.getElementByIdx( 'one' ); 

changeStyle.call( one , 'fontSize' , '100px' ); 

changeStyle('fontSize' , '300px'); //An error occurred because this reference in changeStyle is a window object and the window has no style attribute.

Notice that there are three arguments in changeStyle. Call (), the first of which specifies which object the function will be called by. Specifying one means that the changeStyle function will be called by one, so the this in the body of the function is the one object. The second and third parameters correspond to the type and value parameters in the changeStyle function. The most common effect we see is that the font for the Dom element one is changed to 20px.

Example 4: apply()
 
function changeStyle( type , value ){ 

this.style[ type ] = value; 

} 

var one = document.getElementByIdx( 'one' ); 

changeStyle.apply( one , ['fontSize' , '100px' ]); 

changeStyle('fontSize' , '300px'); //The error occurred for the same reason as in example 3

The use of apply is roughly the same as that of call, except that apply only accepts two arguments. The first argument is the same as that of call, and the second argument must be an array whose elements correspond to the parameters of the function.

Meaningless this use

Example 5:
 
var obj = { 

x : 100, 

y : function(){ 

setTimeout( 

function(){ alert(this.x); } //This here points to the window object, not the obj we expected, so undefined pops up

, 2000); 

} 

}; 

obj.y(); 

How to achieve the desired effect
 
var obj = { 

x : 100, 

y : function(){ 

var that = this; 

setTimeout( 

function(){ alert(that.x); } 

, 2000); 

} 

}; 

obj.y(); //Pop up 100

The event listens for this in the function
 
var one = document.getElementByIdx( 'one' ); 

one.onclick = function(){ 

alert( this.innerHTML ); //This points to the one element, which is pretty simple..

}; 

Note: global variables in js are dynamically added to the instance Window of the Window as its property.

This is a keyword of js, and the value of this will change depending on where the function is used. But there is always a rule that this refers to the object on which the function is called.

1. Pure function call.
 
function test() { 
this.x = 1; 
alert(x); 
} 
test(); 

This is actually a global variable. This is actually the Global object.
 
var x = 1; 
function test() { 
alert(this.x); 
} 
test();//1 

var x = 1; 
function test() { 
this.x = 0; 
} 
test(); 
alert(x);//0 

2. As a method call, this refers to the parent object.
 
function test() { 
alert(this.x); 
} 

var o = {}; 
o.x = 1; 
o.m = test; 
o.m(); //1 

3. Called as a constructor. A constructor generates a new object. In this case, this is the object.
 
function test() { 
this.x = 1; 
} 
var o = new test(); 
alert(o.x);//1 

4. Apply call

This points to the first parameter in apply.
 
var x = 0; 
function test() { 
alert(this.x); 
} 

var o = {}; 
o.x = 1; 
o.m = test; 
o.m.apply(); //0 
o.m.apply(o);//1 

When apply has no arguments, it is represented as a global object. So it's going to be 0.

Related articles: