JavaScript Tutorial: A confusing keyword this

Article Introduction: discusses the confusing keyword this, and how to determine and set the value of this.

Today's tutorials come from a new book by Cody Lindley, the "JavaScript Initiation Tutorial/JavaScript Enlightenment". He discussed the confusing keyword this, as well as the method of determining and setting the value of this.

Conceptual Overview this
When a function is created, a keyword This is then created (in the background), which is linked to an object, and the function is manipulated in this object. In other words, the keyword This can be used in a function, a reference to an object, and a function is the property or method of that object.

Let's look at this object:

1. <! DOCTYPE html>
2. var cody = {
   
3. Living:true,
   
4. Age:23,
   
5. Gender: ' Male ',
   
6. Getgender:function () {return cody.gender;}
   
7. };
   
8. 
   
9. Console.log (Cody.getgender ()); Logs ' Male '
   
10. 
    
11. </script></body>

Notice that in the function Getgender, because inside the Cody object, we can get the gender property (that is, Cody.gender). You can also use this to get the Cody object, because this is the point to the Cody object.

1. <! DOCTYPE html>
2. var cody = {
   
3. Living:true,
   
4. Age:23,
   
5. Gender: ' Male ',
   
6. Getgender:function () {return this.gender;}
   
7. };
   
8. 
   
9. Console.log (Cody.getgender ()); Logs ' Male '
   
10. 
    
11. </script></body>

This.gender this points to the Cody object, and the Getgender function can manipulate the Cody object.
The subject of this may be a bit confusing, but it doesn't have to be. Just remember, usually, this point is the object that contains the function, not the function itself (with the exception of course, such as keyword New or call () and apply ()).

Important Tips
-keyword This is like the other variable, the only difference is that you can't change it.
-Unlike other arguments and variables passed to a function, this is a keyword (not a property) in the object that calls the function.

How do I determine the value of this?
This is passed to all functions, and its value depends on when the function runtime is invoked. Notice here, because this is a very special place you need to remember.
The MyObject object in the following code has a property sayfoo that points to the function Sayfoo. When you call the Sayfoo function in the global domain, this points to the Window object. When MyObject calls a function, this points to MyObject.

Because MyObject has a property called Foo, which is used here.

1. <! DOCTYPE html>
2. 
   
3. var foo = ' Foo ';
   
4. var myObject = {foo: ' I am Myobject.foo '};
   
5. 
   
6. var sayfoo = function () {
   
7. Console.log (this[' foo ']);
   
8. };
   
9. 
   
10. Give MyObject a Sayfoo property and have it point to Sayfoo function
    
11. Myobject.sayfoo = Sayfoo;
    
12. Myobject.sayfoo (); Logs ' I am Myobject.foo ' 12
    
13. 
    
14. Sayfoo (); Logs ' Foo '
    
15. 
    
16. </script></body>

It is clear that the value of this depends on when the function is invoked. Myobject.sayfoo and Sayfoo both point to the same function, but the Sayfoo () call has different contexts, and this is a different value. Here is a similar code, the Head Object (window) is explicitly used and hopefully useful to you.

1. <! DOCTYPE html>
2. 
   
3. Window.foo = ' Foo ';
   
4. Window.myobject = {foo: ' I am Myobject.foo '};
   
5. Window.sayfoo = function () {! Console.log (This.foo);
   
6. Window.myObject.sayFoo = Window.sayfoo;
   
7. Window.myObject.sayFoo ();
   
8. Window.sayfoo ();
   
9. 
   
10. </script></body>

Make sure that when you have multiple references pointing to the same function, you know clearly that the value of this is Tiaogan with the different context of the function.

Important Tips
-All variables and parameters except this are in the range of static variables (lexical scope).

Within the embedded function this points to the head object
You might want to know what happens when you use this in a function that is embedded in another function. Unfortunately in ECMA 3, this does not follow the rule, it does not point to the object to which the function belongs, but to the head object (the browser's Window object).

In the following code, this in Func2 and func3 no longer points to the MyObject, but the head object.

1. <! DOCTYPE html>
2. var foo = {
   
3. Func1:function (BAR) {
   
4. Bar (); Logs window, not foo
   
5. Console.log (this);//the this keyword would be is a reference to Foo object
   
6. }
   
7. };
   
8. 
   
9. FOO.FUNC1 (function () {Console.log (This)});
   
10. </script></body>

However, in ECMAScript 5, this problem will be corrected. Now, you should be aware of this problem, especially when you pass the value of a function to another function.

Look at the following code, pass an anonymous function to FOO.FUNC1, and when the anonymous function is called in FOO.FUNC1 (the function is nested in another function), this will point to the head object in the anonymous function.

Now you will not forget that if the function containing this is in another function, or is called by another function, this value will point to the head object (again, this will be corrected in ECMAScript 5). )

Resolving problems with nested functions
In order for the value of this to not be lost, you can use a scope chain (scope chain) in the parent function to hold the reference to this. In the following code, using a variable called that, we can save the function context better by using its scope.

1. <! DOCTYPE html>
2. 
   
3. var myObject = {
   
4. MyProperty: ' Icanseethelight ',
   
5. Mymethod:function () {
   
6. var that=this; Store a reference to this (I.e.myobject) in MyMethod scope varhelperfunctionfunction () {//childfunction
   
7. var helperfunction function () {//childfunction
   
8. Logs ' I can-light ' via scope chain because that=this
   
9. Console.log (That.myproperty); Logs ' I Can the Light '
   
10. Console.log (this); Logs Window object, if we don ' t use ' that '
    
11. }();
    
12. }
    
13. }
    
14. 
    
15. Myobject.mymethod (); Invoke MyMethod
    
16. 
    
17. </script></body>

control the value of this
The value of this is usually dependent on the context of the calling function (unless you use the keyword new, which will be introduced later), but you can use apply () or call () to specify the object that this point points to when triggering a function to change/control the value of this. In both ways, it's like saying, "Hey, call the X function, but let the Z object do the value of this." "To do this, the JavaScript default of this value will be changed."

Next, we create an object and a function, and then we trigger the function by call (), so this in the function is pointing to myojbect. This in the MyFunction function operates MyObject instead of the head object, so we change the object that this point in myfunction.

1. <! DOCTYPE html>
2. 
   
3. var myObject = {};
   
4. 
   
5. var myfunction = function (param1, param2) {
   
6. Setviacall () ' This ' points to my Object when the function is invoked
   
7. This.foo = param1;
   
8. This.bar = param2;
   
9. Console.log (this); Logs object{foo = ' foo ', bar = ' Bar '}
   
10. };
    
11. 
    
12. Myfunction.call (myObject, ' foo ', ' Bar '); Invoke function, set this value to MyObject
    
13. 
    
14. Console.log (MyObject)//logs Object {foo = ' foo ', bar = ' Bar '}
    
15. 
    
16. </script></body>

In the above example, we use call (), apply () can also apply to the same use, the difference between the two is how the parameters passed to the function. With call (), the arguments are separated by commas, and the parameters are passed in an array using apply (). The following is the same code, but apply ().

1. <! DOCTYPE html>
2. 
   
3. var myObject = {};
   
4. 
   
5. var myfunction = function (param1, param2) {
   
6. Set via Apply (), this points to me Object when function is invoked
   
7. this.foo=param1;
   
8. THIS.BAR=PARAM2;
   
9. Console.log (this); Logs object{foo= ' foo ', bar= ' bar '}
   
10. };
    
11. 
    
12. Myfunction.apply (MyObject, [' foo ', ' Bar ']); Invoke function, set this value
    
13. Console.log (MyObject); Logs Object {foo = ' foo ', bar = ' Bar '}
    
14. 
    
15. </script></body>

Use this in a custom constructor
When the function is triggered with the keyword new, the value of this-because it is declared in the constructor-points to the instance itself. To put it another way: in a constructor, we can use this to specify the object before the object is actually created. It appears that the change of this value is similar to call () or apply ().

Below, we constructed a constructor person,this point to the object that was created. When the object of person is created, this points to the object and places the property name inside the object, which is the value of the parameter (name) passed to the constructor.

1. <! DOCTYPE html>
2. 
   
3. var person = function (name) {
   
4. this.name = Name ' JohnDoe '; This is refer to the Instanc ecreated
   
5. }
   
6. 
   
7. var cody = new Person (' Cody Lindley '); Create a instance, based on person constructor
   
8. 
   
9. Console.log (Cody.name); Logs ' Cody Lindley '
   
10. 
    
11. </script></body>

Thus, when the constructor is triggered with the keyword new, this points to the object to create. So if we don't use the keyword new,this the value will point to the context that triggers the person--this is the head object. Let's take a look at the following code.

1. <! DOCTYPE html>
2. 
   
3. var person = function (name) {
   
4. This.name=name ' JohnDoe ';
   
5. }
   
6. 
   
7. var cody = person (' Cody Lindley '); Notice we did not use ' new '
   
8. Console.log (Cody.name); Undefined, the value is actually set at Window.name
   
9. Console.log (Window.name); Logs ' Cody Lindley '
   
10. 
    
11. </script></body>

This point within the prototype method points to the constructed instance
When a method is used as the prototype property of a constructor, this in this method points to an instance of the triggering method. Here, we have a constructor for person () that requires the full name of the person, in order to get full name. We have added a Whatismyfullname method to the Person.prototype, and all the person instances inherit the method. This in this method points to the instance that triggered the method (and its properties).

I created two person objects (Cody and Lisa) below, and the inherited Whatismyfullname method contains this to point to this instance.

2. <! DOCTYPE html>
4. 
   
6. var person = function (x) {
   
8. if (x) {this.fullname = x};
   
10. };
    
12. 
    
14. Person.prototype.whatIsMyFullName = function () {
    
16. return this.fullname; ' This ' refers to the instance created from person ()
    
18. }
    
20. 
    
22. var cody = new Person (' Cody Lindley ');
    
24. var Lisa = new Person (' Lisa Lindley ');
    
26. 
    
28. Call the inherited Whatismyfullname method, which uses this to refer to the instance
    
30. Console.log (Cody.whatismyfullname (), Lisa.whatismyfullname ());
    
32. 
    
34. /* The prototype chain is still in effect, so if the instance does not have a
    
36. FullName property, it'll look for it in the prototype chain.
    
38. Below, we add a FullName property to both the person prototype and the Object
    
40. Prototype. I'm here for your notes. */
    
42. 
    
44. Object.prototype.fullName = ' John Doe ';
    
46. var john = new Person (); No argument is passed so fullName are not added to instance
    
48. Console.log (John.whatismyfullname ()); Logs ' John Doe '
    
50. 
    
52. </script></body>

Using This,this in a method within a prototype object points to an instance. If the instance does not contain attributes, the prototype lookup begins.
Tips

-If this object does not contain the property that you want to find, then the law applicable to any attribute is also applicable here, that is, the property is "looking" along the prototype chain (prototype chain). So in our case, if the instance does not contain the FullName attribute, then fullName looks for Person.prototype.fullName and then Object.prototype.fullName.