原型如何在引擎盖下工作？

Question

"Put functions on a prototype object when you're going to create lots of copies of a particular kind of object and they all need to share common behaviors. By doing so, you'll save some memory by having just one copy of each function, but that's only the simplest benefit."

How exactly does this work under the hood?

Answer 1

This is not as simple as it used to be, before the introduction of property getters and setters.

JavaScript Objects (and null)

A javascript object is some kind of collection of object properties and their values in memory. A javascript object value is a some kind of reference to such a data collection. The javascript null value is used to represent the absence of an object. Although the "typeof" operator returns "object" when applied to null , this is an early language design flaw that is entrenched and cannot be changed: "null" is a datatype of its own and null is not an object.

The memory structure used to store object data is not defined in language standards. Some discussion of how different implementations handle and store object data is available such as this answer on V8's object data storage.

Private Properties and slots

Private internal properties are defined in language standards for various types of of objects, but are not generally accessible from JavaScript code. Internal properties are usually called "slots" in language documentation and written inside double square back notation. For example the internal [[Callable]] slot of an object is set true for function objects but can only be checked from code by seeing if the typeof operator returns "function" when applied to an object.

[[Prototype]] slot

One such internal slot is [[prototype]], which is an object reference to the next object in a prototype chain, or null if the end of the chain has been reached and there are no further objects in the chain. Its value can be accessed using the non-enumerable __proto__ getter/setter property of an object in Netscape flavored browsers (Microsoft did not implement it when they initially cloned JavaScript into Jscript) or using Object.getPrototypeOf introduced in ECMAScript 5.1. The [[prototype]] property is mutable, but changing it on an existing object is discouraged in `Object.setPrototypeOf' documentation.

Named Object Properties

Named object properties can be implemented as key-value pairs stored in an object, or as a combination of getter/setter functions supplied for the property using Object.defineProperty (or associated Object.defineProperties method for multiple properties).

Local or "own" properties

Property values may be located in the data collection of an object reference, or accessed by searching the [[prototype]] pointer chain (the "inheritance chain") set up for the object. Checking that a property is local to the object being referenced can be achieved using the .hasOwnProperty method of an objects.

How property access works

1. Getters and setters for an object property take precedence over the use of key-value pairs. If a property of an object was defined using a setter/getter pair, the setter or getter function will be called to read or write the property even if the property is inherited . Superficially this suggests the prototype chain must be searched for setters when an object property being written does not already exist as a local property. How this might be optimized or not would depend on the JavaScript Engine and is not covered here.

2. For an ordinary key-value object property, reading the property will search the object and its prototype chain, in order of object and [[prototype]] linkages, to see if the property already exists. If it does its value is returned from where it was found. If it is not found before reaching the end of the prototype chain, undefined is returned as the property value.

3. Writing a key-value type property, without a setter or getter , simply writes the value as a local property of the object being written to, creating a new property if the name of property being written does not exist already.

   Locally writing a key-value property means that when reading it back, the local value will returned without searching the inheritance chain. So writing the value of an inherited property on one instance object does not affect the value inherited by another object of the same class.

4. The delete operator only removes local properties from an object. If an inherited property that has been written to is deleted, its value reverts to the inherited value. Attempting to delete an object property that is being inherited has no effect.

Where does the prototype chain come from.

Objects in Javascipt are created by constructor functions. Each constructor function (object) has a property called prototype . When an object is constructed, its internal [[prototype]] slot is set to the object value held in the prototype property of its constructor, at the time the object was created. If you need to go there, this means that changing the value of a constructor's prototype property does not affect objects previously created by the constructor.

Class declarations set up a constructor function with the same name as the class name. Methods defined within a class declaration are added as properties of the prototype property of the constructor with effect that they are inherited by class instance objects.

A big difference between constructors declared using class and function is that the prototype property of class constructors is read only and cannot be changed (noting properties of the prototype are not read only and can be changed). This mechanism protects the prototype chain of classes and extensions from being updated after declaration of class structures.

---

See also Inheritance and the prototype chain on MDN, or a web search for "how does prototypal inheritance work in javascript".

Answer 2

The key is what used to be a hidden property (and is now standard) __proto__ .

var z = { weight: "Too much" };
var a = { name: "Bob", age: 32 };
var b = { name: "Doug" };

a.__proto__ = z;
b.__proto__ = a;

b.age; // 32 -- doesn't have one, so it checks __proto__.age
b.name; // Doug -- has its own, so it doesn't look it up
b.weight; // Too much -- __proto__.__proto__.weight

All of the different helpers in libraries or in standard methods/syntax are really just ways of hiding this.

When you apply this to ES constructor functions:

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.weight = "That's rather personal";

var bob = new Person("Bob", 32);
bob.__proto__ === Person.prototype; // true

So you can sort of think of three invisible lines at the start of your constructor function:

function Person (name, age) {
  /*
    this = {};
    this.constructor = Person;
    this.__proto__ = Person.prototype;
  */
  this.name = name;
  this.age = age;
  // return this;
}

ES6 classes are really just a prettier wrapper around this constructor behaviour, which hide all of the zaniness people had to do to make class inheritance work.