JavaScript类方法与原型方法的差异：实例访问时的区别解析

Hey there! Let's break down the differences between these two approaches—while they might seem interchangeable at first glance (and both let instances call the login method successfully), there are key under-the-hood distinctions that matter in specific scenarios.

First, the immediate similarity: when you call u1.login() or u2.login(), the core behavior is identical. Both log the instance's email value because this points to the instance in both cases, and both methods live on the prototype chain of their respective objects.

Now for the meaningful differences, rooted in how the methods are attached to the prototype:

1. Enumerability #

Methods declared in an ES6 class are non-enumerable, while methods assigned directly to a constructor's prototype are enumerable by default.

Test this with a quick snippet:

// For the class-based User
console.log(Object.keys(User.prototype)); // Output: [] (login doesn't appear)

// For the constructor-function User
console.log(Object.keys(User.prototype)); // Output: ['login'] (login is listed)

This means if you ever need to loop over all enumerable prototype methods, the class method won't show up unless you explicitly adjust its enumerability.

2. Strict Mode Enforcement #

All methods defined inside an ES6 class run in strict mode automatically—no need to add 'use strict' at the top. Methods assigned to a constructor's prototype, however, default to non-strict mode (unless you manually enable strict mode inside the function).

For example, this will throw an error in the class's login method, but not in the constructor prototype version:

// Inside class User's login method
console.log(arguments.callee); // Throws TypeError (strict mode forbids this)

3. Property Configurability #

Class methods are marked as non-configurable: you can't delete them or modify their property attributes with Object.defineProperty. Prototype-assigned methods, by contrast, are configurable by default.

Check this with Object.getOwnPropertyDescriptor:

// Class version descriptor
console.log(Object.getOwnPropertyDescriptor(User.prototype, 'login'));
// Output includes: configurable: false

// Constructor version descriptor
console.log(Object.getOwnPropertyDescriptor(User.prototype, 'login'));
// Output includes: configurable: true

So delete User.prototype.login will fail silently (or throw in strict mode) for the class version, but works perfectly for the constructor version.

4. Method Name Consistency #

Class methods always have their name property explicitly set to the exact name you declared. For the constructor prototype version, modern JS engines infer the name as login when using an anonymous function (like your example), but if you used a named function expression, it would match that name. Class methods remove this ambiguity.

Wrap-Up #

In everyday use—just calling methods on instances—you won't notice a difference. But when doing meta-programming (like inspecting prototypes, enumerating methods, or modifying prototype properties), these distinctions become critical.

At the end of the day, ES6 classes are mostly syntactic sugar over JavaScript's prototype-based inheritance, but they add guardrails (like strict mode) and consistent behavior that makes code cleaner and less error-prone.

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