Prototype object (prototype) and implicit prototype (__proto__) in javascript

1. What is a prototype object (prototype)?

• Each function (except the arrow function) inherently comes with a prototype property, which is called a prototype object (prototype) and is a reference type data.
• Role: Save the properties and methods constructed in the future using this constructor, and the constructed properties and methods can be shared.
• Note: The properties or methods added to the prototype are not used for the current function, but for the instance object obtained after the new function in the future.
• The prototype property is exclusive to the function.

function Fn(){}						//创建函数
var f = new Fn();					//实例化对象
Fn.prototype.name = "admin";		//在构造函数Fn的prototype属性身上添加的属性
Fn.prototype.show = function(){		//在构造函数Fn的prototype属性身上添加的属性
	console.log("hello");
}
									//实例对象使用上面所添加的属性和方法
console.log(f.name);				//admin
f.show();							//hello

2. What is a prototype chain object (implicit prototype)?

• Each object comes with a __proto__ attribute, which is called a prototype chain object (implicit prototype), and is a reference type data.
• The implicit prototype of an object __proto__ points to the prototype prototype property of the constructor that constructs the object.
• Role: Find the parent to ensure that the instance object can access the properties and methods defined in the prototype properties of the constructor.
• Note: The __proto__ attribute is specific to the object.

How does the instance object use the content of the prototype? (Using the __proto__ attribute)

function Fn(){}
var f = new Fn();
Fn.prototype.name = "admin";
Fn.prototype.show = function(){
	console.log("hello");
}
console.log(f.__proto__.name);		//admin
f.__proto__.show();					//hello

3. Read and write rules of current instance object attributes or methods (proximity principle)

Read :

• When accessing the property or method of the instance object f, it will first look in the current instance object f, if the object itself has this property or method, it will directly return the result,
• If not, it will follow __proto__ to find the parent of the instance object f, look for it in the parent, and if so, return,
• If not, continue to follow __proto__ to find the top Object, if so, then return,
• If not, return undefined

Write :

• Set the property or method directly on the current instance object f, and it will not be set upward (that is, the parent);
• You can only rewrite your own attributes or methods, not the parent's attributes or methods.

4. The relationship between the constructor, prototype, and instance objects

• The constructor Fn has a prototype property, and there is a constructor property in this property. This property contains a pointer to the original function, that is, the constructor Fn where the current prototype is located.

console.log(Fn.prototype.constructor === Fn);	//true

• After the new function, the instance object f is obtained, and the __proto__ attribute of the instance object f points to the prototype prototype of the constructor Fn.

console.log(f.__proto__ === Fn.prototype);	    //true

• Because the __proto__ of the instance object f points to the prototype prototype of the constructor Fn, the instance object f can indirectly access the methods of the Fn prototype prototype.

5. Detection of the relationship between instance objects and prototypes

• isPrototypeOf () function: detect whether there is a prototype relationship between two objects

//例如：查看Fn的原型对象是否为f的原型
console.log(Fn.prototype.isPrototypeOf(f));		//true

• instanceOf operator: detect whether an instance object comes from a constructor

//例如：查看f对象是不是Fn的实例
console.log(f instanceof Fn);  //true
//例如：查看f对象是不是Object的实例
console.log(f instanceof Object);	//true