prototype

Prototype is defined in ES2019 as

An object that provides shared properties to other objects

All the components in Vue inherit from the prototype of Vue

This also explains why some methods of Vue can be used directly in each component because they are written on the prototype of Vue. Right

When a prototype object is created, a constructor property is automatically generated, pointing to the constructor that created it

The constructor’s prototype points to the prototype object

The __proto__ of the instance object points to the prototype object

If you look up the __proto__ attribute on MDN you can see it

Deprecated This feature has been removed from the Web standards, and while some browsers still support it, it may be discontinued at some point in the future, so try not to use it.

Warning: With the convenience of manipulating properties in modern browsers, it is possible to change the [[Prototype]] properties of an object. This behavior is a very slow and poor performance operation in every JavaScript engine and browser. Changing and inheriting properties in this way is very bad for performance. And performance time is not simply spent on obj. Proto =… It also affects all objects that inherit from the [[Prototype]] statement. If you care about performance, you shouldn’t change its [[Prototype]] in an object. Instead, create a new Object that inherits from [[Prototype]]. Object.create() is recommended.

Warning: While Object.prototype.proto is supported by most browser vendors today, its existence and exact behavior are only standardized as traditional features in the ECMAScript 2015 specification to ensure Web browser compatibility. For better support, it is recommended to use object.getProtoTypeof () only.

The website makes it pretty clear that if you don’t understand what the prototype chain does, you should

This part is a little bit tricky but it’s helpful to understand how the prototype chain works

How prototype chains work: The reason prototype chains are so important is that they determine how inheritance is implemented in JavaScript.

When we access a property, the look-up mechanism is as follows:

  • Access object instance properties, return if there is one, and find its prototype object by __proto__ if there is none.

  • If not found, continue to search through the __proto__ of the prototype object.

  • Find Object. Prototype layer by layer, return if the Object property is found,

    If __proto__ is not found, return undefined, no further search, because if __proto__ is null.

So if we use object.prototype.__proto__ to manipulate the prototype Object then all objects will be affected because Object is the top-level parent of objects and all objects inherit from their top-level parent Object