This reference in JavaScript (recommended) _javascript tips

This

This is a keyword for JavaScript, and the value of this is changed as the function is used differently. But there is always a principle, that is, this refers to the object that calls the function.

I. Definition

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

2. This reference is a read-only variable that can be used at any time in the code of JavaScript. This reference refers to an object that has an attribute that automatically changes its reference object according to the context of the code context. Its rules of reference are as follows:

• In the outermost code, the This reference refers to a global object.

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

1 constructor Call--this reference refers to the generated object

2 method calls the--this reference is a receiver object

3 Apply or call Invoke--this reference refers to an object that is specified by a parameter that has an apply or called

4 other ways of invoking--this references are global objects

Second, based on the above and the relevant information on the Internet, the use of this object (reference) is summarized as follows:

JavaScript is a dynamic language, the This keyword is executed to determine who it is. So this will always point to the caller, that is, a reference to the Call object. The simple point is that the calling method belongs to which object, and this points to that object. 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 points to global object window. (function call mode)

Code Listing 1
<script type= "Text/javascript" >
var message = ' This in window ';//This sentence is written outside the function and inside is the same effect
function func () {
if (this = = window) {
alert ("This = = Window"); 
alert (message);
This.methoda = function () {
alert ("I ' m a function");
}} Func (); If the Func method is not invoked, the property or method defined inside will not get the 
MethodA ();
</script>

The result of the call to Func () is this = = window, this in window

The invocation result of MethodA () is I ' m a function

2. Constructor call, which instantiates an object using new, this points to the object generated through the constructor. (constructor call mode)

Code Listing 2

<script type= "Text/javascript" >
function Func () {
if (this = = window) {
alert ("This = = Window"); c19/>}
else {
alert ("This!= window");
}
This.fielda = "I ' m a field";
alert (this);
}
var obj = new Func ();
alert (Obj.fielda); This point is Object obj
</script>

3, the object method call, this point to the current object. Any function, as long as the function is used or assigned as a method of an object, this inside of the function is a reference to the object itself. It can also be understood that this is written in a normal object, this is the object itself. (Method invocation mode)

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

Code Listing 3
<script type= "Text/javascript" >
var obj = {
X:3,
doit:function () {
if (this = = window) {
alert ("This = = Window");
} else{
alert ("is called:" + this.x);
}}
;
Obj.doit (); This point is Object obj
</script>

4, through the Apply or call method calls, this point to the incoming object.

The Apply or call method can be used to invoke a method instead of another object. The call method can change the object context of a function from the initial context to the new object specified by Thisobj. If the thisobj parameter is not supplied, the Global object is used as a thisobj. (Apply call mode)

Code Listing 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 points to obj
obj.doit.apply (obj2),//4,this to Obj2 obj.doit.call
(OBJ2);//4,this to
Obj2 Script>

5, this in the prototype chain--the prototype object and this in the constructor point to the newly created instance object. Using the prototype extension method, you can use this to obtain an instance of the source object, which cannot be obtained through the prototype chain.

Code Listing 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 retrieved from the prototype chain.
}
};
var obj = new Func ();
Obj. Extendmethod ("from prototype"); This point in the constructor and in the prototype chain points to object obj
</script>

6, the closure of this--closures: write in the function of the function,this point to the Global Object window.

Closure in 6.1 objects

Code Listing 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 can only be taken to the properties of the global object. What about the properties inside the object (variables of the external function) to access? It is OK to keep the This object of the external function in a variable that can be accessed by a closed package. Look at the following code:

Code Listing 7
<script type= "Text/javascript" >
var name = "The window";
var obj = {
name: ' My Object ',
getnamefunc:function () {
var = this;
return function () {return
that.name;
}}}
;
Alert (Obj.getnamefunc () ()); My Object
</script>

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

6.2 Whether it is directly referencing a function or instantiating a function, this in the closure function returned by it points to window.

Code Listing 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, which points to the value passed to the bind () function.

Code Listing 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, embedded in the HTML element script segment, this point to the element itself

Code Listing
<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 refers to the Global object window. This is the same global variable as the 1th global function call.

The above is a small set to introduce the JavaScript in the this reference, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!