Several ways to define a class by js (recommended)

ECMAScript6 already supports class, but none of the previous versions support classes, but some methods can be used to simulate classes.

Classes in js are both key points and difficult points, and often feel ambiguous.

First, I would like to emphasize three very important knowledge points in js: this, prototype, and constructor.

Let’s summarize the methods to define (simulation) classes:

1. Factory model

 function createObject(name,age){ var obj = new Object(); obj.name = name; obj.age = age; obj.getName = function(){ return this.name; }; obj.getAge = function(){ return this.age; } return obj;}var obj2 = createObject("Wang Wu",19);console.log(obj2.getName());console.log(obj2.getAge());console.log(obj2.constructor);

The factory mode method creates an object. The factory mode can create an object containing the necessary information based on the accepted parameters. This method can be called infinitely many times, and each time it returns an object containing 2 attributes and 2 methods. The factory pattern solves the problem of creating similar objects, but does not solve the problem of object recognition, that is, the category of an object cannot be determined and unified into an Object.

2. Constructor method

 function Person(name,age,job){ this.name = name; this.age = age; this.job = job;}Person.prototype = { constructor:Person, getName:function(){ return this.name; }, getAge:function(){ return this.age; }, getJob:function(){ return this.job; }}var p = new Person("Ermazi",18,"worker");console.log(p.constructor);console.log(p.getName());console.log(p.getAge());console.log(p.getJob());

Although the method of constructor determines the object's ownership problem and can determine the type of the object, the methods in the constructor need to be recreated in each object, resulting in some performance problems.

3. Prototype mode

 function Person(){}Person.prototype = { constructor:Person, name:"Zhang San", age:21, job:"teacher", getName:function(){ return this.name; }, getJob:function(){ return this.job; }}var p = new Person(); console.log(p.getName()); //Zhang San console.log(p.getJob()); //teachervar p2 = new Person();p2.name = "Li Si";console.log(p2.getName()); //Li Si

From the instance code, we can know that an object instance can access the value in the prototype, but cannot rewrite the value in the prototype. If an attribute that is duplicated with the prototype is defined in the object instance, then the attribute will block the attribute in the prototype, but will not be rewrite.

4. Packaging (let's call it that for now)

 var Dog = { createDog:function(){ var dog = {}; dog.name = "Wangwang"; dog.sayHello = function(){ console.log("Hello World!"); }; return dog; }};var dog = Dog.createDog(); dog.sayHello();

It is to encapsulate all the code and return the instance object as a whole, which is a bit similar to the factory pattern.

The above several methods (recommended) of JS definition classes are all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.