Several methods of defining classes by js Recommended by of

ECMAScript6 already supports class, but previous versions did not support classes, but there are a few ways to simulate classes.

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

First, it emphasizes three important points of knowledge in js: this, prototype, constructor.

Here we summarize a few ways to define (simulate) classes under 1:

1. Factory Mode

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

The method of factory mode creates an object. Factory mode can create an object with the necessary information based on accepted parameters, and it can be called infinitely many times, each time returning an object with two methods with two attributes.Factory mode solves the problem of creating similar objects, but it does not solve the problem of identifying objects, that is, it cannot determine the category of one object, all 1 is 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("2 Hemp seeds ",18,"worker");
console.log(p.constructor);
console.log(p.getName());
console.log(p.getAge());
console.log(p.getJob());

Although the way a constructor determines the attribution of an object and the type of object, the method in the constructor needs to be recreated once per object, causing some performance problems.

3. Prototype mode

function Person(){

}
Person.prototype = {
  constructor:Person,
  name:" Zhang 3",
  age:21,
  job:"teacher",
  getName:function(){
    return this.name;
  },
  getJob:function(){
    return this.job;
  }
}

var p = new Person();
console.log(p.getName()); // Zhang 3
console.log(p.getJob()); //teacher
var p2 = new Person();
p2.name = " plum 4";
console.log(p2.getName()); // plum 4

From the instance code, we know that an object instance can access the values in the prototype, but it cannot override the values in the prototype. If a property with a duplicate name of the prototype is defined in the object instance, it will mask that property in the prototype, but it will not be overridden.

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

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

It's all about encapsulating code and returning instance objects as a whole, somewhat like factory mode.