current position:Home>Understanding of prototype and prototype object of JavaScript

Understanding of prototype and prototype object of JavaScript

2022-05-15 02:16:02Long, ya

Study JavaScript when , There must be two concepts involved –prototype, Prototype object . You may inadvertently use , But I didn't really understand this thing , On the basis of learning to use , Further understanding it will help you absorb more different knowledge .


prototype Translated as " Prototype ".prototype Is an attribute that every function has , This property is a The pointer , Point to this function Prototype object , And each instance object generated by this object (new Operator creation ) Can share this object prototype All properties and methods on properties .

2. Prototype object

So what is the point Prototype object What is it like ? By creating a simple constructor , Printing the instance object can better understand .

function Person() {
var p = new Person(); // Create a Person Instance of type 
console.log(p instanceof Person) //true

Google browser print p Result :
 What is? Prototype-Person Constructors
there Person Is an empty constructor , Nothing there? . only one __proto__ attribute , His type can be seen as a Object object . We don't actually define this object , This object is Person Prototype object .
Verify further by printing below :

console.log(p.__proto__ === Person.prototype) //true

This __proto__ Is a property supported by the browser , This attribute is a pointer inside this instance , The prototype object that points to the constructor of this instance , That is to say Person.prototype. The structure of the prototype object is like this
Person Deconstruction of prototype objects
Perosn The prototype object will automatically get a constructor attribute , This property points to its prototype The function where the property is located , That is to point Person, Print comparison can verify

console.log(p.__proto__.constructor === Person) //true

Also from Object There are some inherited methods , As in common use hasOwnProperty,toString etc. . These prototype methods can be called directly by the instance , It can also be rewritten .

3. Expansion of prototype objects

We can define our own methods and properties on the prototype object , Some common methods and properties that need to be used between objects can be defined on this , In this way, each object instance does not need to write code again in the function to realize the same function .

// page 
function Page(id, title){ = id;
	this.title = title;
	this.$div = $("#"+id);
// Show = function(){
// hide 
Page.prototype.hide = function(){

// there prototype Upper title It didn't work . Because in the process of querying attribute values, the parser first sits inside the function from its own instance and queries first , If not found, follow the prototype chain step by step 
Page.prototype.title = " I'm the title ";
// initialization 
Page.prototype.init = function() {
// Get content 
Page.prototype.getContent = function() {
	var content = this.$div.find(".content").html();
	return content;
var userPage = new Page("page-user"," User details ");
var logPage = new Page("page-log"," Log details ");
var userContent = userPage.getContent();
var logContent = logPage.getContent();
console.log(userContent) // I'm the user interface 
console.log(logContent) // I am the log interface 

The above constructor passes in different id Manage different page objects . Each page instance can use show(),hide() Method , Each instance manages its own properties , In this way, changes between each instance will not affect other instances .
 Rabbit exhibition of prototype objects

4. summary

Directly use a graph to represent

copyright notice
author[Long, ya],Please bring the original link to reprint, thank you.

Random recommended