JavaScript object-oriented - creating objects using factory methods and constructor methods

In the previous article, we introduced the creation method of simple JavaScript objects. The biggest problem with simple js objects is that there is no class constraint, so the reuse of objects cannot be realized, and there is no convention that will bring problems during operation. Come to question. So people borrowed a factory pattern from design patterns to create JavaScript objects.

Use factory methods to create JavaScript objects

The idea of ​​​​the factory method is to create an object in a function, then set the corresponding properties 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 using the factory method to create a person object:

function createPerson(name,age){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.say = function(){
    alert(this.name + "," + this.age);
  }
  return o;
}
// 实例化p1和p2对象
var p1 = createPerson("Leon",22);
var p2 = createPerson("Ada",20);
 
//调用p1和p2对象的say()方法
p1.say();
p2.say();

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

console.info(typeof p1);  // 控制台输出：Object

If we want to use instanceof to determine the type of the object, then p1 instanceof?, what type should be filled in after instanceof? We don't know.

Use constructors to create JavaScript objects

Since the factory method cannot determine the specific type of the object, people have proposed a new method of creating JavaScript objects-the constructor method. In JavaScript, constructors can be used to create specific types of objects. For example, these js native constructors such as Object and Array will automatically appear in the execution environment at runtime. We can also customize the constructor to define properties and methods of custom types.

The method of using a constructor to create a class is similar to the method of creating a class based on a factory. The biggest difference is that the name of the function is the name of the class. Usually according to the convention of programming standards, the first letter of a class is capitalized. When using a constructor to create a class, the attribute definition is completed through the this keyword inside the function.

// 使用构造函数方式来创建Person类
function Person(name,age){
  this.name = name;
  this.age = age;
  this.say = function(){
    console.info(this.name + "," + this.age);
  }
}
// 通过new关键字来创建对象
var p1 = new Person("Leon",22);
var p2 = new Person("Ada",20);
// 调用对象的方法
p1.say();
p1.say();

As shown in the above code, after completing the creation of the class, we can instantiate the object through the new keyword.

The method of using the constructor solves the problem of detecting the object type very well. We can use the instanceof keyword to determine whether the object is a Person type:

console.info(p1 instanceof Person);   //控制台显示：true                              
console.info(p2 instanceof Person);   //控制台显示：true

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

console.info(p1.constructor == Person);   //控制台显示：true                              
console.info(p2.constructor == Person);   //控制台显示：true

Or directly print out the constructors of p1 and p2 for comparison:

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

The problem that using the constructor method brings to us is that there will be a copy of the method in each object. If the object has many methods, it will occupy a lot of memory space.

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

We can define the class methods in global variables, so that the methods in the class can point to the same function. The code is as follows:

// 使用构造函数方式来创建Person类
function Person(name,age){
  this.name = name;
  this.age = age;
  // 此时的类方法是一个全局方法的引用
  this.say = say;
}
//将方法设置为全局的方法
function say(){
  alert(this.name + "," + this.age);
}

By setting the class method as a global method, the problem of methods in the object occupying memory space can be solved. At this time, the methods in all objects created through the constructor point to the same global function.

But if all methods are set as global functions, these functions can be called by the window, which destroys the encapsulation of the object, and if an object has a large number of methods, it will cause code There are a large number of global functions in it, which is not conducive to our development.

In order to solve these shortcomings of the constructor method, we must use prototypes to create objects. In the next article, we will introduce the use of prototypes to create JavaScript objects.

The above is the content of JavaScript object-oriented - using factory methods and constructor methods to create objects. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!