The This__java in JavaScript language

Source: Internet
Author: User
Tags uppercase letter
This in the Java language

Defining classes in Java often uses the This keyword, in most cases, to avoid naming conflicts, such as defining a point class in the example below, it is natural that you use X,y to name its attributes or member variables, and in the constructor, use X,y to name the arguments, compared to the other names, such as A,b, also more meaningful. This is the time to use this to avoid naming conflicts. Another scenario is to make it easy to invoke other constructors, such as a point defined on the x-axis, whose x value defaults to 0, and when used, we can define a constructor that simply passes in one parameter. In either case, this is the same meaning, which refers to the current object. Listing 1. Point.java

public class Point { 
    private int x = 0; 
    private int y = 0; 
    
    Public point (x, y) { 
        this.x = x; 
        This.y = y; 
    } 
    
    Public point (Y) {This 
        (0, y); 
    } 
 }

Back to this in the JavaScript language of the first page

Because of its run-time binding attributes, the This meaning in JavaScript is much richer, it can be a global object, the current object, or any object, depending entirely on how the function is invoked. There are several ways to invoke functions in JavaScript: As an object method call, as a function call, as a constructor call, and with an apply or call invocation. Below we will discuss the meaning of this by different ways of calling.

Rules: · Outside the outermost, this refers to the global object · Within a function, different objects are called as Object methods depending on how they are called

In JavaScript, a function is also an object, so a function can be a property of an object, at which point the function is called the method of the object, which is naturally bound to the object when the invocation is used. Listing 2. Point.js

var point = { 
 x:0, 
 y:0, 
 moveto:function (x, y) { 
     this.x = this.x + x; 
     This.y = This.y + y; 
     } 
 }; 

 Point.moveto (1, 1)//this bound to the current object, that is, the point object
as a function call

A function can also be called directly, at which point this is bound to a global object. In the browser, window is the global object. For example, the following example: When a function is called, this is bound to a global object, and then the assignment statement, which is tantamount to declaring a global variable implicitly, is clearly not what the caller wants. Listing 3. Nonsense.js

function Makenosense (x) { 
 this.x = x; 
 } 

 Makenosense (5); 
 x;//x has become a global variable with a value of 5

For an intrinsic function, a function declared in the body of another function, this way of binding to the global object creates another problem. We still take the point object mentioned above as an example, this time we want to define two functions within the MoveTo method, and translate the x,y coordinates separately. The result may be unexpected, not only the point object does not move, but more than two global variable x,y. Listing 4. Point.js

var point = { 
 x:0, 
 y:0, 
 moveto:function (x, y) { 
     //internal function
     var MoveX = function (x) { 
     this.x = x ;//this bind to where.
    }; 
    Inner function
    var movey = function (y) { 
    this.y = Y;//this bound to where.
    }; 

    MoveX (x); 
    Movey (y); 
    } 
 ; 
 Point.moveto (1, 1); 
 Point.x; ==>0 
 point.y;//==>0 
 x;//==>1 
 y;//==>1

This is a JavaScript design flaw, the correct design is that the internal function of this should be bound to its outer function corresponding to the object, in order to circumvent this design flaw, clever JavaScript programmer came up with a variable substitution method, by convention, the variable is generally named that. Listing 5. Point2.js

var point = { 
 x:0, 
 y:0, 
 moveto:function (x, y) { 
      var "= this; 
     Internal function
     var MoveX = function (x) { 
     that.x = x; 
     }; 
     Internal function
     var movey = function (y) { 
     that.y = y; 
     } 
     MoveX (x); 
     Movey (y); 
     } 
 ; 
 Point.moveto (1, 1); 
 Point.x; ==>1 
 Point.y;//==>1
called as a constructor function

JavaScript supports object-oriented programming, and unlike the mainstream object-oriented programming language, JavaScript does not have classes (class) concepts, but rather uses a prototype (prototype) approach to inheritance. Correspondingly, the constructors in JavaScript are very special, as are normal functions if you do not use the new call. As another established guideline, the constructor begins with an uppercase letter, reminding the caller to invoke it in the correct manner. If the call is correct, this binds to the newly created object. Listing 6. Point.js

function point (x, y) { 
    this.x = x; 
    This.y = y; 
 }
calling using Apply or call

Let's again reiterate that in JavaScript, functions are objects, objects have methods, and apply and call are methods of function objects. These two methods are exceptionally powerful, allowing you to toggle the context in which the function is executed, that is, the object of this binding. Many of the techniques in JavaScript and the class library use this method. Let's look at a concrete example: listing 7. Point2.js

function point (x, y) { 
    this.x = x; 
    This.y = y; 
    This.moveto = function (x, y) { 
        this.x = x; 
        This.y = y; 
    } 
 } 

 var p1 = new Point (0, 0); 
 var P2 = {x:0, y:0}; 
 P1.moveto (1, 1); 
 P1.moveTo.apply (P2, [10, 10]);

In the example above, we used the constructor to generate an object P1, which has a moveTo method, and another object using the literal object P2, and we see using apply to apply the P1 method to the P2, when this is also bound to the object P2. Another method call has the same function, and the difference is that the last parameter is not uniformly passed as an array, but is passed in separately.

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