JavaScript中普通对象变量与原型变量的区别及两种赋值方式差异

Great question! Let's break this down into two parts to make it easy to follow.

First, let's clarify what each term means and how they differ:

• 普通对象变量（实例属性）: These are properties directly attached to an individual object instance. Every instance gets its own copy of this property—so if you modify it on one instance, it doesn't affect any other instances of the same constructor.
  Example:

  function User() {}
  const user1 = new User();
  const user2 = new User();
  
  user1.name = "Alice"; // This is an instance property
  console.log(user2.name); // undefined (user2 has no own 'name' property)
  

• 原型变量（原型属性）: These live on the prototype object of a constructor function. All instances created by that constructor share this property. If you modify the prototype property, every instance that doesn't have its own overriding version of the property will see the updated value.
  Example:

  function User() {}
  User.prototype.age = 25; // This is a prototype property
  
  const user1 = new User();
  const user2 = new User();
  console.log(user1.age); // 25
  console.log(user2.age); // 25
  
  User.prototype.age = 30;
  console.log(user1.age); // 30 (updates because user1 has no own 'age' property)
  console.log(user2.age); // 30
  

The difference here depends entirely on what user actually is—a constructor function or an instance of a constructor:

If user is a constructor function #

• user.name = 'hello';: You're adding a property directly to the constructor function itself, not to its instances or prototype. This property has no effect on the instances created by user—they won't inherit it.
  Example:

  function User() {}
  User.name = "ConstructorName";
  const user1 = new User();
  console.log(user1.name); // undefined (doesn't get the constructor's 'name' property)
  

• user.prototype.name = 'hello';: You're adding a property to the constructor's prototype object. All instances created by user will inherit this property (unless they have their own name property that overrides it).
  Example:

  function User() {}
  User.prototype.name = "DefaultName";
  const user1 = new User();
  console.log(user1.name); // DefaultName
  

If user is an instance object #

• user.name = 'hello';: You're adding an own property to this specific instance. If there was a name property on the prototype, this instance will now use its own value instead (it "shadows" the prototype property). Other instances won't be affected.
  Example:

  function User() {}
  User.prototype.name = "DefaultName";
  const user1 = new User();
  const user2 = new User();
  
  user1.name = "Alice";
  console.log(user1.name); // Alice (own property)
  console.log(user2.name); // DefaultName (still uses prototype)
  

• user.prototype.name = 'hello';: This is a common gotcha! Instance objects don't have a built-in prototype property—you're actually creating a new own property called prototype on the user instance, then adding a name property to that new object. This has nothing to do with the prototype chain, and other instances won't share this value.
  Example:

  function User() {}
  const user1 = new User();
  user1.prototype.name = "Oops";
  
  console.log(user1.prototype.name); // Oops (this is just an own property of user1)
  console.log(user1.name); // undefined (still doesn't inherit anything related here)
  

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