Javascript object-oriented: several common methods for creating objects (factory mode, constructor mode, and prototype mode) _ javascript skills

The syntax of JS is very flexible. There are several different methods for creating simple objects. These too flexible places are sometimes confusing. Let's take a look at several common methods for creating objects in JS today. In the previous article, we introduced the javascript object-oriented basics, this article continues to learn about javascript object-oriented in depth. JS syntax is very flexible, and there are several different methods for simple object creation. These too flexible places are sometimes confusing. Let's sort out several common methods for creating objects in JS today.

Preface

Although Object constructor or Object literal can be easily used to create an Object, this method has an obvious disadvantage: using an interface to create multiple objects produces a lot of redundant code. Therefore, to solve this problem, people began to use the following methods for common objects.

Factory Model

This mode abstracts the specific process of creating an object and uses functions to create details of the object with specific interfaces.

Function cPerson (name, sex, age) {var o = new Object (); o. name = name; o. sex = sex; o. age = age; o. show = function () {console. log (this. name, this. age, this. sex);} return o;} var p1 = cPerson ('Qian long', 'male', '000000'); p1.show (); var p2 = cPerson ('chutian ', 'femal', '14'); p2.show ();

Factory mode test

Factory method problems: Using factory mode, you can create an object containing all information and call this function countless times. Although it solves the problem of creating multiple similar objects, it does not solve the problem of Object Recognition (that is, how to know the type of an object)

Constructor Mode

Function CPerson (name, sex, age) {// note that the first letter of the constructor is capitalized this. name = name; this. sex = sex; this. age = age; this. show = function () {console. log (this. name, this. age, this. sex) ;}} var p1 = new CPerson ('Qian long', 'mal', '000000'); p1.show (); var p2 = new CPerson ('chutian ', 'femal', '14'); p2.show ();

Test the constructor mode.

Note that the constructor and the factory mode are somewhat different, as shown below:

Upper-case Constructors

No explicit object Creation

Assign attributes and methods to this object.

No return Statement

In addition, calling the constructor in this way will take a few steps.

Create a new object

Assign the scope of the constructor to this object (so this points to this object)

Execute the code in the constructor (that is, the process of adding attributes and methods to the new object)

Returned object

Note: constructor is actually not much different from common functions. The only difference is that the calling method is different. The following shows several different call methods:

// Call method 1 new Method var p1 = new CPerson ('qianlong ', 'mal', '123'); p1.show (); // Qian Long 100 male // call method 2 CPerson ('Qian long ', 'male', '123'); window. show () // Qian Long 100 male note attributes and methods will be set to the window Object // call method 3 call var obj = new Object () in the scope of another Object (); CPerson. call (obj, 'qianlong ', 'male', '123'); obj. show (); // Qianlong 100 male in obj Scope

Constructor problems: the main problem with using constructor is that each method must be re-created on each instance. The show methods are available for p1 and p2, but not an instance of the same Function, because function is also an object in js. Therefore, the show methods they all share are not equal.

Prototype

Each function has a prototype attribute, which is a pointer pointing to an object. The purpose of this object is to include attributes and methods that can be shared by all instances of a specific type. That is, the prototype object of the object created by calling the constructor.

The advantage is that all object instances can share their attributes. You do not need to define instance information in the constructor.

Function CPerson () {} CPerson. prototype. name = 'qianlong '; CPerson. prototype. sex = 'mal'; CPerson. prototype. age = 100; CPerson. prototype. show = function () {console. log (this. name, this. age, this. sex);} var p1 = new CPerson (); p1.show (); // qilong 100 male var p2 = new CPerson (); p2.show (); // Qian Long 100 male console. log (p1.show = p2.show) // true

The preceding content describes several common methods for creating objects (factory mode, constructor mode, and prototype mode) in js object-oriented mode.