In-depth understanding of this pointer in Javascript

Source: Internet
Author: User

This pointer is an important concept in object-oriented programming. It represents the currently running object. When implementing the object method, you can use the this pointer to obtain the reference of the object itself.

Unlike other object-oriented languages, this pointer in Javascript is a dynamic variable. This pointer in a method does not always point to the object that defines this method, in the previous section, we used the apply and call methods of functions. For ease of understanding, let's look at the following example:

The following is a reference clip:
<Script language = "JavaScript" type = "text/JavaScript">
<! --
// Create two empty objects
VaR obj1 = new object ();
VaR obj2 = new object ();
// Add the property P to both objects, which is equal to 1 and 2, respectively.
Obj1.p = 1;
Obj2.p = 2;
// Add a method to obj1 to display the value of P.
Obj1.getp = function (){
Alert (this. p); // on the surface, this Pointer Points to obj1
// Call the getp method of obj1
Obj1.getp ();
// Make the getp method of obj2 equal to the getp method of obj1
Obj2.getp = obj1.getp;
// Call the getp method of obj2
Obj2.getp ();
// -->

From the code execution results, the pop-up dialog box displays 1 and 2 respectively. It can be seen that the getp function is defined only once and runs on different occasions and shows different running results, which is determined by the change of the this pointer. In the getp method of obj1, this points to the obj1 object, and in the getp method of obj2, this points to the obj2 object, and the property P of both objects is referenced through the this pointer.

It can be seen that the this pointer in Javascript is a dynamically changing variable, which indicates the object currently running this function. By the nature of this pointer, you can better understand the nature of objects in javascript: an object is a set of one or more attributes (methods. Each set element can not only belong to one set, but dynamically belongs to multiple sets. In this way, the this pointer directs to the person who calls a method (set element. In fact, both the apply and call methods described above are implemented by forcibly changing the value of this pointer so that this pointer points to the object specified by the parameter, in this way, the method of one object is run as the method of another object.

Each element (attribute or method) in an object set is also an independent part. There is no difference between a global function and a function defined as an object method, because global functions and variables can be viewed as methods and attributes of window objects. You can also use the new operator to operate an object method to return an object, so that an object method can be defined as a class, the this pointer points to the newly created object. As you can see later, the object name can act as a namespace, which is a technique for object-oriented programming using JavaScript. For example:

The following is a reference clip:
VaR namespace1 = new object ();
Namespace1.class1 = function (){
// Initialize the object code
VaR obj1 = new namespace1.class1 ();

Here we can regard namespace1 as a namespace.

Because of the dynamic variation of object attributes (methods), mutual reference between two attributes (methods) of an object must pass the this pointer. In other languages, this keyword can be omitted. In the above example:

The following is a reference clip:
Obj1.getp = function (){
Alert (this. p); // on the surface, this Pointer Points to obj1

From csdn Forum

Related Article

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: 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.