Introduction to the use of this variable in JS_Basic knowledge

The use of this in JavaScript

The this variable is an elusive keyword in JavaScript. This is very powerful. Fully understanding the relevant knowledge of this will help us write object-oriented JavaScript programs. Be able to do it with ease.

The most important thing about this variable is to be able to clarify which object this refers to. Maybe a lot of information has its own explanation, but some concepts are a bit complicated. My understanding is: first analyze which object the function in which this is located is called as a method, then the object is the object referenced by this.

Example 1,

Copy code The code is as follows:

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 function body points to the obj object. So 100 will pop up.

Example 2,

Copy code The code is as follows:

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(); //Pop up 'this is a property of window'

Why does 'this is a property of window' pop up here? Maybe Somewhat confusing. There is a rule in JavaScript variable scope that "global variables are properties of the window object". When checkThis() is executed, it is equivalent to window.checkThis(). Therefore, at this time, the point of the this keyword in the checkThis function becomes the window object, and because the window object has another x attribute ('thisis a property of window' ), so 'this is a property of window' will pop up.

The above two examples are relatively easy to understand, because as long as you determine which object the current function is called as a method (which object is called), you can easily determine the current this variable. Point.

this.x and apply(), call()

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

Example 3: call()

Copy code The code is as follows:

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 in changeStyle refers to window object, and window has no style attribute.

Note that there are three parameters in changeStyle.call(). The first parameter is used to specify which object the function will be called. One is specified here, which means that the changeStyle function will be called by one, so this point in the function body is the one object. The second and third parameters correspond to the two formal parameters type and value in the changeStyle function. The most common effect we see is that the font of Dom element one becomes 20px.

Example 4: apply()

Copy code The code is as follows:

function changeStyle( type , value ){

this.style[ type ] = value;

}

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

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

changeStyle('fontSize' , '300px'); //An error occurred, the reason is the same as Example 3

The usage of apply is roughly the same as call, with only one difference. apply only accepts two parameters. The first parameter is the same as call. The second parameter must be an array. The elements in the array correspond to functions. formal parameters.

Meaningless (weird) use of this

Example 5:

Copy code Code As follows:

var obj = {

x : 100,

y : function(){

setTimeout(

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

, 2000);

}

};

obj.y();

How to achieve the desired effect

Copy code The code is as follows:

var obj = {

x : 100,

y : function(){

var that = this;

setTimeout(

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

, 2000);

}

};

obj.y(); //pop 100

This in the event listening function

Copy code The code is as follows:

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

one.onclick = function(){

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

};

Note: Global variables in js will be dynamically added to the instance window of Window as its attributes.

This is a keyword in js. The value of this will change as the function is used in different situations. But there is always a principle, that is, this refers to the object that calls the function.

1. Pure function call.

Copy code The code is as follows:

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

In fact, this here is the global variable. You can clearly understand by looking at the following example. In fact, this is the global object Global.

Copy code The code is as follows:

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, then this refers to the superior object.

Copy code The code is as follows:

function test() {
alert(this. x);
}

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

3. Called as a constructor. The so-called constructor function is to generate a new object. At this time, this refers to this object.

Copy code The code is as follows:

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

4. apply calls

this points to is the first parameter in apply.

Copy code The code is as follows:

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 parameters, it is represented as a global object. So the value is 0.