Object 2: prototype objects

Javascript is the only widely used primitive inheritance language, so it takes time to understand the differences between the two inheritance approaches.

The first major difference is that Javascript USES a prototype chain to inherit:

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

Set the prototype of Bar to an object instance of Foo:

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

Ensure that the constructor of Bar is itself, and create a new instance of Bar object:

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

Here's a look at the entire prototype chain:

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

In the above example, the object test will inherit both bar.prototype and foo.prototype. So it can access the function method defined in Foo. Of course, it can also access the attribute value. It is important to note that when new Bar() does not create a new instance of Foo, but reuses the Foo instance that comes with its prototype object. Again, all instances of Bar share the same value attribute. For example:

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

Prototype chain lookup mechanism

When accessing an object's properties, Javascript iterates through the prototype chain, starting with the object itself, until it finds the properties. If you reach the top of the prototype chain, the object.prototype in the previous example, and still don't find the property you need to look for, the Javascript returns undefined.

Properties of the prototype object

Although the properties of the prototype object are used by Javascript to build the prototype chain, we can still assign values to it. However, copying the original value to prototype is invalid. For example:

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

Here's a digression from this article on what the original value is:
In Javascript, variables can hold two types of values, the original value and the reference value.

1. Primitive value:

The original values are fixed and simple values, which are simple data segments stored in the stack, that is, their values are stored directly in the variable access location.
There are five types of primitive types: Undefined, Null, Boolean, Number, and String.

2. Reference value:

The reference value is the larger object, stored in the heap, that is, the value stored in the variable is a pointer & PI; Pointer, pointing to the memory where the object is stored. All reference types are integrated from Object.
Prototype chain performance issues

If the property you are looking for is at the top of the prototype chain, the lookup process can have a negative impact on performance. This will be an important consideration in scenarios where performance requirements are necessarily stringent. In addition, trying to find a nonexistent property traverses the entire prototype chain.
Also, when traversing an object's properties, all properties on the stereotype chain are accessed.

conclusion

Understanding proto-type inheritance is a prerequisite for writing more complex Javascript code, and paying attention to the height of the prototype chain in the code. Learn to split the prototype chain when faced with performance bottlenecks. In addition, to distinguish prototype from prototype with prototype s, I will discuss prototype with prototype s, but not with prototype s.