Javascript Study Notes - Objects (2): Prototype Object_Basic Knowledge

Javascript is the only language with widely used prototypal inheritance, so it takes time to understand the differences between the two inheritance methods.

The first major difference is that Javascript uses prototype chains for inheritance:

function Foo() {
 this.value = 42;
}
Foo.prototype = {
 method: function() {}
};
function Bar() {}

Set Bar's prototype to an object instance of Foo:

Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

Make sure that the constructor of Bar is itself and create a new Bar object instance:

Bar.prototype.constructor = Bar;
var test = new Bar();

Let’s take a look at the composition of the entire prototype chain:

test [instance of Bar]
 Bar.prototype [instance of Foo]
 { foo: 'Hello World' }
 Foo.prototype
  { method: ... }
  Object.prototype
  { toString: ... /* etc. */ }

In the above example, the object test will inherit both Bar.prototype and Foo.prototype. Therefore it has access to the function method defined in Foo. Of course, it can also access the property value. It should be mentioned that when new Bar() is called, it does not create a new Foo instance, but reuses the Foo instance that comes with its prototype object. Likewise, all Bar instances share the same value property. Let’s give an example:

test1 = new Bar();
 test2 = new Bar();
 Bar.prototype.value = 41;
 test1.value //41
 test2.value//41

Prototype chain search mechanism

When accessing a property of an object, Javascript will traverse the entire prototype chain starting from the object itself until it finds the corresponding property. If the top of the prototype chain is reached at this time, which is Object.prototype in the above example, and the property to be found is still not found, then Javascript will return an undefined value.

Prototype object properties

Although the properties of the prototype object are used by Javascript to build the prototype chain, we can still assign values ​​to it. But copying the original value to prototype is invalid, such as:

function Foo() {}
Foo.prototype = 1; // no effect

Here is a digression from this article, introducing what is the original value:
In Javascript, variables can store two types of values, namely primitive values ​​and reference values.

1.Primitive value:

Primitive values ​​are fixed and simple values, which are simple data segments stored in the stack, that is, their values ​​are stored directly at the locations where variables are accessed.
There are five primitive types: Undefined, Null, Boolean, Number, and String.

2. Reference value:

The reference value is a relatively large object, which is stored in the heap. In other words, the value stored in the variable is a pointer, pointing to the memory where the object is stored. All reference types are integrated from Object.
Prototype chain performance issues

If the property that needs to be looked up is located at the upper end of the prototype chain, then the lookup process will undoubtedly have a negative impact on performance. This will be an important factor to consider in scenarios where performance requirements are necessarily strict. Additionally, trying to find a property that doesn't exist will traverse the entire prototype chain.
Likewise, when traversing an object's properties, all properties on the prototype chain will be accessed.

Summary

Understanding prototypal inheritance is a prerequisite for writing more complex Javascript code. At the same time, pay attention to the height of the prototype chain in the code. Learn to split the prototype chain when facing performance bottlenecks. In addition, the prototype object prototype and the prototype __proto__ should be distinguished. The prototype object prototype is mainly discussed here and the issues about the prototype __proto__ will not be elaborated.