Objects of Javascript learning notes (ii): Prototype object_basic knowledge-js tutorial

Javascript does not have a class inheritance model, but uses prototype to inherit the original type. Although this is often seen as a disadvantage of Javascript, in fact, the original type inheritance model is more powerful than the traditional class inheritance model. For example, building a class model at the top of the original type inheritance is simple, but in turn it is a much more difficult task. Javascript is the only language widely used for original type inheritance. Therefore, it takes time to understand the differences between the two inheritance methods.

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

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

Set the prototype of Bar to Foo:

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

Make sure that the Bar constructor is itself and create a 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 preceding example, the object test inherits both Bar. prototype And Foo. prototype. Therefore, it can access the function method defined in Foo. Of course, it can also access attribute value. It should be mentioned that when new Bar () is used, a new Foo instance is not created, but its built-in Foo instance is reused. Similarly, all Bar instances share the same value attribute. Examples:

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

Prototype chain Search Mechanism

When accessing an object's attributes, Javascript will traverse the entire prototype chain from the object itself until the corresponding attributes are found. If you reach the top of the prototype chain, that is, the Object. prototype in the previous example, and still do not find the attribute to be searched, Javascript will return the undefined value.

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 the value to it. However, copying the original value to prototype is invalid, for example:

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

Here is an external topic in this article. What is the original value:
In Javascript, variables can be stored in two types of values: original values and reference values.

1. Original value (primitive value ):

The original values are fixed and simple values and are simple data segments stored in the stack. That is to say, their values are directly stored in the variable access location.
The original types include Undefined, Null, Boolean, Number, and String.

2. reference value ):

The reference value is a relatively large object stored in heap. That is to say, the value stored in the variable is a pointer pointing to the memory of the storage object. All reference types are integrated from objects.
Prototype chain performance problems

If the property to be searched is at the top of the prototype chain, the search process will undoubtedly have a negative impact on performance. When performance requirements are strict, this is a key consideration. In addition, when you try to find a non-existent attribute, the entire prototype chain will be traversed.
Similarly, when traversing an object's attributes, all attributes on the prototype chain will be accessed.

Summary

Understanding the original type inheritance is a prerequisite for writing complex Javascript code. Pay attention to the height of the original type chain in the code. When faced with performance bottlenecks, you must learn to split the prototype chain. In addition, prototype and prototype _ proto _ must be distinguished. The prototype of the prototype object will not be discussed here,