After reading this article, you will find that prototypes and prototype chains are so simple! The classic prototype chain equality diagram above, according to the following learning, you will easily master it. 1. Understanding the Equality Relationship between Prototype and Prototype ChainFirst of all, we need to understand two concepts clearly: Please read these two concepts three times with me and remember them. They will be used later. So what are
Please read these two concepts three times with me and remember them. They will be used later.
function Person(name, age){ this.name = name; this.age = age; } Person.prototype.motherland = 'China'
let person01 = new Person('Xiaoming', 18); The father of js followed the following two principles when designing js prototypes and prototype chains: Person.prototype.constructor == Person // **Guideline 1: The constructor of the prototype object (ie Person.prototype) points to the constructor itself** person01.__proto__ == Person.prototype // **Guideline 2: The __proto__ of the instance (ie person01) and the prototype object point to the same place** Please read these two rules three times with me and remember them. They will be used later. Remember the above four concepts and two criteria , any prototype chain equality judgment can be correct; You can check the above picture to see if you have understood the concept and criteria. Be sure to check the above picture. // Start analyzing this classic graph from the top function Foo() function Foo() let f1 = new Foo(); let f2 = new Foo(); f1.__proto__ = Foo.prototype; // Rule 2 f2.__proto__ = Foo.prototype; // Rule 2 Foo.prototype.__proto__ = Object.prototype; // Rule 2 (Foo.prototype is also a common object, so Rule 2 applies) Object.prototype.__proto__ = null; // The prototype chain stops here Foo.prototype.constructor = Foo; // Rule 1 Foo.__proto__ = Function.prototype; // Rule 2 Function.prototype.__proto__ = Object.prototype; // Principle 2 (Function.prototype is essentially a common object, so Principle 2 applies) Object.prototype.__proto__ = null; // The prototype chain stops here // **Note the difference between Foo and Function here, Foo is an instance of Function** // Start analyzing this classic graph from the middle Function Object() Function Object() let o1 = new Object(); let o2 = new Object(); o1.__proto__ = Object.prototype; // Rule 2 o2.__proto__ = Object.prototype; // Rule 2 Object.prototype.__proto__ = null; // The prototype chain stops here Object.prototype.constructor = Object; // Rule 1 Object.__proto__ = Function.prototype // Principle 2 (Object is essentially a function); // This is a bit confusing. Object is essentially a function, and Function is essentially an object. Function.prototype.__proto__ = Object.prototype; // Rule 2 (Function.prototype is also an ordinary object, so Rule 2 applies) Object.prototype.__proto__ = null; // The prototype chain stops here // Start analyzing this classic diagram from Function Function() below Function Function() Function.__proto__ = Function.prototype // Rule 2 Function.prototype.constructor = Function; // Rule 1 From this we can conclude that except for Object.prototype.__proto__ = null; Array.prototype.__proto__ = Object.prototype; Foo.prototype.__proto__ = Object.prototype; 2: What do prototypes and prototype chains mean?
Take console.log(person01) Print Let's create a person2 instance let person02 = new Person('Xiaohua', 20); console.log(person02) Print Person.prototype.hairColor = 'black'; Person.prototype.eat = function(){ console.log('We usually eat three meals a day.') } console.log(person01) console.log(person02) At this time, when we print
person01,hairColor = 'yellow'; console.log(person01) console.log(person02) It can be seen that This is the end of this article about understanding JS prototype prototype chain. For more relevant JS prototype prototype chain content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Index Skip Scan in MySQL 8.0
>>: How to install Docker using scripts under Linux Centos
MySQL foreign key constraint (FOREIGN KEY) is a s...
Table of contents Preface 1. Create objects befor...
Since Uniapp does not have DingTalk authorization...
Table of contents After creating a container loca...
1. Unzip MySQL 8.0.16 The dada folder and my.ini ...
first step: In VMware, click "Edit" - &...
Table of contents Why use a debugger? Basic usage...
Nginx's configuration syntax is flexible and ...
Step 1. Enable MySQL slow query Method 1: Modify ...
This article describes how to configure time sync...
Preface For a long time, the application and lear...
1. Usage scenarios There is such a requirement, s...
Since enabling https access for the entire site, ...
When you start working on a project, it’s importa...
Table of contents Small but beautiful Keep it sim...