This
This is a keyword in javascript. The value of this will change depending on the use of the function. 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 the function - it refers to the environment object on which the function is executed.
2. This reference is a read-only variable that can be used at any time in JavaScript code. This reference reference (points to) is an object that has the characteristic that automatically changes its reference object according to the code context. Its citation rules are as follows:
• In the outermost code, this reference refers to a global object.
• Within a function, this reference varies according to the way the function is called. as follows
1) The constructor call -- this reference refers to the generated object
2) Method call -- this reference refers to the receiver object
3) apply or call -- this reference refers to an object specified with the parameters of apply or call
4) Other ways of calling -- this reference refers to the global object
2. Based on the above and relevant online information, the usage status of this object (cited) is summarized as follows:
JavaScript is a dynamic language, and only when this keyword is executed can it be determined. So this always points to the caller, that is, a reference to the "call object". To put it simply, which object the method called belongs to, this points to that object. Depending on the method of function calling, this can point to a global object, the current object, or any other object.
1. Global function calls, this in the global function will point to the global object window. (Function Call Mode)
//Code List 1<script type="text/javascript">var message = "this in window"; //This sentence is written outside the function and inside the function 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 called, the attributes or methods defined in it will not be retrieved by methodA();</script>The result of the call of func() is this == window, this in window
The result of the call to methodA() is I'm a function
2. Constructor call, that is, instantiating an object using new, this will point 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");}else {alert("this != window");}this.fieldA = "I'm a field";alert(this);}var obj = new Func();alert(obj.fieldA); //this points to the object obj</script>3. Calling the object method, this points to the current object. Any function, as long as the function is used or assigned as an object's method, this inside the function is a reference to the object itself. It can also be understood that this is written in a normal object, and this points to the object itself. (Method Call Mode)
(Definition of method: A function as 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 the object obj</script>4. Call this through apply or call method, this points to the passed object.
The apply or call method can be used to call a method instead of another object. The call method changes the object context of a function from the initial context to a new object specified by thisObj. If thisObj parameter is not provided, the Global object is used as thisObj. (apply call 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 points to objobj.doit.apply(obj2); //4,this points to obj2obj.doit.call(obj2); //4,this points to obj2</script>5. This in the prototype chain - the prototype object and this in the constructor point to the newly created instance object. Use the prototype extension method to obtain an instance of the source object 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); //An error occurred, the private field could not be obtained through the prototype chain. }};var obj = new Func();obj.ExtendMethod("From prototype"); //At this pointing object obj in the constructor and prototype chain at this time, obj</script>6. This in the closure -- closure: the function written in the function, this points to the global object window.
6.1 Closures in an object
//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 time, this in the closure points to the global object window, and can only get the properties of the global object. So what should I do if the properties inside the object (variables of external functions) want to be accessed? Just save 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>Assign this to the external function to the that variable, you can read the variable of the external function.
6.2 Whether it is directly referring to the function or instantiating a function, this in the closure function it returns points to the 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 uses the bind() method to bind an object, and this will point to the value passed to the bind() function.
//Code List 9<script type="text/javascript">window.color = "red";var obj = {color: "blue"};function saysColor(){alert(this.color);}var objSayColor = sayColor.bind(obj);objSayColor(); //blue</script>8. The script segment embedded in the HTML element, this 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. Write in script tag: this refers to the global object window. This is the same as the global variable called by the global function at the first point.
The above is a quote from this in JavaScript introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!