将属性添加到实例或添加到原型属性有什么区别？

Question

I have the following class:

      class PersonCl {
      constructor(fullName, age) {
        this.fullName = fullName;
        this.age= age;
      }
    
      // Instance methods
      // Methods will be added to .prototype property
      calcAge() {
        console.log(2037 - this.birthYear);
      }
    
      greet() {
        console.log(`Hey ${this.fullName}`);
      }
}

now i have lets say two object that were created from the constructor:

const Joe = new PersonCl('Joe',23);
const Larisa = new PersonCl('Larisa',41);

i'm asking what is the difference between:

1.adding the property species into constructor and set it exactly where we set the fullName and age.

2. or adding the following line outside the class declaration:

   PersonCl.prototype.species = "Male";

Answer 1

The "species" property placed on the prototype object will be visible on all instances in most (but not all situations). As soon as your code makes a change to "species":

someInstance.species = "tiger";

then that instance will have a local property "species", and the value of "species" on other instances will not change.

Clearly, when the property is directly added to instances in the constructor, all instances will be similarly initialized (given your sample code) but thereafter changes can still be made on an instance-by-instance basis. The key point is that updating a property value on an object always makes a local, "own" property of that object and does not affect the prototype.

Some methods intended to help work with object properties as a collection, like Object.keys() , only involve "own" properties, which means properties directly associated with an object and not inherited properties.

Answer 2

1. Prototype is a real object
2. A lot of objects could have the same prototype
3. Prototype could have prototype too
4. When you read object property JS will look for own property first, and if it does not exists, it will look for this property in prototype and in prototype of prototype, etc.