this in JavaScript references of recommendations

this

this is a keyword of javascript, and the value of this will change with different functions. But there is always a principle, that is, this refers to the object that calls the function.

1. Definition

1. this is a special object (or this reference) inside a function--it refers to the environment object in which the function data is executed.

2. The this reference is a read-only variable that can be used at any time in the JavaScript code. The this reference refers to (points to) an object, which has the property of automatically changing its reference object according to the context of the code context. Its reference rules are as follows:

In the outermost code, the this reference refers to global objects.

Within a function, the this reference varies depending on how the function is called. As follows

1) The call to the constructor--the this reference refers to the generated object

2) Method invocation--The this reference refers to the recipient object

3) apply or call invocation--The this reference refers to an object specified by an apply or call parameter

4) Other invocations--The this reference refers to a global object

2. According to the above and relevant information on the Internet, the usage of this objects (references) is summarized as follows:

JavaScript is a dynamic language, and the this keyword is executed to determine who it is. So this always points to the caller, that is, a reference to the "calling object". Simply put, this points to the object to which the called method belongs. Depending on how the function is called, this can point to the global object, the current object, or any other object.

1. Global function call, this in global function will point to global object window. (Function Call Mode)

// Code list 1
<script type="text/javascript">
var message = "this in window"; // This 1 Sentences written outside and inside functions are 1 Sample effect 
function func() {
if(this == window){
alert("this == window"); 
alert(message);
this.methodA = function() {
alert("I'm a function");
}
}
}
func(); // If you do not call func Method, the property or method defined in it will not be retrieved  
methodA();
</script>

The call result of func () is this = = window, this in window

The call result of methodA () is I 'm a function

2. Constructor call, that is, instantiate an object in the way of new, and this will point to the object generated by the constructor. (Constructor Invoke Mode)

Listing 2

<script type="text/javascript">
function Func() {
if (this == window) {
alert("this == window");
}
else {
alert("this != window");
}
this.fieldA = "I'm a field";
alert(this);
}
var obj = new Func();
alert(obj.fieldA); //this Points to an object obj
</script>

3. Call of object method, this pointing to the current object. Any function that is used or assigned as a method of an object, the this inside the function is a reference to the object itself. It can also be understood that this is written in an ordinary object, and this points to the object itself. (Method invocation mode)

(Definition of a method: A function that is an object property is called a method.)

// Code list 3
<script type="text/javascript">
var obj = {
x: 3,
doit: function(){
if(this == window){
alert("this == window");
}else{
alert("method is called: " + this.x);
}
}
};
obj.doit(); //this Points to an object obj
</script>

4. Call through the apply or call method, where this points to the incoming object.

apply or call methods can be used to call a method instead of another object. The call method changes the object context of 1 function from the original context to the new object specified by thisObj. If the thisObj parameter is not supplied, the Global object is used as the thisObj. (apply invocation mode)

// Code list 4
<script type="text/javascript">
var obj = {
x: 3,
doit: function(){
alert("method is called: " + this.x);
}
};
var obj2 = {x: 4};
obj.doit(); //3,this Point obj
obj.doit.apply(obj2); //4,this Point obj2
obj.doit.call(obj2); //4,this Point obj2
</script>

5. this in the prototype chain-this in the prototype object and constructor points to the newly created instance object. Using the prototype extension method, an instance of the source object can be obtained using this, and private fields cannot be obtained through the prototype chain.

// Code list 5
<script type="text/javascript">
function Func() {
this.fieldA = "I'm a field";
var privateFieldA = "I'm a var";
}
Func.prototype = {
ExtendMethod: function(str) {
alert(str + " :" + this.fieldA);
alert(privateFieldA); // Error , Private fields cannot be obtained through prototype chain. 
}
};
var obj = new Func();
obj.ExtendMethod("From prototype"); // At this point, the constructor and the this Point to an object obj
</script>

6. this in Closure-Closure: function and this written in function point to the global object window.

6.1 Closures in Objects

// Code list 6
<script type="text/javascript">
var name = "The window";
var obj = {
name: "My Object",
getNameFunc: function(){
return function(){
return this.name;
}
}
};
alert(obj.getNameFunc()()); //The window
</script>

At this point, this in the closure points to the global object window, and only the properties of the global object can be fetched. So what if you want to access the attributes inside the object (variables of external functions)? Save the this object of the external function in a variable that can be accessed by a closure. Look at the following code:

// Code list 7
<script type="text/javascript">
var name = "The window";
var obj = {
name: "My Object",
getNameFunc: function(){
var that = this;
return function(){
return that.name;
}
}
};
alert(obj.getNameFunc()()); //My object
</script>

You can read the variables of the external function by assigning the this of the external function to the that variable.

6.2 Whether you refer to function directly or instantiate an function, the this in the return closure function points to window.

// Code list 8
<script type="text/javascript">
function a() {
alert(this == window);
var that = this;
var func = function() {
alert(this == window);
alert(that);
};
return func;
}
var b = a();
b(); //true, true, [object Window]
var c = new a();
c(); //false, true, [object object]
</script>

7. The function binds an object using the bind () method, and this points to the value passed to the bind () function.

// Code list 9
<script type="text/javascript">
window.color = "red";
var obj = {color: "blue"};
function sayColor(){
alert(this.color);
}
var objSayColor = sayColor.bind(obj);
objSayColor(); //blue
</script>

8. Script segment embedded in the HTML element, which points to the element itself

// Code list 10
<div onclick="test(this)" id="div">Click Me</div>
<script type="text/javascript">
function test(obj) {
alert(obj); //[object HTMLDivElement]
}
</script>

9. Written in the script tag: this is the global object window. This is similar to the global variable 1 of the global function call in point 1.