The importance of prototype chains as a JavaScript foundation is obvious. The constructor of Vue is function instead of class.

As we look back, there are many xxxMixin function calls passing Vue as arguments. Their function is to extend some methods on Vue prototype (details will be covered in a later article, not expanded here). Vue implements these extensions in multiple modules by function. Rather than doing it all in one module, which is hard to do with Class. The advantage of this is that it is very easy to maintain and manage the code.

Before starting the analysis of this article, throw out some summary points (regular version)

  1. In JavaScript, everything is an object, and functions are one type of object;

  2. Objects have a __proto__ attribute and functions have a prototype attribute;

  3. Objects are generated by functions;

  4. When a function creates an object, the object’s __proto__ attribute points to the function’s prototype attribute;

Initialize a piece of code for the analysis that follows

class Animal() {}

var cat = new Animal()
var dog = new Animal()

cat.name = "miaomiao"
console.log(cat.name) // miaomiao

dog.name = "wangwang"
console.log(dog.name) // wangwang
Copy the code

Comb through some concepts

So let’s start breaking it down

Ordinary objects

The object has a __proto__ attribute that points to the prototype of the function that created the object.

cat.__proto__ === Animal.prototype
dog.__proto__ === Animal.prototype

cat.__proto__ === dog.__proto__
Copy the code

The function object

Functions have both __proto__ and prototype attributes because they are also objects and will eventually be created by the Function Function.

The __proto__ attribute points to the prototype of the function that created the object according to the rules above

Prototype is automatically generated when a function is created. Prototype has two attributes __proto__ and constructor;

The constructor attribute points to the function itself.

General function object

__proto__ refers to function. prototype. The default prototype is an object of type “object”, created by object. So the prototype attribute’s __proto__ attribute points to Object.prototype;

Use the ES6extendsKeyword to create a function

class Animal() {}

class Monkey extends Animal {}
Copy the code

The __proto__ attribute of a subclass indicates constructor inheritance and points to the parent class, and the __proto__ attribute of a subclass indicates method inheritance and always points to the Prototype attribute of the parent class.

The Function Function

typeof Function.prototype; // "function"
Copy the code

The prototype of this Function is Function

Although it is a function type, it still has two attributes: __proto__ and constructor;

On the console you can see:

Function.__proto__ === Function.prototype // true

Function.prototype.__proto__ === Object.prototype // true
Copy the code

Function is generated by itself. Prototype__proto__ refers to Object.prototype

Is this about to become clear? The unfathomable chain of prototypes is coming to the surface. Now look at the Object function;

The Object function

Based on the principle that functions are created by Function, it is bold to guess that Object functions are generated by Function functions.

Object.__proto__ === Function.prototype // true
Copy the code

Sure enough. What is upstream of Object.prototype

console.log(Object.prototype.__proto__) // null
Copy the code

Object. Prototype is the end of the JS prototype chain!

What is the direct relationship between the instance and the prototype

function Animal() {}

const cat = new Animal()

cat.name = "miaomiao"
Animal.prototype.name = "animal"
console.log(cat.name) // miaomiao

delete cat.name
console.log(cat.name) // animal
Copy the code

When reading an instance’s properties, if it can’t find them, it looks for properties in the stereotype associated with the object. If it can’t find them, it looks for the stereotype’s stereotype, looking up the hierarchy.

conclusion

Knowing some of the above rules, the prototype chain is basically enough, with the demo code and the prototype chain diagram

class Animal() {}

const cat = new Animal()
const dog = new Animal()


class Monkey extends Animal {}

const monkey = new Monkey();
Copy the code