What is a prototype?

Javascript is full of objects, and there has to be a mechanism to connect them all together. So Brendan Eich devised inheritance. But he’s not going to introduce “classes” (ES6 introduces class, but it’s just syntactic sugar) because once you have “classes”, Javascript is a full object-oriented programming language, which seems a little too formal and makes getting started a little harder. With this in mind, Brendan Eich sets a Prototype property for all constructors to implement object inheritance.

define

All JavaScript objects contain an internal __proto__ attribute, which corresponds to its prototype. Each constructor has a prototype object, which points to the prototype object of the instance object created by the constructor.

role

Stereotype objects are properties and methods that are shared by all instances of a particular type. The advantage of a stereotype object is that it contains properties and methods that can be shared by all instance objects.

Instance objects

Simplest property encapsulation

	const cat1 = {}; // Create an empty objectcat1.name ="Heavy hair"; // Assign to the properties of the prototype objectcat1.color ="Yellow";constCat2 = {}; cat2.name ="二毛"; cat2.color ="Black";
Copy the code

If more than one instance is generated, it is very cumbersome to write;

The second is that there is no way to see the connection between the instance and the prototype.

The function mode

Generate instance objects, call functions, and solve code duplication

function Cat(name,color) {return{name:name,color:color } }const cat1 = Cat("Heavy hair"."Yellow");const cat2 = Cat("二毛"."Black");
Copy the code

There is a lot of code introduction, but there is no intrinsic connection between CAT1 and CAT2 to reflect that they are instances of the same prototype object.

The constructor

The constructor, which is just a normal function, uses the this variable inside. Using the new operator on the constructor generates the instance, and the this variable is bound to the instance object.

New operator

1. Create an empty object

__proto__ points the empty object’s prototype to the constructor’s prototype

Execute the code in the constructor to mount the properties and methods into the empty object

4. Return a new object

　function Person(name){this.name = name;
		this.sex="Male"}// Using new on the constructor generates an instance of the Person object.
　　const person1 = new Person('Zhao Zilong');
	const person2 = new Person('zhang fei');

Copy the code

At this point, person1 and person2 have a constructor property pointing to their constructors.

The instanceof operator validates the relationship between a prototype object and an instance object.

In the above example, the sex attributes of person1 and person2 are separate, and changing one does not affect the other. Each instance has its own copy of attributes and methods, which is not only unshareable, but also a huge waste of resources.

Prototype

The constructor has a Prototype property that holds all the properties and methods the instance objects need to share. Properties and methods that do not need to be shared are stored in constructors.

function Person(name){this.name = name; } Person.prototype = {sex : 'male' };

    const person1= new Person('Zhao Zilong');
    const person2 = new Person('zhang fei');

Copy the code

Reference: nguyen other Javascript inheritance mechanism design www.ruanyifeng.com/blog/2011/0…