What are the methods for defining classes in js

This time I will bring you what are the methods of defining classes in js, and what are the precautions for defining classes in js. The following is a practical case, let's take a look.

ECMAScript6 already supports classes, but previous versions did not support classes, but classes can be simulated through some methods.

Classes in js are both important and difficult. Many times they feel ambiguous.

First of all, let’s emphasize three important knowledge points in js: this, prototype, and constructor.

Let’s summarize several methods of defining (simulation) classes:

1.Factory pattern

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("王五",19);
console.log(obj2.getName());
console.log(obj2.getAge());
console.log(obj2.constructor);

Factory mode methodCreate object. The factory mode can create an object containing necessary information based on the accepted parameters. This method can be called an unlimited number of times, and each time it returns an object containing 2 An object with two properties and two methods. The factory pattern solves the problem of creating similar objects, but it does not solve the problem of object identification, that is, it cannot determine the category of an object and unify it as Object.

2.ConstructorMethod

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("二麻子",18,"worker");
console.log(p.constructor);
console.log(p.getName());
console.log(p.getAge());
console.log(p.getJob());

Although the constructor method determines the ownership of the object and can determine the type of the object, the construction The methods in the function need to be recreated in each object, causing some performance problems.

3.Prototype pattern

function Person(){
}
Person.prototype = {
  constructor:Person,
  name:"张三",
  age:21,
  job:"teacher",
  getName:function(){
    return this.name;
  },
  getJob:function(){
    return this.job;
  }
}
var p = new Person();
console.log(p.getName()); //张三
console.log(p.getJob()); //teacher
var p2 = new Person();
p2.name = "李四";
console.log(p2.getName()); //李四

We can know from the example code that the object instance can access the value in the prototype, but not Rewrite the value in the prototype. If an attribute with the same name as the prototype is defined in the object instance, then the attribute will mask that attribute in the prototype, but will not be overridden.

4. Encapsulation (let’s call it that for now)

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

is to encapsulate all the code and treat the instance object as a whole Return is somewhat similar to factory mode.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of js imitation jquery steps

How to compare time units in JS

The above is the detailed content of What are the methods for defining classes in js. For more information, please follow other related articles on the PHP Chinese website!