Prototype and prototype chain in JS

JS Prototypes and prototype chains in

When it comes to archetypes , We should remember the following points first , These are the key to understanding archetypes ：

1、 All reference types （ Array 、 function 、 object ） You can extend properties freely （ except null outside ）.

2、 All reference types have one ’_ _ proto_ _' attribute ( Also called implicit prototype , It's a common object ).

3、 All functions have one ’prototype’ attribute ( This is also called explicit archetype , It's also a common object ).

4、 All reference types , its ’_ _ proto_ _' Property points to its constructor ’prototype’ attribute .

5、 When trying to get the properties of an object , If the object itself does not have this property , Then I'll go to it ’_ _ proto_ _' attribute ( That is, the constructor of it ’prototype’ attribute ) In search of .

So the point is over , Let's understand the prototype and the chain according to the key points .
Prototype

Let's start with an example of a prototype .

	// This is a constructor 
	function Foo(name,age){
		this.name=name;
		this.age=age;
	}
	/* According to the key points 3, All functions have one prototype attribute , This property is an object 
	 And then, according to the key points 1, All objects are free to extend properties 
	 So there is the following writing */
	Foo.prototype={
		// prototype There are other properties in the object 
		showName:function(){
			console.log("I'm "+this.name);//this What it is depends on who called this function during execution 
		},
		showAge:function(){
			console.log("And I'm "+this.age);//this What it is depends on who called this function during execution 
		}
	}
	var fn=new Foo(' Xiao Ming ',19)
	/* When trying to get the properties of an object , If the object itself does not have this property , Then I will go to it 
	 Constructor's 'prototype' Find... In the properties */
	fn.showName(); //I'm  Xiao Ming 
	fn.showAge(); //And I'm 19

This is the prototype , Well understood. . So why use prototypes ？

Imagine if we want to pass Foo() To create many, many objects , If we write like this ：

function Foo(name,age){
		this.name=name;
		this.age=age;
		this.showName=function(){
			console.log("I'm "+this.name);
		}
		this.showAge=function(){
			console.log("And I'm "+this.age);
		}
	}

So every object we create , There's... In it showName and showAge Method , This will take up a lot of resources .
And if it's implemented through prototypes , Just assign a value to the property in the constructor , And write the method in Foo.prototype attribute ( This property is unique ) Inside . So that every object can use prototype Attribute showName、showAge Method , And it saves a lot of resources .
Prototype chain

Understand the prototype , Then the prototype chain is better understood .
The following passage can help understand the prototype chain

According to the key points 5, When trying to get the properties of an object , If the object itself does not have this property , Then it will go to its constructor ’prototype’ Find... In properties . That's because ’prototype’ Property is an object , So it also has one ’_ _ proto_ _' attribute .

So let's take an example ：

	//  Constructors 
	function Foo(name,age){
	 	this.name=name;
	 	this.age=age;
	}
	Object.prototype.toString=function(){
		//this What it is depends on who called this function during execution .
		console.log("I'm "+this.name+" And I'm "+this.age);
	}
	var fn=new Foo(' Xiao Ming ',19);
	fn.toString(); //I'm  Xiao Ming  And I'm 19
	console.log(fn.toString===Foo.prototype.__proto__.toString); //true
	
	console.log(fn.__proto__ ===Foo.prototype)//true
	console.log(Foo.prototype.__proto__===Object.prototype)//true
	console.log(Object.prototype.__proto__===null)//true

Is it a little strange to me ？ Let's analyze .
Picture description here

First ,fn The constructor of is Foo(). therefore ：
fn._ _ proto _ === Foo.prototype
Again because Foo.prototype It's a common object , Its constructor is Object, therefore ：
Foo.prototype. _ proto _ _=== Object.prototype
Through the code above , We know this toString() The method is in Object.prototype Inside , When calling a method that does not exist on the object itself , It will go up layer by layer to find , Until null until .

So when fn call toString() when ,JS Find out fn There is no such method in , So it went Foo.prototype Middle search , It turns out that there is still no such method , And then go Object.prototype Middle search , eureka , Just call Object.prototype Medium toString() Method .

This is the prototype chain ,fn To be able to call Object.prototype Because of the mechanism of prototype chain .

in addition , When using prototypes , It is generally recommended to write the method that needs to be extended in the constructor prototype Properties of the , Avoid writing in _ _ proto _ _ Attributes inside .
————————————————
Copyright notice ： This paper is about CSDN Blogger 「d_ph」 The original article of , follow CC 4.0 BY-SA Copyright agreement , For reprint, please attach the original source link and this statement .
Link to the original text ：https://blog.csdn.net/qq_36996271/article/details/82527256