JavaScript object-oriented-create an object using the factory method and constructor Method

Source: Internet
Author: User
In the previous article, we introduced how to create a simple JavaScript Object. The biggest problem with a simple js object is that there is no class constraint and it cannot be reused. There is no such convention, this operation may cause problems. So people borrowed a factory pattern from the design pattern to create JavaScript objects. In the previous article, we introduced how to create a simple JavaScript Object. The biggest problem with a simple js object is that there is no class constraint and it cannot be reused. There is no such convention, this operation may cause problems. So people borrowed a factory pattern from the design pattern to create JavaScript objects.

Create a JavaScript Object using the factory Method

The idea of the factory method is to create an object in a function, set the corresponding attributes and methods for the object, and finally return the object. Encapsulate through functions and create objects with specific interfaces. The following is an example of creating a person object using the factory method:

Function createPerson (name, age) {var o = new Object (); o. name = name; o. age = age; o. say = function () {alert (this. name + "," + this. age);} return o;} // instantiate p1 and p2 objects var p1 = createPerson ("Leon", 22); var p2 = createPerson ("Ada", 20 ); // call the say () method of p1 and p2 objects p1.say (); p2.say ();

Although the factory method effectively solves the class problem, there is still another problem. We cannot detect the data types of objects p1 and p2. We use typeof to detect only one Object type:

Lele.info (typeof p1); // console output: Object

If we want to use instanceof to determine the object type, then p1 instanceof ?, What type should I enter after instanceof? We don't know.

Use constructors to create JavaScript objects

Because the factory method cannot determine the specific object type, we have proposed a new method for creating JavaScript objects-constructor method. Constructors in JavaScript can be used to create specific types of objects, such as objects and arrays. js native constructors automatically appear in the execution environment during runtime. You can also customize constructors to define attributes and methods of custom types.

Using constructors to create classes is similar to using factory-based methods to create classes. The biggest difference is that the function name is the class name. Generally, the first letter of the class is capitalized according to the programming specification. When you use a constructor to create a class, you can use the this keyword within the function to define the attributes.

// Create the Person class function Person (name, age) {this. name = name; this. age = age; this. say = function () {console.info (this. name + "," + this. age) ;}}// use the new keyword to create the object var p1 = new Person ("Leon", 22); var p2 = new Person ("Ada", 20 ); // call the object method p1.say (); p1.say ();

As shown in the code above, after the class is created, we can use the new keyword to instantiate the object.

The constructor solves the problem of object type detection. We can use the instanceof keyword to determine whether the object is of the Person type:

Console.info (p1 instanceof Person); // displayed on the console: true console.info (p2 instanceof Person); // displayed on the console: true

In addition, we can also use the constructor keyword to check whether the object's constructor is of the Person type:

Console.info (p1.constructor = Person); // displayed on the console: true console.info (p2.constructor = Person); // displayed on the console: true

You can also print out the constructors p1 and p2 for comparison:

console.info(p1.constructor);console.info(p2.constructor);

The problem caused by using the constructor method is that each object will have a method copy. If there are many object methods, it will occupy a large amount of memory space.

In some advanced compiled object-oriented programming languages (such as Java), object methods are dynamically generated in the stack zone at runtime, and they do not occupy memory. In Javascript, the object created using the constructor method, each method in the object is a copy of the class method. If the object contains a large number of methods, it will occupy a large amount of memory space.

We can put the methods of the class into the global variables for definition, so that the methods in the class can point to the same function. The Code is as follows:

// Create the Person class function Person (name, age) {this. name = name; this. age = age; // The class method at this time is a global method reference this. say = say;} // function say () {alert (this. name + "," + this. age );}

By setting the class method as a global method, you can solve the problem that the methods in the object occupy the memory space. At this time, all the methods in the object created by the constructor point to the same global function.

However, if all the methods are set as global functions, these functions can be called by window, which breaks the object encapsulation. If an object has a large number of methods, this will lead to a large number of global functions in the code, which is not conducive to our development.

To solve these defects in the constructor method, we need to use a prototype to create objects. The next article will introduce how to use a prototype to create JavaScript objects.

The above is JavaScript object-oriented-use the factory method and constructor method to create the object content. For more information, see PHP Chinese Network (www.php1.cn )!

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.