JavaScript Instance Tutorial: Detailed structure function

Source: Internet
Author: User
Tags constructor inheritance return window

Article Introduction: JavaScript scoped Security constructor.

The constructor is actually a function called using the new operator. When called with new, the This object used within the constructor refers to the newly created object instance, as shown in the following example:

function person (name, age, Job) {
    this.name = name;
    This.age = age;
    This.job = job;
}
var person = ("Nicholas", "Software Engineer");

In the example above, the person constructor uses the this object to assign values to three properties: Name, age, and job. When fonts with the new operation, a new person object is created, which is assigned by the colleague. The problem is when the constructor is called without using the new operator. Because the This object is bound at run time, the person () is called directly, and this is mapped to the Global object window, causing an unexpected increase in the Error object properties. For example:

var person = person ("Nicholas", "Software Engineer");
alert (window.name); "Nicholas"
alert (window.age);//29
alert (window.job);//"Software Engineer"

Here, the three attributes originally intended for the person instance are added to the Window object because the constructor is called as a normal function, ignoring the new operator. This problem is caused by the late binding of this object, where this is parsed into a Window object. Because the window's Name property is used to identify the linked target and frame, accidental coverage of the property here may cause other errors on the page. The workaround for this problem is to create a scoped security constructor.
The scope-safe constructor first confirms that the This object is an instance of the correct type before making any changes. If not, a new instance is created and returned. Take a look at the following example:

The function person (name, age, Job) {
    if (this instanceof person)
        {this.name = name;
        This.age = age;
        This.job = job;
    } else {return
        new person (name, age, Job);
    }
}
var Person1 = person ("Nicholas", "Software Engineer");
alert (window.name); ""
alert (person1.name);//"Nicholas"
var person2 = new Person ("Shelby", "ergonomist");
alert (person2.name); "Shelby"

The person constructor in this code adds a check and ensures that the This object is an if statement for the person instance that represents either using the new operator or invoking the constructor in an existing person instance environment. In either case, the initialization of the object works correctly. If this is not called a constructor in the person instance environment. In either case, the initialization of the object works correctly. If this is not an instance of person, the constructor is called again using the new operator and the result is returned. The final result is that the call to the person constructor, regardless of whether or not the new operator is used, returns a new instance of person, which avoids accidentally setting the property on the global object.

Intimate hints about scope-safe constructors. Once you have implemented this pattern, you are locking the environment where you can call the constructor. If you use the constructor to steal the inheritance of the schema and not use the prototype chain, then the inheritance is likely to be corrupted. Here's an example:

function Polygon (sides) {
    if (this instanceof Polygon) {
        this.sides = sides;
        This.getarea = function () {return
            0;
        }}
    else {return
        new Polygon (sides);

}} function Rectangle (width, height) {
    Polygon.call (this, 2);
    This.width = width;
    this.height = height;
    This.getarea = function () {return
        this.with * this.height;}
    ;

} var rect = new Rectangle (5);
alert (rect.sides); Undefined

In this code, the polygon constructor is scope-safe, whereas the rectangle constructor is not. After a new rectangle instance is created, the instance should inherit the sides property of polygon by Polygon.call (). However, because the polygon constructor is scope-safe, this object is not an instance of polygon, so a new polygon object is created and returned. The This object in the rectangle constructor is not growing, and the value returned by the colleague Polygon.call () is not used, so there is no sides attribute in the Rectangel instance.

This problem can be solved if the constructor theft is combined with a prototype chain or a parasitic combination. Consider the following examples:

function Polygon (sides) {
    if (this instanceof Polygon) {
        this.sides = sides;
        This.getarea = function () {return
            0;
        }}
    else {return
        new Polygon (sides);

}} function Rectangle (width, height) {
    Polygon.call (this, 2);
    This.width = width;
    this.height = height;
    This.getarea = function () {return
        this.with * this.height;}
    ;

} Rectangle.prototype = new Polygon ();

var rect = new Rectangle (5);
alert (rect.sides); 2

In this rewrite of the code, a rectangle instance is also a polygon instance, so Polygon.call () executes as intended, eventually adding sides attributes to the rectangle instance.



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.