何时优先选用JavaScript函数构造器而非class？兼析库混用原因

Great question! You’ve already nailed some key benefits of function constructors—like smaller bundle sizes when targeting pre-ES2015 browsers (avoiding Babel’s transpilation bloat) and the simplicity of their native implementation. Let’s break down other underrated advantages that make function constructors a solid choice in certain scenarios:

1. Unmatched Flexibility in Instance Initialization #

Unlike ES6 classes, function constructors let you fully control what gets returned when called. You can:

• Return instances of different constructors based on input parameters (perfect for factory patterns)
• Skip returning this entirely (e.g., for singleton patterns or returning plain objects)
• Modify the instance dynamically before returning it

Example:

function User(role, name) {
  // Return an Admin instance if the role is "admin"
  if (role === "admin") {
    return new Admin(name);
  }
  
  // Otherwise, create a regular User instance
  this.name = name;
  this.role = role;
}

function Admin(name) {
  this.name = name;
  this.role = "admin";
  this.hasAccess = true;
}

const regularUser = new User("editor", "Alice");
const adminUser = new User("admin", "Bob"); // Returns Admin instance

With classes, the constructor ignores non-object return values, and while you can return other objects, the syntax doesn’t lend itself as naturally to this kind of dynamic branching.

2. Dynamic Modification of Constructor Behavior #

Since functions are first-class citizens in JavaScript, you can easily wrap, override, or extend function constructors at runtime without fighting class syntax constraints. This is handy for adding cross-cutting concerns like logging, validation, or caching.

Example:

// Original constructor
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Wrap it to add logging
const originalPerson = Person;
Person = function(name, age) {
  console.log(`Creating Person: ${name}, ${age}`);
  return new originalPerson(name, age);
};

const john = new Person("John", 30); // Logs the creation details

While you can modify class constructors too, the process feels far more indirect compared to directly reassigning and wrapping a function.

3. Fine-Grained Control Over Prototype Chains #

Function constructors make manual prototype manipulation straightforward, which is useful if you need to customize inheritance logic beyond what class extends offers. You can easily swap prototypes, mixin methods, or adjust inheritance hierarchies on the fly.

Example:

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound`);
};

// Create a Dog that inherits from Animal with custom prototype links
function Dog(name) {
  Animal.call(this, name); // Call parent constructor
}
Dog.prototype = Object.create(Animal.prototype); // Set up inheritance
Dog.prototype.constructor = Dog; // Fix constructor reference
Dog.prototype.speak = function() {
  console.log(`${this.name} barks`); // Override method
};

While class extends simplifies this for most cases, function constructors give you raw access to the prototype chain when you need to tweak inheritance behavior.

4. Native Compatibility with Extremely Old Environments #

ES6 classes are supported in all modern browsers, but if you need to target legacy environments like IE8 or older, function constructors are your only native option. They’re part of the ES3 standard, so they work without any transpilation or polyfills—no need to worry about Babel’s class transforms breaking in ancient engines.

5. No Implicit Strict Mode or Syntax Constraints #

Class bodies automatically run in strict mode, which can catch bugs but also introduces unexpected behavior if you’re not used to it (e.g., accidental global variable assignments throw errors). Function constructors, by contrast, let you choose whether to enable strict mode with a 'use strict' directive, giving you full control over the execution context.

Additionally, class syntax enforces certain rules (like requiring a constructor method if you need initialization logic) that function constructors don’t impose—you can write a constructor function with zero boilerplate if needed.

6. Minimal Overhead in Native Execution #

While transpiled classes and function constructors produce similar runtime code, native function constructors have a simpler implementation under the hood in many JavaScript engines. This can lead to slightly faster instantiation times in some cases (though the difference is negligible for most apps).

In short, function constructors shine when you need flexibility, low-level control over prototypes, or compatibility with legacy environments. ES6 classes are better for readability, explicit semantics, and modern codebases where transpilation overhead isn’t a concern.

内容的提问来源于stack exchange，提问作者CHANist