Creating Objects in JavaScript: Overview of Methods and Best Practices

"Creating objects" in JavaScript is a complex topic. This language provides many ways to create objects, and both newbies and experienced users may feel confused about which one to choose. However, although there are many ways to create objects, and the syntax may seem very different, they may actually be more similar than you think. This article will take you on a journey to sort out object creation methods, revealing the dependencies and progressive relationships between different methods.

Object literals

Our first stop is undoubtedly the simplest way to create objects, object literals. JavaScript always preaches that it can create objects "out of nothing" - no classes, no templates, no prototypes - and "pop", an object with methods and data appears.

var o = {
  x: 42,
  y: 3.14,
  f: function() {},
  g: function() {}
};

But this method has a disadvantage: if we want to create an object of the same type elsewhere, we have to copy and paste the methods, data and initialization of this object. We need a way to create objects of the same type in batches instead of just one.

Factory function

Our next stop is the factory function. Obviously, it is easiest to use this method to create a class of objects with the same structure, interface, and implementation. We do not create an object literal directly, but use the object literal as the return value of the function. When we need to create objects of the same type multiple times or in multiple places, we only need to call this function.

function thing() {
  return {
    x: 42,
    y: 3.14,
    f: function() {},
    g: function() {}
  };
}

var o = thing();

But this method also has a disadvantage: it will cause memory expansion, because each object contains an independent copy of the factory function. In theory we want all objects to share a copy of the factory function.

Prototype Chain

JavaScript provides a built-in mechanism for sharing data between objects, called the prototype chain. When we access a property of an object, it delegates to some other object to complete the request. We can use this to modify the factory function so that each object it creates contains only its own unique data, while requests for other properties are all delegated to a common object on the prototype chain.

var thingPrototype = {
  f: function() {},
  g: function() {}
};

function thing() {
  var o = Object.create(thingPrototype);

  o.x = 42;
  o.y = 3.14;

  return o;
}

var o = thing();

In fact, JavaScript itself has built-in mechanisms to support this common pattern. We don't need to create this shared object (prototype object) ourselves. JavaScript will automatically create a prototype object for each function. We can put the shared data directly in this object.

thing.prototype.f = function() {};
thing.prototype.g = function() {};

function thing() {
  var o = Object.create(thing.prototype);

  o.x = 42;
  o.y = 3.14;

  return o;
}

var o = thing();

But this method also has a disadvantage: it will lead to duplication. The first and last lines of the above thing function are repeated in every "factory function of the delegate prototype", with almost no difference.

　ES5 Classes

We can extract those repetitive codes and put them into a custom function. This function will create an object and establish a delegation (inheritance) relationship with the prototype of some other arbitrary function (parameter function). Then we use the newly created object as a parameter, call this function (parameter function), and finally return this new object.

function create(fn) {
  var o = Object.create(fn.prototype);

  fn.call(o);

  return o;
}

// ...

Thing.prototype.f = function() {};
Thing.prototype.g = function() {};

function Thing() {
  this.x = 42;
  this.y = 3.14;
}

var o = create(Thing);

In fact, JavaScript also has built-in support for this method. The create function we defined is actually a basic implementation of the new keyword, so we can easily replace create with new.

Thing.prototype.f = function() {};
Thing.prototype.g = function() {};

function Thing() {
  this.x = 42;
  this.y = 3.14;
}

var o = new Thing();

The station we have arrived at is often called the ES5 category. It creates objects through functions, delegates the data that needs to be shared to prototype objects, and uses the new keyword to handle repeated logic.

But this method also has a disadvantage: it is verbose and ugly, and it will be even more verbose and ugly when implementing inheritance.

ES6 Classes

The latest related improvement in JavaScript is the ES6 class. It is much simpler to use the new syntax to achieve the above functions.

class Thing {
  constructor() {
    this.x = 42;
    this.y = 3.14;
  }

  f() {}
  g() {}
}

var o = new Thing();

Comparison

For many years, JavaScript developers have always had an ambiguous relationship with the prototype chain. The two ways we are most likely to encounter today are the class syntax that relies heavily on the prototype chain, and the other is the factory function syntax that does not rely on the prototype chain at all. The two methods are different in terms of performance and features - although the differences are not huge.

Performance

Today's JavaScript engines have been greatly optimized, so much so that it is difficult to infer from JavaScript code what will be faster. The key lies in the method of measurement. Yet measurement methods sometimes fail. An updated JavaScript engine is typically released every six weeks, and measurements taken before then, and decisions made based on such measurements, may become meaningless. Therefore, my rule of thumb is to choose the most official and widely used syntax, because most of the time it has been tested the most in practice and therefore has the highest performance. The class syntax is currently the best for this, and as I write this article, the class syntax is about 3 times faster than a factory function that returns a literal.

Features

With the release of ES6, the differences that once existed between classes and factory functions have disappeared. Now, both factory functions and classes can enforce truly private data - factory functions via closures and classes via WeakMap. Both can implement multiple inheritance - factory functions can mix other properties into their own objects, and classes can mix other properties into their own prototypes, or through class factories, or through proxies. Factory functions and classes can also return any object when needed, and the syntax is very simple.

Conclusion

Considering all things considered, I prefer class syntax. It is standard, simple, clean, fast, and provides all the features that were once only available in function factories.

The above is the content of JavaScript object creation: method list and best practices. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!