Preface:

JS prototype is a very important knowledge point, many partners say that know, read, but can only answer one or two, really can speak clearly little, I hope this article can help are learning JS prototype partners.

Relationships between constructors, prototype objects, and instance objects

The constructor has the prototype property, which is a pointer to the prototype object

The constructor object contains the constructor property, which is a pointer to the corresponding constructor for the stereotype

3 Instance has an internal __proto__ attribute, which is a pointer to the prototype of the constructor

Note: Many people confuse prototype with prototypeprotoPrototype is a function property,proto(Implicit stereotype property) exists inside the function object, butproto[[Prototype]] not a canonical property, only some browsers implement this property, the canonical property is [[Prototype]]

var a = {}; console.log(a.prototype); // undefined, prototype only exists in function console.log(a.__proto__); // Object, the instance's __proto__ points to the constructor's prototypeCopy the code

When an attribute of an instance is referenced, it is first looked inside the object, and then in the object’s prototype if it cannot be found.

2. Object prototype (__proto__ pointer)

1 Common methods for creating objects

Var a = {id: 1}; Var Person = function (id) {this.id = id; }; var p1 = new Person(1); 3 object.create (a) : var a = {id: 1}; var b = Object.create(a); 4 new Object: var c = new Object();Copy the code

**2 **__proto__ pointing depends on how the object is created

__proto__ refers to the prototype of Object, that is: __proto__ === Object. Prototype (2) __proto__ === Object. P1.__proto__ === person.prototype // true (3) Create Object (b), __proto__ to a, that is: __proto__ === a // true (4) __proto__ refers to the prototype of Object(Object is also a constructor, so it refers to the prototype of Object) : c.__proto__ === Object.prototype // tureCopy the code

3. Wrong concept

(1) All objects are instances of Object. Function is an Object constructor, which means that Object is an instance of Function (Function is the hidden Boss).

(2) All other objects in Js inherit from Object. All other objects in Js inherit properties and methods from Object.prototype. Friends can try the following chestnut:

var a = {};
Object.b = 1;
Object.prototype.c = 2;
a.b // undefind
a.c // 2
Copy the code

(3) Proto__ only exists in and objects. In fact, functions also have __proto, which is also an instance of Function

var a = function () {};
typeof a; // 'function'
a.__proto__ === Function.prototype; // true
Copy the code

Prototype chain analysis

var Person = function() {};
Person.prototype.say = "say Person";
Person.prototype.age = "Person age";
var Father = function() {};
var Children = function() {};
var p = new Person();
Father.prototype = p;
var f = new Father();
f.age = "father age"
Children.prototype = f;
var c = new Children();
Copy the code

Resolution: Prototype refers to f, f.__proto__ refers to Father. Prototype, Father. Prototype refers to instance p, __proto__ refers to Person.prototype, which is itself an instance of Object, Prototype. Object. Prototype is also an Object, and its __proto__ points to null.

Conclusion:

Function instanceof Function // true object.__proto__ === function.prototype // true

2 Function.__proto__ === Function. Prototype // true So they are created by themselves? Change the way of thinking, people are born, you can figure it out.

3 all objects inherit from Object.prototype:

var a = {}; a.__proto__ === Object.prototype // true

Object.prototype.__proto__ === null // true

Js objects and functions have __proto__ attributes, but only function objects have prototype

The prototype chain is based on __proto__ and inheritance is implemented through Prototype. All objects have a __proto__ attribute, and it is by this __proto__ attribute that objects on the prototype chain are linked together! For an object on the stereotype chain, accessing a property (a method is also a property) is as follows: if it has the property itself, access it; If not, use the __proto__ attribute to find the next-level prototype Object in the prototype chain and see if it has the attribute, and so on, until it finds the attribute or reaches the Object. Prototype Object at the top of the prototype chain

If you have any questions or unclear descriptions, please leave a comment and give a thumbs up if this article helps you.