Summary of common methods for creating classes in JavaScript

The examples in this article describe common methods of creating classes in JS. Share it with everyone for your reference, the details are as follows:
Javascript is an object-based language, and almost everything you encounter is an object. However, it is not a true object-oriented programming (OOP) language because there is no Class in its syntax. (However, ES6 introduced the concept of Class as a template for objects. Classes can be defined through the class keyword. Getting started with ES6: http://es6.ruanyifeng.com/).
But in project development, JS object-oriented development is often used, which requires us to use JS to create classes to instantiate some objects. Next, we introduce several ways to create classes in JS:
1. Factory method:

//通过工厂方式创建对象，先定义一个工厂方法
function createObj(){
  var obj = new Object();
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
//调用工厂方法创建对象:
var obj1 = createObj();
//也可以用这种形式
function createObj(){
  var obj = {}; //这样生成对象
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
var obj1 = createObj();

The problem with this method is that each time a class is created through the factory method Object, the attribute name and method say of this object must be re-created, which wastes memory.
2. Constructor method:

//创建一个构造器，构造函数首字母大写
function Obj(){
  this.name="xxx";
  this.say=function(){
    alert("我是xxx");
  };
}
//利用构造器，通过new关键字生成对象
var obj1=new Obj();

This is the most basic method, but it also has the same shortcomings as the factory method.
3. Prototype method:

//用空函数创建一个类
function Obj(){
}
//在类的原型链上添加属性和方法
Obj.prototype.name="xxx";
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1=new Obj();

The disadvantage of this method is that when there are reference attributes, changing the attribute of one object will also change the attribute of other objects. Because a reference attribute points to the same place.
4. Prototype/constructor union method

//用构造函数定义对象的非函数属性
function Obj(name){
  this.name=name;
  this.arr=new Array('a','b');
}
//用原型方式定义对象的方法
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1 = new Obj('xxx');

This is currently the most commonly used method of creating classes and objects, encapsulating methods and properties in different ways.
5. Dynamic prototype mode

//动态原型方式和原型/构造混合方式的原理相似，唯一的区别就是赋予对象方法的位置
function Person(name, sex) {
  this.name = name;
  this.sex = sex;
  if (typeof this.say != "function") {
    Person.prototype.say = function () {
      alert(this.name);
    }
  }
}
var man =new Person ("凯撒", "男");
man.say();//凯撒

The dynamic prototype mode encapsulates all information into the constructor. In the constructor, only say does not exist. It will be added to the prototype. This code will only be executed the first time it is called.
There are three steps to instantiate the obj object:
1. Create the obj object:

obj=new Object();

2. Point the internal __proto__ of obj to the prototype of the function Obj that constructs it, and at the same time, obj.constructor= ==Obj.prototype.constructor, thus making obj.constructor.prototype point to Obj.prototype (obj.constructor.prototype===A.prototype). obj.constructor.prototype and the internal _proto_ are two different things. _proto_ is used when instantiating an object. Obj does not have a prototype attribute, but it has an internal __proto__. You can use __proto__ to obtain the prototype attributes on the prototype chain. and prototyping methods.
3. Use obj as this to call the constructor Obj to set the members (i.e. object properties and object methods) and initialize them.
When these three steps are completed, the obj object has no connection with the constructor Obj. At this time, even if the constructor Obj adds any members, it will no longer affect the instantiated obj object.

The above is the detailed content of Summary of common methods for creating classes in JavaScript. For more information, please follow other related articles on the PHP Chinese website!