The prototype chain of the core of js, the most basic and important knowledge of the front end, must see if you learn js well

When the inferiors first came into contact with javascript, they thought it was a strange thing. Not even a class. Just because the inferior was used to using c#. Javascript is dynamic and does not provide the implementation of classes by itself. (The class keyword was introduced in ES2015/ES6, but it's just syntactic sugar, JavaScript is still prototype-based).

What is a prototype? A prototype is an object through which other objects can implement property inheritance. Any object can be a prototype. Any object created will also have a default prototype, except for the topmost prototype. The topmost prototype in Javascript is "Object". Such a pyramid-like structure is called a prototype chain. Almost all objects in JavaScript are instances of Object at the top of the prototype chain.

Let's demonstrate the prototype chain with an example.

The prototype chain of the core of js, the most basic and important knowledge of the front end, must see if you learn js well

It can be seen here that the object a created first inherits Object, and the object b created later inherits object a. The whole prototype chain is like this: b--->a--->Object, Object is followed by null, because nothing can be found.

The prototype chain of the core of js, the most basic and important knowledge of the front end, must see if you learn js well

JavaScript doesn't have the "methods" defined by other class-based languages. In JavaScript, any function can be added to an object as a property of the object. Function inheritance is no different from other property inheritance. When the inherited function is called, this points to the currently inherited object, not the prototype object where the inherited function is located. If both the object and the prototype contain a method named add, the add method of the current object will be called, which is called "property overriding" (this situation is equivalent to method overriding in other languages). Let's look at an example.

The prototype chain of the core of js, the most basic and important knowledge of the front end, must see if you learn js well

Special Note:

1. Arrays are inherited from Array.prototype (indexOf, forEach and other methods are inherited from it)

2. Functions are inherited from Function.prototype (call, bind and other methods are inherited from it)

So how to extend a prototype, add a method object or something, please see the example.

The prototype chain of the core of js, the most basic and important knowledge of the front end, must see if you learn js well

Looking up properties on the prototype chain is time-consuming and has performance side effects, which is important in performance-critical situations. Also, trying to access a property that doesn't exist traverses the entire prototype chain.

When traversing the properties of an object, each enumerable property on the prototype chain is enumerated.

To detect whether an object's properties are defined on itself or on the prototype chain, it is necessary to use the hasOwnProperty method, which is included in all objects that inherit from Object.proptotype.

It is the only method in JavaScript that only involves the object's own properties without traversing the prototype chain.

So: It is important to understand the prototypal inheritance model before writing complex code with prototypal inheritance. Also, be aware of the length of the prototype chain in the code, and end the prototype chain if necessary to avoid possible performance issues. Also, never extend native object prototypes unless for compatibility with new JavaScript features.

Learning a little every day, making progress a little bit, sticking to it for a month will be a qualitative leap. As the saying goes, three cobblers top one Zhuge Liang. Everyone's wisdom is always greater than that of one person. People who want to communicate and learn better than themselves, Welcome to the group: 675498134

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326415978&siteId=291194637