Learn the encapsulation of Javascript object oriented programming

Javascript is an object-based (ES2en-ES3en) language where almost everything you encounter is an object. However, it is not a true object-oriented programming (OOP) language because it does not have class (classes) in its syntax.
So, if we want to encapsulate "properties" (property) and "methods" (method) into one object, or even generate an instance object from a prototype object, what should we do?
1. The original schema of the generated object
Suppose we think of a cat as an object that has both a name and a color.

var Cat = {
　　　　name : '',
　　　　color : ''
　　}

Now we need to generate two instance objects based on the specification of this prototype object (schema).

var cat1 = {}; //  create 1 An empty object 
　　　　cat1.name = " Heavy hair "; //  Assign values according to the properties of the prototype object 
　　　　cat1.color = " yellow ";
　　var cat2 = {};
　　　　cat2.name = "2 MAO ";
　　　　cat2.color = " black ";

Okay, so that's the simplest encapsulation, encapsulating two properties in one object. However, this way of writing has two disadvantages. One is that if more than one instance is generated, it will be very cumbersome to write; 2 is the connection between the instance and the prototype, there is no way to see what the connection is.
2. Improvement of the original model
We can write a function to solve the problem of code duplication.

function Cat(name,color){
　　　　return {
　　　　　　name:name,
　　　　　　color:color
　　　　}
　　}

Then generate the instance object, which is equivalent to calling the function:

var cat1 = Cat(" Heavy hair "," yellow ");
　　var cat2 = Cat("2 MAO "," black ");

The problem with this approach remains that there is no intrinsic relationship between cat1 and cat2 to reflect that they are instances of the same prototype object.
3. Constructor pattern
To solve the problem of generating instances from prototype objects, Javascript provides a constructor pattern (Constructor).
The so-called "constructor" is essentially a normal function, but uses the this variable internally. Using the new operator on the constructor generates an instance, and the this variable is bound to the instance object.
For example, the cat prototype object can now be written like this,

　function Cat(name,color){
　　　　this.name=name;
　　　　this.color=color;
　　}

We are now ready to generate the instance object.

　var cat1 = new Cat(" Heavy hair "," yellow ");
　　var cat2 = new Cat("2 MAO "," black ");
　　alert(cat1.name); //  Heavy hair 
　　alert(cat1.color); //  yellow 

cat1 and cat2 automatically contain an constructor attribute that points to their constructors.

alert(cat1.constructor == Cat); //true
　　alert(cat2.constructor == Cat); //true

Javascript also provides an instanceof operator to verify the relationship between the prototype object and the instance object.

　alert(cat1 instanceof Cat); //true
　　alert(cat2 instanceof Cat); //true

4. Problems with the constructor pattern
The constructor method works well, but there is a memory waste problem.
See, we now add a constant property "type" (type) to the Cat object, and another method, eat (mouse eating). The prototype object Cat then looks like this:

　function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　　　this.type = " cats ";
　　　　this.eat = function(){alert(" Eating rats ");};
　　}

In the same way, generate instances:

　var cat1 = new Cat(" Heavy hair "," yellow ");
　　var cat2 = new Cat ("2 MAO "," black ");
　　alert(cat1.type); //  cats 
　　cat1.eat(); //  Eating rats 

On the surface, there seems to be nothing wrong with it, but in fact, there is one big downside to doing this. That is, for every instance object, the type attribute and eat() method are 1 module 1 like content, and every time an instance is generated, it must use 1 more memory for the duplicate content. This is neither environmentally friendly nor efficient.

var cat1 = {}; //  create 1 An empty object 
　　　　cat1.name = " Heavy hair "; //  Assign values according to the properties of the prototype object 
　　　　cat1.color = " yellow ";
　　var cat2 = {};
　　　　cat2.name = "2 MAO ";
　　　　cat2.color = " black ";

0

Can the type attribute and eat() method be generated in memory only once, and then all instances point to that memory address? The answer is yes.
5. Prototype mode
Javascript specifies that each constructor has an prototype attribute that points to another object. All properties and methods of this object will be inherited by the instance of the constructor.
This means that we can define those immutable properties and methods directly on the prototype object:

var cat1 = {}; //  create 1 An empty object 
　　　　cat1.name = " Heavy hair "; //  Assign values according to the properties of the prototype object 
　　　　cat1.color = " yellow ";
　　var cat2 = {};
　　　　cat2.name = "2 MAO ";
　　　　cat2.color = " black ";

1

Then, the instance is generated.

var cat1 = {}; //  create 1 An empty object 
　　　　cat1.name = " Heavy hair "; //  Assign values according to the properties of the prototype object 
　　　　cat1.color = " yellow ";
　　var cat2 = {};
　　　　cat2.name = "2 MAO ";
　　　　cat2.color = " black ";

2

In this case, the type attribute and eat() method of all instances are actually the same memory address, pointing to the prototype object, thus improving the operation efficiency.

　alert(cat1.eat == cat2.eat); //true

6. Verification method of Prototype schema
To complement the prototype attribute, Javascript defines 1 helper method to help us use it. .
6.1 isPrototypeOf()
This method is used to determine the relationship between an proptotype object and an instance.

var cat1 = {}; //  create 1 An empty object 
　　　　cat1.name = " Heavy hair "; //  Assign values according to the properties of the prototype object 
　　　　cat1.color = " yellow ";
　　var cat2 = {};
　　　　cat2.name = "2 MAO ";
　　　　cat2.color = " black ";

4

6.2 hasOwnProperty()
Each instance object has an hasOwnProperty() method that determines whether an attribute is local or inherited from the prototype object.

var cat1 = {}; //  create 1 An empty object 
　　　　cat1.name = " Heavy hair "; //  Assign values according to the properties of the prototype object 
　　　　cat1.color = " yellow ";
　　var cat2 = {};
　　　　cat2.name = "2 MAO ";
　　　　cat2.color = " black ";

5

6.3 in operator
The in operator can be used to determine whether an instance contains an attribute, whether it is local or not.

var cat1 = {}; //  create 1 An empty object 
　　　　cat1.name = " Heavy hair "; //  Assign values according to the properties of the prototype object 
　　　　cat1.color = " yellow ";
　　var cat2 = {};
　　　　cat2.name = "2 MAO ";
　　　　cat2.color = " black ";

6

The in operator can also be used to iterate over all the attributes of an object.

var cat1 = {}; //  create 1 An empty object 
　　　　cat1.name = " Heavy hair "; //  Assign values according to the properties of the prototype object 
　　　　cat1.color = " yellow ";
　　var cat2 = {};
　　　　cat2.name = "2 MAO ";
　　　　cat2.color = " black ";

7

That's all about javascript encapsulation. I hope it will help you with your study.