What is this in JavaScript?

Source: Internet
Author: User

Programmers who use these object-oriented languages, such as C ++, C #, and Java, are dealing with this almost every day. In these languages, the meaning of this is very clear, that is, pointing to the current object instance, we are also quite comfortable with using it. However, in the dynamic JavaScript language, this is not changed, but its meaning is greatly different. The following example shows how to use the browser Firefox14.0.1.
Example 1:
(1) Source Code
[Html]
<! DOCTYPE html>
<Html>
<Body>
<Script>
Alert (this );
</Script>
</Body>
</Html>
(2) execution result

 
(3) analysis and conclusion
At this time, the JS engine will automatically generate a member function of the window object, put the above Execution Code into this function for execution, this points to the Object window. In this case, it is similar to the instance member functions of C ++, JAVA, and C.
 
Example 2:
(1) Source Code
[Html]
<! DOCTYPE html>
<Html>
<Body>
<Script>
Function f (){
Alert (this );
}
F ();
</Script>
</Body>
</Html>
(2) execution result
 
(3) analysis and conclusion
This example is essentially the same as the example, where f (); is actually equivalent to window. f (); it is also used to call the member function through the window object. At this time, this still points to the window object. In this case, it is similar to the instance member functions of C ++, JAVA, and C.
 
Example 3:
(1) Source Code
 
[Html]
<! DOCTYPE html>
<Html>
<Body>
<Script>
Function f (name ){
This. name = name;
}
Var a = new f ('Ye shife ');
Alert (a. name );
</Script>
</Body>
</Html>

(2) execution result

 
(3) analysis and conclusion
At this time, f () is executed as a constructor. this in the function body points to the newly constructed object. At this time, it is similar to the constructor of C ++, JAVA, and C.
 
Example 4:
(1) Source Code
[Html]
<! DOCTYPE html>
<Html>
<Body>
<Script>
Function f (){
Alert (this. name );
}
F. apply ({name: 'Ye shife '});
</Script>
</Body>
</Html>
 
(2) execution result

(3) analysis and conclusion
When you use the apply method, this in the function is controlled by parameters. The first parameter of apply () specifies the value of this. This feature does not exist in C ++, JAVA, and C.
Example 5:
(1) Source Code
[Html]
<! DOCTYPE html>
<Html>
<Body>
<Script>
Var name = 'Liu Xiang ';
Var a = {name: 'Ye shife '};
A. f = function (){
Alert (this. name );
(Function (){
Alert (this. name );
})();
}
A. f ();
</Script>
</Body>
</Html>
 
(2) execution result

 
(3) analysis and conclusion
The f () function is executed as a member function of object a. Therefore, this in function f points to object a. The nested anonymous function does not display the specified object, it automatically belongs to the window object and is executed as a member function of the window. Therefore, this in the function points to the window.
Summary:
(1) In JavaScript, the executed code must be put into the function. If the function is not displayed, the code will be automatically put into a member function of window;
(2) JavaScript Functions are all member functions and must belong to an object. If this object is not specified for display, this function belongs to the window object;
(3) There are three methods to execute JavaScript Functions. One is to call the function as a member function. At this time, this in the function body points to the object to which the function belongs, and the other is to call the function as a constructor, at this time, this in the function body points to the newly created object through this constructor; 3 is called through apply or call. At this time, this in the function body is controlled by parameters.
(4) The point of this is not related to the syntax and position of the defined function, but only to the method in which the function is called.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.