3 ways to create objects in javascript

This article shares with you various methods of creating objects in js and the pros and cons of each method. The specific content is as follows

The first way to create objects:

Create JSON objects
Recommended occasions for use: As a parameter of a function, Scenarios that are only used once temporarily. For example, setting the function prototype object.

var object = {
 name: "Eric",
 age: 24,
 sayHi: function(){
  console.log("My name is "+ this.name + " this year is " + this.age + "years old.")
 }
};

The second way to create an object:

Create an Object object

var object = new Object();
object.name = "Eric";
object.age = 24;
object.sayHi = function(){....};

The disadvantages of the above two methods of creating objects: they cannot be used as templates for object creation, that is, they cannot be used with new. Construct new objects.

The third way to create objects:

function Person() {
 this.name = "Eric";
 this.age = 24;
 this.sayHi = function(){
  console.log(this.name);
 }
}
 
var object1 = new Person();
var object2 = new Person();

This way of creating objects solves the shortcomings of the first two methods. It can be used as a template for object creation and can be reused to create multiple objects.

The role of the new operator:

Execute the constructor (the function after new), create an empty object inside the constructor
Associate the empty object created in the previous part with the prototype object of the constructor
Then put this Points to the current empty object
After the constructor is executed, if there is no return, the empty object is returned to object

Principle of new operator

The third method has a disadvantage: the internal functions of the object will be in each object If a large number of objects are created, it will be a waste of memory. The behavior of the function is that it can be shared by all objects and does not require each object to save a copy. Therefore, you can put the function in the prototype for declaration, then all objects will have public functions, and only one copy will be kept in the memory. All attributes are written inside the object

The third way beta1:

function Person() {
 this.name = 'Eric';
 this.age = 24;
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person();
var object2 = new Person();

Continue to upgrade beta2:

function Person(name,age) {
 this.name = name || "";
 this.age = age || "";
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person(name1,age1);
var object2 = new Person(name2,age2);

Problems: 1. If the caller changes the order of passing parameters, it will be useless
Problem: 2. The increase or decrease of parameters will cause the function declaration to change, and the calling place may also change.

How to solve: Continue to upgrade beta3:

function Person(option) { //用一个对象把所有参数覆盖
 this.name = option.name || "";
 this.age = option.age || "";
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person({
  name: "Eric",
  age: 24
 });
var object2 = new Person({
  name: "XXX",
  age: xx
 });

Continue to optimize and put the initialization code in the init function

Continue to upgrade beta4:

function Person(option) {
 this._init(option);
}
Person.prototype = {
 _init: function (option){
  this.name = option.name;
  this.age = option.age;
 },
 sayHi: function(){
  console.log("HI");
 }
};
 
var object1 = new Person({
  name: "Eric";
  age: 24
 });
object1.sayHi();