Web front-end tutorials how JavaScript creates objects

Source: Internet
Author: User

Today we're going to talk about JavaScript's object-oriented technology in the basic JavaScript tutorial, and this time we'll learn a bit more about the object-oriented Javascrip object-oriented objects, some of the terms for objects are not introduced here, and friends who don't know can see for themselves.

Using pre-defined objects is only part of the ability to object-oriented languages, and what is truly powerful is the ability to create your own dedicated objects.

ECMAScript has many ways to create objects.

An original way

Because the properties of an object can be dynamically defined after the object is created, many developers write code similar to the following when JavaScript was first introduced:

[JavaScript]

1. var Car = new Object ();

2. Car.color = "Blue";

3. car.doors = 4;

4. Car.mpg = 25;

5. Car.showcolor = function () {

6. return this.color;

7.};

8. document.write (Car.showcolor ());//output: Blue

In the code above, create the object car. It then sets several properties: It is blue, has four doors, and can run 25 miles per gallon of oil. The last property is actually a pointer to a function, which means that the property is a method. After executing this code, you can use the object car. But here's the problem, you might need to create more than one instance of car, which will cause us to repeat a lot of similar code, which can be cumbersome.

Two factory ways

To solve the problem of several similar object declarations above, the developer creates a factory that can create and return objects of a particular type. This is done in order to solve the problem of a large number of repetitions of instantiated objects.

(1) Non-parametric Factory mode

For example, the function Createcar () can be used to encapsulate the action of creating a Car object listed earlier:

[JavaScript]

1. function Createcar () {

2. var tempcar = new Object ();

3. Tempcar.color = "Blue";

4. tempcar.doors = 4;

5. Tempcar.mpg = 25;

6. Tempcar.showcolor = function () {

7. return this.color;

8.};

9. return tempcar;

10.};

var Car1 = Createcar ();

var Car2 = Createcar ();

document.write (Car1.showcolor () + "<br/>");//output: Blue

document.write (Car2.showcolor ());//output: Blue

Here, all the code in the first example is contained in the Createcar () function. In addition, there is an additional line of code that returns the Tempcar object as the function value. Call this function to create a new object and give it all the necessary properties to copy a car object that we explained earlier.

So, with this approach, we can easily create two versions of the car object (CAR1 and CAR2), which have exactly the same properties.

(2) Factory mode with parameters

We can also modify the Createcar () function to pass the default value of each property to it instead of simply giving the property the default value:

[JavaScript]

1. Function Createcar (color,doors,mpg) {

2. var tempcar = new Object ();

3. Tempcar.color = color;

4. tempcar.doors = doors;

5. Tempcar.mpg = mpg;

6. Tempcar.showcolor = function () {

7. return this.color;

8.};

9. return tempcar;

10.};

var Car1 = Createcar ("Red", 4,23);

var Car2 = Createcar ("Blue", 3,25);

document.write (Car1.showcolor () + "<br/>");//output: Red

document.write (Car2.showcolor ());//output: Blue

Add a parameter to the Createcar () function to assign a value to the color, doors, and mpg properties of the car object you want to create. This causes two objects to have the same properties, but with different property values.

The factory approach solves the problem of repeated instantiation, but there is still one problem: In the previous example, each call to function Createcar () creates a new function Showcolor (), which means that each object has its own version of Showcolor (). As a matter of fact, each object shares the same function.

Some developers define methods for objects outside of the factory function, and then point to the method through attributes to avoid this problem:

[JavaScript]

1. function Showcolor () {

2. return this.color;

3.};

4. Function Createcar (color,doors,mpg) {

5. var tempcar = new Object ();

6. Tempcar.color = color;

7. tempcar.doors = doors;

8. Tempcar.mpg = mpg;

9. Tempcar.showcolor = Showcolor;

return tempcar;

11.};

var Car1 = Createcar ("Red", 4,23);

var Car2 = Createcar ("Blue", 3,25);

document.write (Car1.showcolor () + "<br/>");//output: Red

document.write (Car2.showcolor ());//output: Blue

In the above rewritten code, the function Showcolor () is defined before the function Createcar (). Inside Createcar (), give the object a pointer to an already existing showcolor () function. Functionally, this solves the problem of repeating the creation of a function object, but semantically, the function is less like a method of an object. All of these issues trigger the emergence of a developer-defined constructor.

Three-way structure function

Creating a constructor is as easy as creating a factory-style function. The first step is to select the name of the constructor. According to convention, the first letter of the name is capitalized so that it is separated from the name of the variable whose first letter is usually lowercase. In addition to this, the constructor looks much like a factory-style function. Take a look at the following example:

[JavaScript]

1. Function Car (color,doors,mpg) {

2. This.color = color;

3. this.doors = doors;

4. this.mpg = mpg;

5. This.showcolor = function () {

6. return this.color;

7.};

8.};

9. var Car1 = new Car ("Red", 4,23);

var Car2 = new Car ("Blue", 3,25);

document.write (Car1.showcolor () + "<br/>");//output: Red

document.write (Car2.showcolor ());//output: Blue

Below you explain the difference between the above code and the factory method. Instead of creating an object within the constructor, the This keyword is used first. When you use the new operator to construct a function, an object is created before the first line of code is executed, and only this is used to access the object. You can then give the this property directly, which by default is the return value of the constructor (you do not have to explicitly use the return operator). Now, using the new operator and the object name car to create the object is more like creating a generic object in ECMAScript.

Just like a factory-style function, the constructor repeats the generated function, creating a separate version of the function for each object. However, similar to a factory-style function, you can override the constructor with an external function, which, in the same way, makes no sense in semantics. This is the advantage of the following prototype approach.

Web front-end tutorials how JavaScript creates objects

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.