prototype object, prototype chain

prototype object

1.1 Understanding prototype objects

1) The prototype property of the
　　function 1. Each function has a prototype property, which by default points to an Object empty object (that is, the prototype object)
　　2. There is a property constructor in the prototype object, which points to the function object

2) Manipulate the prototype object
　　1. You can find the prototype object through the prototype property, and you can add properties and methods to the object (usually add methods)
　　2. Function: All instance objects of the function automatically have the properties (methods) in the prototype

1.2 Display prototype objects and implicit prototype objects

1) Concept
　　1. Each function has a prototype, that is, an explicit prototype
　　2. Each instance object has a __proto__, which can be called an implicit prototype
　　. The value of the implicit prototype of an object is the value of its corresponding constructor Values ​​for explicit prototypes
2) Illustration

3) Summary
　　1. The prototype property of the function: automatically added when the function is defined, the default value is an empty Object object
　　2. The __proto__ property of the object: automatically added when the object is created, the default value is the prototype property value of the constructor
　　3. Programmers can directly manipulate explicit prototypes, but not implicit prototypes (before ES6)

 Prototype chain

1) Concept

1. When accessing the properties of an object, first search in its own properties, find it and return
2. If not, then follow the __proto__ chain to find it, and find it and return
3. If not found, return undefined
4. __proto__ This prototype lookup chain is the prototype chain: implicit prototype

2) Function

 Find a property (method) of an object

3) Prototype chain_property problem

1. When reading the property value of the object: it will automatically search in the prototype chain
2. When setting the property value of the object: the prototype chain will not be searched, if the current object does not have this property, directly add this property and set its value
3. Methods are generally defined in the prototype, and properties are generally defined on the object itself through the constructor

4) Constructor/prototype/entity object relationship (diagram)

 

Explore instanceof

1) Concept
　　1. Expression: A instanceof B
　　2. If the explicit prototype object of the B function is on the prototype chain of the A object, return true, otherwise return false

2) Case

// Case 1 
function Foo() { }
 var f1 = new Foo();
console.log(f1 instanceof Foo); // true
console.log(f1 instanceof Object);  // true

//案例2
console.log(Object instanceof Function)  // true
console.log(Object instanceof Object)  // true
console.log(Function instanceof Object)  // true
console.log(Function instanceof Function)  // true
function Foo() {} 
console.log(Object instanceof  Foo); // false