Take you to a thorough understanding of the prototype object in JavaScript

1. What is a prototype?

1.1 Function prototype object
1.2 Creating objects using constructors

2. Several properties and methods related to prototypes

2.1 prototype property
2.2 Constructor Property
2.3 __proto__ attribute (note: there are 2 underscores on each side)
2.4 hasOwnProperty() method
2.5 in Operator

3. Combining the prototype model and the constructor model to create objects

3.1 Defects of Prototype Model Object Creation
3.2 Defects of creating objects using the constructor model
3.3 Use the combination mode to solve the above two defects

4. Dynamic prototype mode creates objects

1. What is a prototype?

Prototype is the basis of inheritance in Javascript, and JavaScript inheritance is based on prototype inheritance.

1.1 Function prototype object

In JavaScript, when we create a function A (that is, declare a function), the browser will create an object B in memory, and each function will have a property prototype pointing to this object by default (that is, the value of the prototype property is this object). This object B is the prototype object of function A, or simply the prototype of the function. By default, the prototype object B has a property constructor pointing to the function A (that is, the value of the constructor property is function A).

Look at the following code:

<body>
    <script type="text/javascript">
    	/*
    		When you declare a function, it will have a property called prototype by default. And the browser will automatically create an object according to certain rules. This object is the prototype object of this function, and the prototype property points to this prototype object. This prototype object has a property called constructor that executes this function			
			Note: By default, the prototype object has only one attribute: constructor. The others are inherited from Object, so don't consider them for now.
		*/
	    function Person () {
	    	
	    }	    
    </script>
</body>

The following diagram describes what happens after declaring a function:

1.2 Creating objects using constructors

When a function is used as a constructor (in theory, any function can be used as a constructor) and an object is created using new, the object will have a default invisible property that points to the prototype object of the constructor. This invisible property is usually represented by [[prototype]], but this property cannot be accessed directly.

Look at the following code:

<body>
    <script type="text/javascript">
	    function Person () {
	    	
	    }	
        /*
        	When an object is created using a constructor, an invisible property [[prototype]] is automatically added to the object, and this property points to the prototype object of the constructor.
        */
      	var p1 = new Person();
    </script>
</body>

Observe the following diagram:

illustrate:

1. As can be seen from the figure above, although the Person constructor is used to create the p1 object, after the object is created, the p1 object actually has nothing to do with the Person constructor. The [[ prototype ]] property of the p1 object points to the prototype object of the Person constructor.

2. If you use new Person() to create multiple objects, all objects will point to the prototype object of the Person constructor function at the same time.

3. We can manually add properties and methods to this prototype object, then objects p1, p2, p3... will share the properties and methods added in the prototype.

4. If we access an attribute name in p1, if it is found in the p1 object, it is returned directly. If the object is not found in the p1 object, it will search directly in the prototype object pointed to by the [[prototype]] property of the p1 object, and return if it is found. (If it is not found in the prototype, continue to look up for the prototype of the prototype - the prototype chain. I will talk about it later).

5. If an attribute name is added through the p1 object, the attribute name in the prototype is shielded for the p1 object. In other words: there is no way to access the prototype's property name in p1.

6. The p1 object can only read the value of the attribute name in the prototype, but cannot modify the value of the attribute name in the prototype. p1.name = "李四"; does not modify the value in the prototype, but adds a property name to the p1 object.

Look at the following code:

<body>
    <script type="text/javascript">
	    function Person () {    	
	    }
      	// You can use Person.prototype to directly access the prototype object // Add a property name to the prototype object of the Person function and its value is "Zhang San"
	    Person.prototype.name = "Zhang San";
	    Person.prototype.age = 20;

	   	var p1 = new Person();
	   	/*
	   		Access the name property of the p1 object. Although we did not explicitly add the name property to the p1 object, the prototype pointed to by the [[prototype]] property of p1 has the name property, so the name property can be accessed here.
	   		It's worth it.
	   		Note: At this time, the name attribute cannot be deleted through the p1 object, because only objects deleted in p1 can be deleted.
	   	*/
	   	alert(p1.name); // Zhang San var p2 = new Person();
	   	alert(p2.name); // Zhang San found both from the prototype, so they are the same.

	   	alert(p1.name === p2.name); // true

	   	// Since the value in the prototype cannot be modified, this method directly adds a new attribute name to p1, and then the attributes in the //prototype can no longer be accessed in p1.
	   	p1.name = "Li Si";
	   	alert("p1: " + p1.name);
	   	// Since there is no name attribute in p2, p2 still accesses the attribute in the prototype.	
	   	alert("p2:" + p2.name); // Zhang San</script>
</body>

2. Several properties and methods related to prototypes

2.1 prototype property

prototype exists in the constructor function (in fact, it exists in any function, but we don’t care about prototype when it is not a constructor function), and it points to the prototype object of this constructor function.

Refer to the previous diagram.

2.2 Constructor Property

The constructor property exists in the prototype object and points to the constructor

Look at the following code:

<script type="text/javascript">
	function Person () {
	}
	alert(Person.prototype.constructor === Person); // true
	var p1 = new Person();
  	//Use the instanceof operator to determine the type of an object.  
  	//typeof is generally used to obtain simple types and functions. Reference types generally use instanceof, because typeof always returns object for reference types.
	alert(p1 instanceof Person); // true
</script>

As needed, we can specify a new object using the Person.prototype property as the prototype object of Person.

But there is a problem at this time. The constructor property of the new object no longer points to the Person constructor.

Look at the following code:

<script type="text/javascript">
	function Person () {
		
	}
	//Directly assign object literals to Person's prototype. Then the constructor property of this object no longer points to the Person function Person.prototype = {
		name:"志玲",
		age:20
	};
	var p1 = new Person();
	alert(p1.name); // Zhiling alert(p1 instanceof Person); // true
	alert(Person.prototype.constructor === Person); //false
  	//If the constructor is important to you, you should add a line like this to Person.prototype:
  	/*
  	Person.prototype = {
      	constructor : Person //Redirect the constructor to the Person function }
  	*/
</script>

2.3 proto attribute (note: there are 2 underscores on each side)

After creating a new object with a constructor, there will be an inaccessible property [[prototype]] in the object by default. This property points to the prototype object of the constructor.

However, some browsers also provide access to this property [[prototype]] (Chrome and Firefox. Internet Explorer does not support it). Access method: p1.__proto__

However, developers should try not to access it in this way, because careless operation may change the inheritance prototype chain of this object.

<script type="text/javascript">
	function Person () {
		
	}
	//Directly assign object literals to Person's prototype. Then the constructor property of this object no longer points to the Person function Person.prototype = {
		constructor : Person,
		name:"志玲",
		age:20
	};
	var p1 = new Person();

	alert(p1.__proto__ === Person.prototype); //true
	
</script>

2.4 hasOwnProperty() method

As we all know, when we access the properties of an object, this property may come from the object itself or from the prototype pointed to by the [[prototype]] property of this object.

So how do you determine the source of this object?

The hasOwnProperty method can determine whether a property comes from the object itself.

<script type="text/javascript">
	function Person () {
		
	}
	Person.prototype.name = "志玲";
	var p1 = new Person();
	p1.sex = "female";
  	//The sex attribute is added directly to the p1 attribute, so it is true
	alert("sex property belongs to the object itself: " + p1.hasOwnProperty("sex"));
  	// The name attribute is added in the prototype, so it is false
	alert("The name property belongs to the object itself: " + p1.hasOwnProperty("name"));
  	// The age attribute does not exist, so it is also false
	alert("The age property exists in the object itself: " + p1.hasOwnProperty("age"));
	
</script>

Therefore, the hasOwnProperty method can be used to determine whether an object is added to the object itself, but it cannot be determined whether it exists in the prototype, because it is possible that the property does not exist.

That is, properties in the prototype and properties that do not exist will return false.

How to determine whether a property exists in the prototype?

2.5 in Operator

The in operator is used to determine whether a property exists in this object. But when searching for this property, we search in the object itself. If the object cannot be found, we search in the prototype. In other words, as long as the property exists in either the object or the prototype, it returns true.

<script type="text/javascript">
	function Person () {
		
	}
	Person.prototype.name = "志玲";
	var p1 = new Person();
	p1.sex = "female";
	alert("sex" in p1); // The object itself is added, so true
	alert("name" in p1); //Exists in the prototype, so true
	alert("age" in p1); //Does not exist in the object or prototype, so false
	
</script>

Back to the previous question, if we determine whether a property exists in the prototype:

If a property exists, but not in the object itself, it must exist in the prototype.

<script type="text/javascript">
	function Person () {
	}
	Person.prototype.name = "志玲";
	var p1 = new Person();
	p1.sex = "female";
	
	//Define a function to determine the location of the prototype function propertyLocation(obj, prop){
		if(!(prop in obj)){
			alert(prop + "property does not exist");
		}else if(obj.hasOwnProperty(prop)){
			alert(prop + "property exists in the object");
		}else {
			alert(prop + "object exists in prototype");
		}
	}
	propertyLocation(p1, "age");
	propertyLocation(p1, "name");
	propertyLocation(p1, "sex");
</script

3. Combining the prototype model and the constructor model to create objects

3.1 Defects of Prototype Model Object Creation

All properties in the prototype are shared. That is to say, when objects created with the same constructor function access properties in the prototype, everyone is accessing the same object. If one object modifies the properties of the prototype, it will be reflected in all objects.

However, in actual use, the properties of each object are generally different. Zhang San's name is Zhang San, and Li Si's name is Li Si.

** However, this sharing feature is very suitable for methods (property values are properties of functions). **All object sharing methods are optimal. This feature is native in C# and Java.

3.2 Defects of creating objects using the constructor model

Each object has its own unique copy of the properties and methods added in the constructor, and they are not shared. This feature is suitable for properties, but not for methods. Because for all objects, one copy of their methods should be enough, there is no need to have one copy for each person, resulting in waste of memory and poor performance.

<script type="text/javascript">
	function Person() {
	    this.name = "Li Si";
	    this.age = 20;
	    this.eat = function() {
	        alert("I've finished eating");
	    }
	}
	var p1 = new Person();
	var p2 = new Person();
	//Each object will have different methods alert(p1.eat === p2.eat); //fasle
</script>

You can use the following method to solve it:

<script type="text/javascript">
	function Person() {
	    this.name = "Li Si";
	    this.age = 20;
	    this.eat = eat;
	}
  	function eat() {
	    alert("I've finished eating");
    }
	var p1 = new Person();
	var p2 = new Person();
	//Because the eat attribute is assigned the same function, it is true
	alert(p1.eat === p2.eat); //true
</script>

However, the above solution has a fatal flaw: poor encapsulation. One of the purposes of using object-oriented programming is to encapsulate code. At this time, for the sake of performance, the code must be extracted from the object, which is an anti-human design.

3.3 Use the combination mode to solve the above two defects

The prototype pattern is suitable for encapsulating methods, and the constructor pattern is suitable for encapsulating properties. Combining the advantages of the two patterns, we have the combined pattern.

<script type="text/javascript">
	//Encapsulate properties inside the constructor function Person(name, age) {
	    this.name = name;
	    this.age = age;
	}
	// Encapsulate the method in the prototype object Person.prototype.eat = function (food) {
		alert(this.name + "爱吃" + food);
	}
	Person.prototype.play = function (playName) {
		alert(this.name + "爱玩" + playName);
	}
    
	var p1 = new Person("Li Si", 20);
	var p2 = new Person("张三", 30);
	p1.eat("apple");
	p2.eat("banana");
	p1.play("志玲");
	p2.play("Feng Jie");
</script>

4. Dynamic prototype mode creates objects

The combination mode mentioned above is not perfect either, and there is one thing that does not feel perfect. Writing the constructor and the prototype separately always makes people feel uncomfortable. We should find a way to encapsulate the constructor and the prototype together, so there is a dynamic prototype mode.

The dynamic prototype mode encapsulates all properties and methods in the constructor, and initializes the prototype in the constructor only when needed, while maintaining the advantages of using both the constructor and the prototype.

Look at the following code:

<script type="text/javascript">
	//Constructor internal encapsulation properties function Person(name, age) {
		//Each object adds its own properties this.name = name;
	    this.age = age;
	    /*
	    	Determine whether the attribute this.eat is a function. If it is not a function, it proves that the object is created for the first time.
	    	Then add this funcion to the prototype.
	    	If it is a function, it means that this method already exists in the prototype and there is no need to add it.
	    	perfect! Perfectly solves the performance and code encapsulation problems.
	    */
	    if(typeof this.eat !== "function"){
	    	Person.prototype.eat = function () {
	    		alert(this.name + "eating");
	    	}
	    }
	}
	var p1 = new Person("志玲", 40);
	p1.eat();	
</script>

This is the end of this article on how to thoroughly understand the prototype object in JavaScript. For more information about understanding the js prototype object, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

JavaScript adds prototype method implementation for built-in objects
Comprehensive analysis of prototypes, prototype objects, and prototype chains in js
Things to note when using prototype objects in js
Details on overriding prototype methods in JavaScript instance objects

<<: Examples of the correct way to use AES_ENCRYPT() and AES_DECRYPT() to encrypt and decrypt MySQL

>>: Steps to transfer files and folders between two Linux servers